2.5D地图绘制线和面

src/components/supermap-2.5d.vue

@@ -14,7 +14,6 @@ export default {
   data() {
     return {
       superMapRootUrl:null,
-      layerList:[],
       viewer:null,
       scene:null,
       handler:null,
@@ -28,6 +27,9 @@ export default {
       mvtMap3:null,
       road_name:null,
       layer_xiangzhenjie_name:null,
+      markerboxEntity: [],//地图落点实体
+      connectBoxEntity: null,//地图线实体
+      graphicsBoxEntity: null,//地图面实体
       /*************************原地图属性*********************/
       isEditableLayers: false, //绘图控件
 
@@ -48,6 +50,24 @@ export default {
   },
   props: {},
   methods: {
+    //移除之前添加的点
+    clearM() {
+      this.viewer.entities.removeAll()
+      if (this.markerboxEntity != null) {
+        this.viewer.entities.remove(this.markerboxEntity)
+        this.markerboxEntity = []
+      }
+    },
+    //移除之前添加的线
+    clearC() {
+      // 查找ID为entityE的图形对象
+      this.viewer.entities.remove(this.connectBoxEntity)
+    },
+    //移除之前添加的面
+    clearG() {
+      // 查找ID为entityE的图形对象
+      this.viewer.entities.remove(this.graphicsBoxEntity)
+    },
     superMapInfo(){
       getConfigKey('superMap.iServer').then(response => {
         this.superMapRootUrl = response.msg;
@@ -193,38 +213,35 @@ export default {
       }, 3000);
 
     },
-    //移除之前添加的点
-    clearM(){
-      this.viewer.entities.removeAll();
-    },
     /**
      * 地图落点
      */
-    setMarkers(makerList){
-      let that = this;
-      that.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
-      clearInterval(that.aac);
+    setMarkers(makerList) {
+      let that = this
+      that.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas)
+      clearInterval(that.aac)
       for (let i in makerList) {
-        let longitude = makerList[i].lng;
-        let latitude = makerList[i].lat;
-        that.viewer.entities.add({
-          name:"",
+        let longitude = makerList[i].lng
+        let latitude = makerList[i].lat
+        let marker = that.viewer.entities.add({
+          name: '',
           position: Cesium.Cartesian3.fromDegrees(longitude, latitude),
           billboard: {
             image: iconList[makerList[i].icon],
             width: 48,
             height: 48,
             heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
-            disableDepthTestDistance:Number.POSITIVE_INFINITY
+            disableDepthTestDistance: Number.POSITIVE_INFINITY
           },
           description: makerList[i].bindPopupHtml,
           click: makerList[i].click,
-          parameter: makerList[i].parameter,
-        });
+          parameter: makerList[i].parameter
+        })
+        that.markerboxEntity.push(marker)
       }
-      that.viewer.scene.globe.depthTestAgainstTerrain=false;
-      that.createLeftClickDescription();
-      that.createRightClickDescription();
+      that.viewer.scene.globe.depthTestAgainstTerrain = false
+      that.createLeftClickDescription()
+      that.createRightClickDescription()
     },
     /**
      * 地图落点
@@ -387,6 +404,40 @@ export default {
         destination: Cesium.Cartesian3.fromDegrees(lng, lat, 3000),
       });
     },
+    /**
+     * 地图画线(贴地)
+     */
+    setConnectList(connectList,color,withAlpha) {
+      let that = this
+      //Cesium.Color.fromCssColorString('#67ADDF')   16进制颜色设置
+      let material = Cesium.Color.fromCssColorString(color).withAlpha(withAlpha);
+      that.connectBoxEntity = that.viewer.entities.add({
+        Type: 'Polyline',
+        polyline: {
+          positions: Cesium.Cartesian3.fromDegreesArray(connectList),
+          clampToGround: true,//贴地 true,不贴地  false
+          width: 5,
+          material: material
+        }
+      })
+    },
+    /**
+     * 地图图形(贴地)
+     */
+    setGraphicsList(graphicsList,color,withAlpha) {
+      let that = this
+      //Cesium.Color.fromCssColorString('#67ADDF')   16进制颜色设置
+
+      let material = Cesium.Color.fromCssColorString(color).withAlpha(withAlpha);
+      that.graphicsBoxEntity = that.viewer.entities.add({
+        polygon: {
+          hierarchy: Cesium.Cartesian3.fromDegreesArray(graphicsList),
+          clampToGround: true,//贴地 true,不贴地  false
+          width: 5,
+          material: material
+        }
+      })
+    }
   },
 }
 </script>