清除未覆盖区域标记面2

src/components/supermap-2.5d.vue

@@ -6,11 +6,11 @@
         <div class="map-tit" v-show="mapshow">
           <div class="top-tit">
             <i class="iconfont sj-icon-jkzx"></i>
-            <span><img src="../assets/images/close.svg" @click="mapShow" /></span>
+            <span><img src="../assets/images/close.svg" @click="mapShow"/></span>
           </div>
           <div class="map-txt" v-html="bindPopupHtml">
           </div>
-          <div id="super2" />
+          <div id="super2"/>
         </div>
       </transition>
       <!--地图top 显示 结束-->
@@ -27,6 +27,7 @@ import Cookies from 'js-cookie'
 import {
   getConfigKey
 } from "@/api/system/config";
+
 export default {
   name: 'supermap-2.5d',
   data() {
@@ -50,7 +51,7 @@ export default {
       markerboxEntity: [], //地图落点实体
       markerboxEntityRadius: [], //地图落点实体
       connectBoxEntity: null, //地图线实体
-      graphicsBoxEntity: null, //地图面实体
+      graphicsBoxEntity: [], //地图面实体
       connectBoxEntityTwo: null, //地图线实体
       timer: null,
       /*************************原地图属性*********************/
@@ -67,7 +68,7 @@ export default {
         mapData: null,
         mapName: null
       },
-      showLayer:null,
+      showLayer: null,
       clickTime: new Date().getTime(),
       cacheData: {
         ProvinceRoad: "",
@@ -200,7 +201,7 @@ export default {
   created() {
   },
   mounted() {
-    this.showLayer = this.showLayer != undefined ? this.showLayer:false;
+    this.showLayer = this.showLayer != undefined ? this.showLayer : false;
   },
   props: {
     showLayer: [Boolean],
@@ -244,17 +245,18 @@ export default {
       that.handlerDis = new Cesium.MeasureHandler(that.viewer, Cesium.MeasureMode.Distance, that.clampMode);
       that.handlerDis.clampMode = 1;
       //注册测距功能事件
-      that.handlerDis.measureEvt.addEventListener(function(result) {
+      that.handlerDis.measureEvt.addEventListener(function (result) {
         var dis = Number(result.distance);
         var selOptV = that.selOptV;
         if (selOptV == 3 || selOptV == 4) {
           dis = Number(calcClampDistance(positions));
-        };
+        }
+        ;
         var distance = dis > 1000 ? (dis / 1000).toFixed(2) + 'km' : dis.toFixed(2) + 'm';
         that.handlerDis.disLabel.text = '距离:' + distance;
 
       });
-      that.handlerDis.activeEvt.addEventListener(function(isActive) {
+      that.handlerDis.activeEvt.addEventListener(function (isActive) {
         if (isActive == true) {
           that.viewer.enableCursorStyle = false;
           that.viewer._element.style.cursor = '';
@@ -280,12 +282,12 @@ export default {
       that.handlerArea = new Cesium.MeasureHandler(that.viewer, Cesium.MeasureMode.Area, that.clampMode);
 
       that.handlerArea.clampMode = 1;
-      that.handlerArea.measureEvt.addEventListener(function(result) {
+      that.handlerArea.measureEvt.addEventListener(function (result) {
         var mj = Number(result.area);
         var area = mj > 1000000 ? (mj / 1000000).toFixed(2) + 'km²' : mj.toFixed(2) + '㎡'
         that.handlerArea.areaLabel.text = '面积:' + area;
       });
-      that.handlerArea.activeEvt.addEventListener(function(isActive) {
+      that.handlerArea.activeEvt.addEventListener(function (isActive) {
         if (isActive == true) {
           that.viewer.enableCursorStyle = false;
           that.viewer._element.style.cursor = '';
@@ -342,9 +344,11 @@ export default {
     },
     //移除之前添加的面
     clearG() {
-      if (this.graphicsBoxEntity != null) {
-        this.viewer.entities.remove(this.graphicsBoxEntity)
-        this.graphicsBoxEntity = null
+      if (this.graphicsBoxEntity != null && this.graphicsBoxEntity.length > 0) {
+        for (let i = 0; i < this.graphicsBoxEntity.length; i++) {
+          this.viewer.entities.remove(this.graphicsBoxEntity[i])
+        }
+        this.graphicsBoxEntity = []
       }
     },
     superMapInfo(index) {
@@ -615,7 +619,7 @@ export default {
       }
 
       //开始加载专题图等数据，8秒后开始执行
-      setTimeout(function() {
+      setTimeout(function () {
         // 3.水系
         // let shuixi = that.superMapRootUrl+"/map-mvt-shuixiMian/restjsr/v1/vectortile/maps/shuixi_Mian";
         // that.mvtMap0 = that.scene.addVectorTilesMap({
@@ -692,10 +696,10 @@ export default {
 
       }, 3000);
       that.viewer.selectedEntityChanged.addEventListener(function (entity) {
-        if(entity != undefined && Reflect.has(entity,'layerID')){
-          that.queryParams.name  = entity.pickResult[entity.layerID][0].feature.properties.Name;
-          that.queryParams.mapData  = entity.pickResult[entity.layerID][0].feature.properties.SmUserID;
-          that.queryParams.mapName  = entity.pickResult[entity.layerID][0].feature.properties.layer;
+        if (entity != undefined && Reflect.has(entity, 'layerID')) {
+          that.queryParams.name = entity.pickResult[entity.layerID][0].feature.properties.Name;
+          that.queryParams.mapData = entity.pickResult[entity.layerID][0].feature.properties.SmUserID;
+          that.queryParams.mapName = entity.pickResult[entity.layerID][0].feature.properties.layer;
           getDeviceList(that.queryParams).then(res => {
             const treeLabels = [{
               "id": null,
@@ -705,7 +709,7 @@ export default {
               "parentLabelCode": ""
             }];
             const labelChannels = [];
-            for (let i in res.data){
+            for (let i in res.data) {
               treeLabels.push({
                 "id": null,
                 "labelCode": res.data[i].cameraCode,
@@ -734,7 +738,7 @@ export default {
                 "labelChannels": labelChannels
               }
             ]
-            that.$emit('fatherMethod', dianshiqiang,res.data[0].longitude,res.data[0].latitude,res.data[0].userList);
+            that.$emit('fatherMethod', dianshiqiang, res.data[0].longitude, res.data[0].latitude, res.data[0].userList);
           });
         }
       });
@@ -774,7 +778,7 @@ export default {
      */
     createLeftClickDescription() {
       let that = this;
-      that.handler.setInputAction(function(movement) {
+      that.handler.setInputAction(function (movement) {
         that.pick = that.viewer.scene.pick(movement.position);
         if (that.pick && that.pick) {
           let id = Cesium.defaultValue(that.viewer.scene.pick(movement.position).id, that.viewer.scene.pick(
@@ -786,7 +790,7 @@ export default {
             that.bindPopupHtml = html
             that.mapshow = true
           } else if (html == 'cgq') {
-            that.timer = setInterval(function() {
+            that.timer = setInterval(function () {
               var color = "green";
               var value = Math.random();
               var up = "▲";
@@ -815,7 +819,7 @@ export default {
      */
     createRightClickDescription() {
       let that = this;
-      that.handler.setInputAction(function(movement) {
+      that.handler.setInputAction(function (movement) {
         that.mapshow = false
         if (new Date().getTime() - that.clickTime < 2000) {
           return
@@ -926,7 +930,7 @@ export default {
       let that = this
       //Cesium.Color.fromCssColorString('#67ADDF')   16进制颜色设置
       let material = Cesium.Color.fromCssColorString(color).withAlpha(withAlpha);
-      that.graphicsBoxEntity = that.viewer.entities.add({
+      let graphicsBoxEntity = that.viewer.entities.add({
         polygon: {
           hierarchy: Cesium.Cartesian3.fromDegreesArray(graphicsList),
           clampToGround: true, //贴地 true,不贴地  false
@@ -934,6 +938,34 @@ export default {
           material: material
         }
       })
+      that.graphicsBoxEntity.push(graphicsBoxEntity);
+    },
+    /**
+     * 地图图形(贴地)
+     */
+    setGraphicsListMultiple(graphicsList, color, withAlpha) {
+      let that = this
+      //Cesium.Color.fromCssColorString('#67ADDF')   16进制颜色设置
+      let material = Cesium.Color.fromCssColorString(color).withAlpha(withAlpha);
+      for (let i = 0; i < graphicsList.length; i++) {
+        if (graphicsList[i].latLngs != null && graphicsList[i].latLngs != "") {
+          let jsonToArr = JSON.parse(graphicsList[i].latLngs);
+          const arr = []
+          for (let j = 0; j < jsonToArr.length; j++) {
+            arr.push(jsonToArr[j].lng)
+            arr.push(jsonToArr[j].lat)
+          }
+          let graphicsBoxEntity = that.viewer.entities.add({
+            polygon: {
+              hierarchy: Cesium.Cartesian3.fromDegreesArray(arr),
+              clampToGround: true, //贴地 true,不贴地  false
+              width: 5,
+              material: material
+            }
+          })
+          that.graphicsBoxEntity.push(graphicsBoxEntity);
+        }
+      }
     }
   },
 }
@@ -964,8 +996,7 @@ export default {
     i {
       color: #10ccff;
       font-size: 18px;
-      text-shadow: 0px 0px 5px #23b3b3;
-    ;
+      text-shadow: 0px 0px 5px #23b3b3;;
     }
 
     span img {
@@ -983,7 +1014,8 @@ export default {
     line-height: 20px;
     font-size: 12px;
 
-    .d-l-con {}
+    .d-l-con {
+    }
   }
 }
 

src/views/monitor.vue

@@ -276,17 +276,7 @@ export default {
       let that = this;
       notCoverPlaces(deptId).then((res) => {
         if (res.data != null && Array.isArray(res.data)) {
-          for (let i = 0; i < res.data.length; i++) {
-            if (res.data[i].latLngs != null && res.data[i].latLngs != "") {
-              let jsonToArr = JSON.parse(res.data[i].latLngs);
-              const arr = []
-              for (let j = 0; j < jsonToArr.length; j++) {
-                arr.push(jsonToArr[j].lng)
-                arr.push(jsonToArr[j].lat)
-                that.$refs.supermap.setGraphicsList(arr, "rgba(23,22,22,0)", 0.8);
-              }
-            }
-          }
+          that.$refs.supermap.setGraphicsListMultiple(res.data,"rgba(23,22,22,0)", 0.8);
         }
       })
     },
@@ -433,6 +423,7 @@ export default {
       this.getNotCoverPlaces(this.deptId);
     },
     laClick() {
+      this.$refs.supermap.clearG();
       this.onLa = true;
       this.onShe = false;
       this.onChuan = false;
@@ -450,6 +441,7 @@ export default {
       this.placeholderMsg = "请输入传感器名称"
       this.deptId = Cookies.get("deptId")
       this.getMonitorDeviceAndDataList()
+      this.$refs.supermap.clearG();
     },
     // 云广播
     getDlblistBydeptId() {