前言

利用GeoServer和Openlayer地图显示区域掩模

利用GeoServer进行图层发布

Openlayer地图显示区域掩模

对界面地图进行切换，卫星图利用GeoServer，水系等根据geojson文件生成图层，效果如下

卫星图部分代码如下：

// 创建卫星图图层
        _that.satelliteLayer = new TileLayer({
          name: '海宁卫星区域',
          source: new TileWMS({
            url: 'http://gis.1.com/geoserver/test_hn/wms',
            params: {
              LAYERS: 'test_hn:haining_Level_14',
              TILED: true
            },
            serverType: 'geoserver'
          }),
          style: new Style({
            stroke: new Stroke({
              color: 'rgba(16, 66, 118, 0.6)', //'#1E71B8',
              width: 4
            }),
            fill: new Fill({
              color: 'rgba(255, 255, 255, 0.2)' // 'rgba(50, 103, 174, 0.1)' //'rgba(15, 62, 115, 0.1)'
            })
          })
        })

    //地图加载图层
    window.map = new Map({
            target: 'map',
            layers: [
              _that.satelliteLayer,
              _that.waterLayer,
              _that.riverLayer,
              _that.riverBoundaryLayer
            ],
            view: view,
            controls: defaultControls({
              //加载控件到地图容器中
              zoom: false,
              rotate: false,
              attribution: false
            })
          })

欢迎交流，知识星球、微信公众号与账号"浪潮行舟"同号