Cesium 添加 Polygon与multiPolygon

Posted 2021-06-13 游侠

转载 Cesium 添加 Polygon与multiPolygon

为了逻辑清晰，我把代码分成了如下几部分，亲测可用

1)首先区分是polygon还是multiPolygon，若为multpolygon,则首先把multpolygon拆分为多个polygon,然后循环，把polygon字符串上球

addMultiPolygon(polygonString) {
   
     
     
   this.clearAll();  // 清空球上实体
    // polygonString 可能以multiPolygon,或者polygon开头
    // 若字符串以MulitPolyGon开头 
    if (polygonString.startsWith("MULTIPOLYGON")) {
   
     
     
        let polyganList = this.multPolyganToList(polygonString); // 把multipolygon处理成多个polygon
        polyganList.forEach((polygon)=>{
   
     
     
            this.addPolygon(polygon);
        })
        this.viewer.zoomTo(this.viewer.entities);
    } 
    else {
   
     
     
        this.addPolygon(polygonString);
        this.viewer.zoomTo(this.viewer.entities);
    } 
},

2）把mulitPolygon字符串处理成polygon字符串数组

// 把multiPolygon处理成多个polygon
multPolyganToList(data) {
   
     
     
   let ployganStringList = [];
   let tempData = data.slice(16,data.length-3);
   let tempPloyganList = tempData.split(\')), ((\');
   tempPloyganList.forEach((val)=>{
   
     
     
       let polygan = "POLYGON ((" + val + "))";
       ployganStringList.push(polygan);
   return ployganStringList;
},

3）把polygon字符串上球，polygon中可能含有hole，因此需要单独处理，把polygon字符串处理成多个polygon字符串，然后上球

// polygon中可能包含hole，因此需要做判断
 addPolygon(polygonString) {
   
     
     
    if(polygonString === \'POLYGON ((-180 -90, -180 90, 180 90, 180 -90, -180 -90))\') {
   
     
     
         this.$message.warning(\'该类数据覆盖全球\');
         return;
     }
     if(polygonString.indexOf(\'), (\')!=-1) {
   
     
     
         let polyganList = this.PolyganToList(polygonString); // POLYGON处理成多个polygon
         let dataArray = polyganList[0];
         let holes = []
         for (let i = 1;i < polyganList.length; i++) {
   
     
     
             holes.push({
   
     
     
                 positions: Cesium.Cartesian3.fromDegreesArray(polyganList[i]),
             }, )
         }
         this.addPolygonWithHoles(dataArray,this.viewer,holes)
     } else {
   
     
     
         let polygon = this.wktToPolygonArray(polygonString);
         this.addPolygonPlane(polygon,this.viewer);
     } 
 },

4）polygon中可能包含holes，若存在holes，把polygon字符串再处理成多个polygon字符串的列表

// polygon中包含多个polygon
PolyganToList(data) {
   
     
     
    let ployganList = [];
    let tempData = data.slice(10,data.length-2);
    let tempPloyganList = tempData.split(\')), ((\');
    tempPloyganList.forEach((val)=>{
   
     
     
        if(val.indexOf(\'), (\')!=-1) {
   
     
     
            let itemList = val.split(\'), (\');
            itemList.forEach((item)=>{
   
     
     
                let itemPolygon = "POLYGON ((" + item + "))";
                ployganList.push(this.wktToPolygonArray(itemPolygon));
            })
        }  
    })
    return ployganList;
},

5）把单个polygon转成cesium可以上球的数据

// 单个polygon转cesium可上球的数据
 wktToPolygonArray(data) {
   
     
     
      let dataArray = [];
      let tempData = data.slice(10,data.length-2);
      let pointArray = tempData.split(\', \');
      pointArray.forEach((val)=>{
   
     
     
          let l = val.split(\' \');
          dataArray.push(Number(l[0]));
          dataArray.push(Number(l[1]));
      })
      return dataArray;
  },

// 添加多边形plane为holes
 // polygon中会有holes
addPolygonWithHoles(dataArray,viewer,holes) {
   
     
     
    viewer.entities.add({
   
     
     
    name: "Blue polygon with holes",
        polygon: {
   
     
     
            hierarchy: {
   
     
     
                positions: Cesium.Cartesian3.fromDegreesArray(dataArray),
                holes: holes
                },
            material: Cesium.Color.CORNFLOWERBLUE.withAlpha(0.4),
            height: 0,
            outline: true, // height is required for outline to display
            outlineColor: Cesium.Color.DODGERBLUE, 
        },
    });
},