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

前言

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

利用GeoServer进行图层发布

Openlayer系列:利用GeoServer和Openlayer地图显示区域掩模_第1张图片

Openlayer地图显示区域掩模

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

Openlayer系列:利用GeoServer和Openlayer地图显示区域掩模_第2张图片

Openlayer系列:利用GeoServer和Openlayer地图显示区域掩模_第3张图片

卫星图部分代码如下:

// 创建卫星图图层
        _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
            })
          })

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

你可能感兴趣的:(前端,Openlayer,WebGIS,前端,javascript,vue.js)