Cesium基础代码段（四）反选遮罩

        反选遮罩通常用于突出显示某块区域，实现方法一般采用区域内挖空，区域外叠加一层带有颜色的多边形。实现效果如下：

         实现途径：

         官方API，遮罩多边形PolygonHierarchy类，链接：多边形层次结构 - 铯文档 (cesium.com)

        实现步骤：   

        （1）首先需要确定遮罩的区域，一般选择大范围的区域，通过添加大多边形进行实现。

        （2）确定需要突出显示的区域，将区域范围坐标作为holes参数。

        （2）突出边界，可将边界线用多边形绘制出来，赋予亮眼的颜色加入场景，效果更为明显

         示例代码：

const maskpointArray = []
      this.$axios.get('XXX.json')//读取区域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 area= new Cesium.Entity({
            id: 1,
            polygon: {
              hierarchy: {
                positions: Cesium.Cartesian3.fromDegreesArray([120, 0, 120, 89, 160, 89, 160, 0]),//外部区域
                holes: [{
                  positions: maskspoint//挖空区域
                }]
              },
              material: Cesium.Color.BLUE.withAlpha(0.6)//外部颜色
            }
          })
          const line= new Cesium.Entity({
            id: 2,
            polyline: {
              positions: maskspoint,
              width: 2,//边界线宽
              material: Cesium.Color.fromCssColorString('#6dcdeb')//边界线颜色
            }
          })
          this.viewer.entities.add(area)
          this.viewer.entities.add(line)
          this.viewer.flyTo(line, { duration: 3 })
        }).catch((response) => {
          console.log(response)
        })
    }

         参考博客：http://t.csdn.cn/maOVE