3.场景的反选遮罩

愿你出走半生,归来仍是少年！ 

环境：Vue3 Cesium1.97

1.原理

        在Gis中的多面对象可以表达出带孔的面，在Cesium中也可以通过类似的原理进行实现。在Cesium中的PolygonHierarchy对象，可以构造一个有边界的多边形，该多边形还可以拥有多个PolygonHierarchy对象进行挖孔。

2.实现

        按照以上描述的原理，我们可通过代码创建两层PolygonHierarchy对象，父节点负责创建边框范围，子节点负责挖孔。

/**
       * @description: 创建一个覆盖全国的遮罩
       * @param {Float32Array} vertexs 遮罩中空地带的边界经纬度坐标数组
       * @param {Number} a 透明度 0-1,通过255反算
       * @param {Number} r 红色 0-1,通过255反算
       * @param {Number} g 绿色 0-1,通过255反算
       * @param {Number} b 蓝色 0-1,通过255反算
       */      
      UsePolygonShade(vertexs,a,r,g,b){
        //内孔的边界坐标
         let cartesian3s= Cesium.Cartesian3.fromDegreesArray(vertexs);

         //内孔对象
         let centerHole = new Cesium.PolygonHierarchy(cartesian3s);

         //在内孔外面添加一个新的外壳
         this.entities.add({
           name: "PolygonShade",
           polygon: {
             hierarchy: {
               positions: Cesium.Cartesian3.fromDegreesArray([
                 73,3,73,53,135,53,135,3//中国大致范围
               ]),
               holes: [centerHole],
             },
             material: new Cesium.Color(r,g,b,a)
           },
           heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
         });
     
      }

        通过节点参数实现多边形的孔，通过a、r、g、b实现遮罩的颜色，两相结合实现了一个覆盖全国大概范围并可自定义颜色的遮罩。以下实现了一个矩形范围的反选红色遮罩。