[游戏开发]cesium绘制反选遮罩层

效果图：

有时候需要突出目标区域，掩盖目标区域外的地图，就像一个有填充颜色的多边形内部挖空了一块区域，这块区域就是目标区域。cesium实现起来原理很简单，就是绘制一个挖空的面，具体用到了PolygonHierarchy 属性类，这个属性类中的positions属性设置面的所有位置点，holes属性设置需要挖空的区域。实现起来就是先在地图上画一个大的区域（这个区域够用就行，区域太大加载有点小卡），然后加载目标区域的数据，我读取的是geojson数据获取目标边界所有点信息，进行挖空。
具体代码如下：

<template>
  <div class="mycontainer">
    <Map @Viewer="getViewer"></Map>
  </div>
</template>

<script>
import Map from '../map.vue'
const Cesium = require('cesium/Cesium')

export default {
  components: { Map },
  data () {
    return {
      viewer: null
    }
  },
  mounted () {
    this.initmask()
  },
  watch: {
  },
  methods: {
    getViewer (view) {
      this.viewer = view
    },
    initmask () {
      const maskpointArray = []
      this.$axios.get('/data/hzpoygon.json')
        .then((response) => {
          // const positions = Cesium.Cartesian3.fromDegreesArray(response.data.features[0].geometry.coordinates)
          console.log(response.data.features[0].geometry.coordinates[0].length)
          for (let i = 0; i < response.data.features[0].geometry.coordinates[0].length; i++) {
            maskpointArray.push(response.data.features[0].geometry.coordinates[0][i][0])
            maskpointArray.push(response.data.features[0].geometry.coordinates[0][i][1])
          }
          var maskspoint = Cesium.Cartesian3.fromDegreesArray(maskpointArray)
          const entity1 = new Cesium.Entity({
            id: 1,
            polygon: {
              hierarchy: {
               // 绘制的区域太大容易卡顿
                positions: Cesium.Cartesian3.fromDegreesArray([100, 0, 100, 89, 150, 89, 150, 0]),
                // holes是图形内需要挖空的区域
                holes: [{
                  positions: maskspoint
                }]
              },
              material: Cesium.Color.BLUE.withAlpha(0.6)

            }
          })
          const entity2 = new Cesium.Entity({
            id: 2,
            polyline: {
              positions: maskspoint,
              width: 2,
              material: Cesium.Color.fromCssColorString('#6dcdeb')
            }
          })
          this.viewer.entities.add(entity1)
          this.viewer.entities.add(entity2)
          this.viewer.flyTo(entity2, { duration: 3 })
        }).catch((response) => {
          console.log(response)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.mycontainer{
  height: 100%;
  width: 100%;
}
</style>