使用 GeoJSON 遮罩只显示指定区域

效果如下图

方式一：使用矢量图层样式进行覆盖

缺点：

• 图层拖拽移动期间不能实时遮盖
• 不能指定遮罩的图层，只能全部遮罩
  

示例代码

<script>
import { Vector as VectorSource } from 'ol/source'
import { Vector as VectorLayer } from 'ol/layer'
import { Fill, Stroke, Style } from 'ol/style'
import { GeoJSON } from 'ol/format'
import { mask } from '@turf/turf'
import maskJson from '@/assets/json/100000.json'

export default {
  methods: {
    creatMask(){
      // region 遮罩图层
      let vectorSource
      if (this.maskLayer) {
        vectorSource = this.maskLayer.getSource()
        vectorSource.clear()
      }
      else {
        vectorSource = new VectorSource()
        const vectorLayer = new VectorLayer({
          source: vectorSource,
          style: new Style({
            stroke: new Stroke({
              color: 'rgb(144,30,252)',
              width: 3,
            }),
            fill: new Fill({ color: 'rgba(220,240,253,0.6)' }),
          }),
          zIndex: 9999,
        })
        this.maskLayer = vectorLayer
        vectorLayer.setMap(this.map)
      }
      // endregion

      // 其他区域遮罩 Feature 对象
      // 此处注意坐标系问题, turf.mask方法中使用的是4326,应保证数据格式是4326
      const maskFeature = new GeoJSON().readFeature(mask(maskJson), {
        dataProjection: 'EPSG:4326', // json的坐标系
        featureProjection: 'EPSG:3857', // 当前地图使用的坐标系
      })
      vectorSource.addFeature(maskFeature)
    },
  },
}
</script>

方式二：使用ol-ext Filter（推荐使用）

• 解决了方式一中的缺点

示例代码

<script>
import { Vector as VectorSource } from 'ol/source'
import { Vector as VectorLayer } from 'ol/layer'
import { Fill, Stroke, Style } from 'ol/style'
import { GeoJSON } from 'ol/format'
import Mask from 'ol-ext/filter/Mask'
import maskJson from '@/assets/json/100000.json'

export default {
  methods: {
    creatMask(){
      // region 需要被遮罩的图层
      let maskLayer = this.maskLayer
      if (!maskLayer) {
        maskLayer = new VectorLayer({
          source: new VectorSource(),
          style: new Style({
            stroke: new Stroke({
              color: 'rgb(144,30,252)',
              width: 3,
            }),
            fill: new Fill({ color: 'rgba(220,240,253,0.6)' }),
          }),
          zIndex: 9999,
        })
        this.maskLayer = maskLayer
        maskLayer.setMap(this.map)
      }
      // endregion

	  // 创建遮罩过滤, 此处注意坐标系问题
      const maskFilter = new Mask({
        feature: new GeoJSON().readFeature(maskJson, {
          dataProjection: 'EPSG:4326', // json的坐标系
          featureProjection: 'EPSG:3857', // 当前地图使用的坐标系
        }),
        wrapX: true,
        inner: false,
        fill: new Fill({ color: 'rgba(220,240,253,0.6)' }),
      })
	  // 设置图层遮罩过滤
      maskLayer.addFilter(maskFilter)
    },
  },
}
</script>