火灾蔓延 事件详情互换

src/components/supermap-2.5d.vue

@@ -6,15 +6,15 @@
         <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=false" /></span>
           </div>
           <div class="map-txt" v-html="bindPopupHtml">
           </div>
-
           <el-button size="mini" type="primary" class="sj-icon-btn" @click="openTvwall()" v-if="_click!=''">
             查看
           </el-button>
         </div>
+        <div id="super2"></div>
       </transition>
       <!--地图top 显示 结束-->
     </div>
@@ -35,10 +35,10 @@ export default {
   data() {
     return {
       _click:null,
+      openZt: false,
       _parameter:null,
       bindPopupHtml: null,
       mapshow: false,
-      openZt:false,
       superMapRootUrl: null,
       viewer: null,
       scene: null,
@@ -58,14 +58,12 @@ export default {
       graphicsBoxEntity: null, //地图面实体
       markerboxEntityRadius: [], //地图落点实体
       connectBoxEntityTwo: null, //地图线实体
-      timer: null,
       /*************************原地图属性*********************/
       isEditableLayers: false, //绘图控件
       selOptV: 2, // 贴地量算
       clampMode: 1, // 空间模式
       handlerDis: null, // 距离
       handlerArea: null, // 面积
-
       /*************************原地图属性*********************/
       aac: null,
       queryParams: {
@@ -73,7 +71,6 @@ export default {
         mapData: null,
         mapName: null
       },
-      showLayer:true,
       clickTime: new Date().getTime(),
       cacheData: {
         ProvinceRoad: "",
@@ -86,24 +83,23 @@ export default {
       },
       supermapUrls: [
         [
-          "/3D-sipingchangjing/rest/realspace/datas/siping_2m@spyx4326",//底图0
-          "/3D-local3DCache-0608XinBanQingXieShiJing/rest/realspace",//3D模型（二级图层）1
-          "/map-mvt-shuixiMian/restjsr/v1/vectortile/maps/shuixi_Mian",//水系图2
-          "/map-mvt-lindi/restjsr/v1/vectortile/maps/lindi",//林地图3
-          "/map-mvt-nongtian/restjsr/v1/vectortile/maps/nongtian",//农田图4
-          "/map-mvt-roadXian/restjsr/v1/vectortile/maps/road_Xian",//路网图5
-          "/3D-road_Name_S/rest/realspace",//路网名称6
-          "ProvinceRoad_L@SiPing#1",//名称图层叠加7
-          "CountyRoad_L@SiPing#1",//名称图层叠加8
-          "StateRoad_L@SiPing#1",//名称图层叠加9
-          "/3D-shuixi_Name/rest/realspace",//水系名称10
-          "ShuiXi@SiPing#1",//水系名称叠加11
-          "/map-SIPING/rest/maps/XianJie_XiangZhenJie",//乡镇街界限12
-          "/3D-Name_he/rest/realspace",//乡镇街名称13
-          "XianJie@SiPing#1",//县界名称14
-          "XiangZhenJie@SiPing#2",//乡镇街名称15
-          "Cun@SiPing#1",//村名称16
-          "/map-SIPING/rest/maps/siping",//17
+          "/3D-sipingchangjing/rest/realspace/datas/siping_2m@spyx4326",//底图
+          "/3D-local3DCache-0608XinBanQingXieShiJing/rest/realspace",//3D模型（二级图层）
+          "/map-mvt-shuixiMian/restjsr/v1/vectortile/maps/shuixi_Mian",//水系图
+          "/map-mvt-lindi/restjsr/v1/vectortile/maps/lindi",//林地图
+          "/map-mvt-nongtian/restjsr/v1/vectortile/maps/nongtian",//农田图
+          "/map-mvt-roadXian/restjsr/v1/vectortile/maps/road_Xian",//路网图
+          "/3D-road_Name_S/rest/realspace",//路网名称
+          "ProvinceRoad_L@SiPing#1",//名称图层叠加
+          "CountyRoad_L@SiPing#1",//名称图层叠加
+          "StateRoad_L@SiPing#1",//名称图层叠加
+          "/3D-shuixi_Name/rest/realspace",//水系名称
+          "ShuiXi@SiPing#1",//水系名称叠加
+          "/map-SIPING/rest/maps/XianJie_XiangZhenJie",//乡镇街界限
+          "/3D-Name_he/rest/realspace",//乡镇街名称
+          "XianJie@SiPing#1",//县界名称
+          "XiangZhenJie@SiPing#2",//乡镇街名称
+          "Cun@SiPing#1",//村名称
         ],
         [
           "/3D-shuangliaoYX/rest/realspace/datas/siping_2m_shuangliao@spyx4326",
@@ -123,7 +119,6 @@ export default {
           "shuangliaoshi@gengdi#1",
           "XiangZhenJie_shuangliao@gengdi#1",
           "Cun_shuangliao@SiPing#1",
-          "/map-SIPING/rest/maps/siping",//17
         ],
         [
           "/3D-lishuYX/rest/realspace/datas/siping_2m_lishu@spyx4326",
@@ -143,7 +138,6 @@ export default {
           "lishushi@gengdi#1",
           "XiangZhenJie_lishu@gengdi#1",
           "Cun_lishu@SiPing#1",
-          "/map-SIPING/rest/maps/siping",//17
         ],
         [
           "/3D-tiexiYX/rest/realspace/datas/siping_2m_tiexi@spyx4326",
@@ -163,7 +157,6 @@ export default {
           "tiexishi@gengdi#1",
           "XiangZhenJie_tiexi@gengdi#1",
           "Cun_tiexi@SiPing#1",
-          "/map-SIPING/rest/maps/siping"
         ],
         [
           "/3D-tiedongYX/rest/realspace/datas/siping_2m_tiedong@spyx4326",
@@ -183,7 +176,6 @@ export default {
           "tiedongshi@gengdi#1",
           "XiangZhenJie_tiedong@gengdi#1",
           "Cun_tiedong@SiPing#1",
-          "/map-SIPING/rest/maps/siping",//17
         ],
         [
           "/3D-yitongYX/rest/realspace/datas/siping_2m_yitong@spyx4326",
@@ -203,20 +195,19 @@ export default {
           "yitongshi@gengdi#1",
           "XiangZhenJie_yitong@gengdi#1",
           "Cun_yitong@SiPing#1",
-          "/map-SIPING/rest/maps/siping",//17
         ],
       ],
+      dianshiqiang:null,
+      longitude:null,
+      latitude:null,
+      userList:null,
     }
   },
   watch: {},
   created() {
   },
-  mounted() {
-    this.showLayer = this.showLayer != undefined ? this.showLayer:false;
-  },
-  props: {
-    // showLayer: [Boolean],
-  },
+  mounted() {},
+  props: {},
   methods: {
     //初始化地图数据
     removeAllviewer(num, index) {
@@ -312,10 +303,6 @@ export default {
       });
       that.handlerArea.activate();
     },
-    mapShow() {
-      this.mapshow = false,
-        clearInterval(this.timer)
-    },
     //清除所有
     clearAll() {
       this.viewer.entities.removeAll()
@@ -329,11 +316,15 @@ export default {
         this.markerboxEntityRadius = []
       }
     },
+    mapShow() {
+      this.mapshow = false,
+        clearInterval(this.timer)
+    },
     //移除之前添加的线
     clearTwoC() {
       if (this.connectBoxEntityTwo != null) {
         this.viewer.entities.remove(this.connectBoxEntityTwo)
-        this.connectBoxEntityTwo = []
+        this.connectBoxEntityTwo = null
       }
     },
     /**
@@ -409,14 +400,14 @@ export default {
     clearC() {
       if (this.connectBoxEntity != null) {
         this.viewer.entities.remove(this.connectBoxEntity)
-        this.connectBoxEntity = []
+        this.connectBoxEntity = null
       }
     },
     //移除之前添加的面
     clearG() {
       if (this.graphicsBoxEntity != null) {
         this.viewer.entities.remove(this.graphicsBoxEntity)
-        this.graphicsBoxEntity = []
+        this.graphicsBoxEntity = null
       }
     },
     superMapInfo(index) {
@@ -688,22 +679,16 @@ export default {
 
       //开始加载专题图等数据，8秒后开始执行
       setTimeout(function() {
-        //3.水系
-        if(that.showLayer){
-          let shuixi = that.superMapRootUrl + withinData[2];
-          that.mvtMap0 = that.scene.addVectorTilesMap({
-            url: shuixi,
-            canvasWidth: 512,
-            name: 'mvt_map0',
-            viewer: that.viewer
-          });
-          that.mvtMap0.selectedColor = new Cesium.Color(6, 169, 254, 0.5);
-          // 8.添加水系NAME
-          let shuixi_name_url = that.superMapRootUrl + withinData[10];
-          that.shuixi_name = that.scene.open(shuixi_name_url);
-          that.cacheData.ShuiXi = withinData[11]
-        }
-
+        // // 3.水系
+        // let shuixi = that.superMapRootUrl+"/map-mvt-shuixiMian/restjsr/v1/vectortile/maps/shuixi_Mian";
+        // that.mvtMap0 = that.scene.addVectorTilesMap({
+        //   url: shuixi,
+        //   canvasWidth: 512,
+        //   name: 'mvt_map0',
+        //   viewer: that.viewer,
+        //   selectedColor:new Cesium.Color(6,169,254,0.5),
+        //   show:true,
+        // });
 
         // //4.林地
         // let lindi = that.superMapRootUrl+"/map-mvt-lindi/restjsr/v1/vectortile/maps/lindi";
@@ -741,7 +726,9 @@ export default {
         // let road_name_url = that.superMapRootUrl+'/3D-road_Name_S/rest/realspace';
         // that.road_name = that.scene.open(road_name_url);
         //
-
+        // // 8.添加水系NAME
+        // let shuixi_name_url = that.superMapRootUrl+'/3D-shuixi_Name/rest/realspace';
+        // that.shuixi_name = that.scene.open(shuixi_name_url);
 
         //9.添加县界和乡镇界
         let layer_xianjie = that.viewer.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({
@@ -771,7 +758,6 @@ export default {
           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 => {
-            that.openZt = true;
             const treeLabels = [{
               "id": null,
               "labelCode": "999",
@@ -822,18 +808,18 @@ export default {
               "                </div>" +
               "                </div>" +
               "                </span>";
-            for (let i in res.data[0].userList) {
+            for (let i in res.data[0].userList){
               html += "<span>" +
                 '                  <div class="d-l-con">' +
                 '                  <div class="d-l-l-text">' +
-                "                  <h4>" + res.data[0].userList[i].position + ":" + res.data[0].userList[i].name + "</h4>" +
+                "                  <h4>" +res.data[0].userList[i].position+":"+res.data[0].userList[i].name+"</h4>" +
                 "                </div>" +
                 "                </div>" +
-                "                </span>" +
+                "                </span>"+
                 "<span>" +
                 '                  <div class="d-l-con">' +
                 '                  <div class="d-l-l-text">' +
-                "                  <h4>电话：" + (res.data[0].userList[i].phone ? res.data[0].userList[i].phone : "") + "</h4>" +
+                "                  <h4>电话：" + (res.data[0].userList[i].phone ? res.data[0].userList[i].phone : "")+"</h4>" +
                 "                </div>" +
                 "                </div>" +
                 "                </span>";
@@ -845,13 +831,14 @@ export default {
         }
       });
     },
-    openTvwall() {
+    openTvwall(){
       this.mapshow=false;
       if(this.openZt){
         this.$emit('fatherMethod', this.dianshiqiang, this.longitude, this.latitude, this.userList);
       }else{
         this.$emit(this._click,this._parameter);
       }
+
     },
     /**
      * 地图落点
@@ -859,6 +846,7 @@ export default {
     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
@@ -885,6 +873,9 @@ export default {
     /**
      *鼠标左击事件是原来的气泡
      */
+    /**
+     *鼠标左击事件是原来的气泡
+     */
     createLeftClickDescription() {
       let that = this;
       that.handler.setInputAction(function(movement) {
@@ -892,13 +883,12 @@ export default {
         if (that.pick && that.pick) {
           let id = Cesium.defaultValue(that.viewer.scene.pick(movement.position).id, that.viewer.scene.pick(
             movement.position).primitive.id);
-
           let html = id._description;
           clearInterval(that.timer)
           if (html != undefined && html._value != null && html._value != '' && html != 'cgq') {
             that.bindPopupHtml = html
             that.mapshow = true
-            that.openZt = false
+            that.openZt=false
             that._click = id._click;
             that._parameter = id._parameter;
           } else if (html == 'cgq') {
@@ -938,7 +928,6 @@ export default {
         } else {
           that.clickTime = new Date().getTime()
         }
-        clearInterval(that.timer)
         // 监听鼠标的当前位置坐标，然后根据当前坐标去动态更新气泡窗口div的显示位置；
         that.pick = that.viewer.scene.pick(movement.position);
         if (that.pick && that.pick) {
@@ -949,6 +938,7 @@ export default {
         }
       }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
     },
+
     /**
      * 落点定位
      */
@@ -991,7 +981,6 @@ export default {
         }
       })
     }
-
   },
 }
 </script>