事件详情落点，可隐藏

src/components/supermap.vue

@@ -46,9 +46,11 @@ export default {
       mapDivId: '',
       map: null,
       layers: [],
+      layersBytype: [],
       isAggregationLayers: [],
       radiusLayers: [],
       myGroup: [],
+      myGroupBytype: [],
       isAggregationMyGroup: [],
       polygon: null,
       connectLayer: [],
@@ -271,7 +273,23 @@ export default {
         }
         this.layers = []
       }
-
+    },
+    clearMByType: async function(type) { //清理地图标点(根据类型,可取消落点)
+      if (this.myGroupBytype != undefined && this.myGroupBytype != false) {
+        for (var i = this.myGroupBytype.length - 1; i >= 0; i--) {
+          if(this.myGroupBytype[i].type==type){
+            this.myGroupBytype[i].myGroup.clearLayers()
+            this.myGroupBytype.splice(i,1)
+          }
+        }
+      }
+      if(this.layersBytype!=null&&this.layersBytype.length>0){
+        for (var i = this.layersBytype.length - 1; i >= 0; i--) {
+          if(this.layersBytype[i].type==type){
+            this.layersBytype.splice(i,1)
+          }
+        }
+      }
     },
     clearC: async function() { //清理地图画线
       if (this.connectLayer != undefined && this.connectLayer != false) {
@@ -667,6 +685,62 @@ export default {
 
       }
     },
+    setMarkersByType: function(markersList, type) { //地图标点
+      const _that = this
+      let lay = []
+      let myGroup = []
+      for (let i = 0; i < markersList.length; i++) {
+        let keepBindPopup = markersList[i].keepBindPopup //提示气泡是否一直显示
+
+        let icon = new window.L.Icon({
+          iconUrl: iconList[markersList[i].icon],
+          iconSize: [48, 48],
+          iconAnchor: [24, 40],
+          popupAnchor: [-3, -40],
+          shadowSize: [41, 41]
+        })
+        let markerClick = window.L.marker([markersList[i].lat, markersList[i].lng], {
+          icon: icon
+        }).addTo(this.map)
+        if (markersList[i].bindPopupHtml != null && markersList[i].bindPopupHtml !== '') {
+          let html = markersList[i].bindPopupHtml
+          if (keepBindPopup) {
+            markerClick.bindPopup(html, {
+              autoClose: false,
+              closeOnClick: null,
+              closeButton: false
+            }).openPopup(markerClick.getLatLng())
+          } else {
+            markerClick.on('mouseover', function() {
+              let html = markersList[i].bindPopupHtml
+              this.bindPopup(html).openPopup(this.getLatLng())
+            }).on('mouseout', function() {
+              this.closePopup()
+            })
+          }
+        }
+        if (markersList[i].click != null && markersList[i].click !== '') {
+          if (markersList[i].parameter != null && markersList[i].parameter !== '') {
+            markerClick.on('click', function() {
+              let clickName = markersList[i].click
+              _that.$emit(clickName, markersList[i].parameter)
+            })
+          } else {
+            markerClick.on('click', function() {
+              let clickName = markersList[i].click
+              _that.$emit(clickName)
+            })
+          }
+        }
+        lay.push(markerClick)
+        _that.layersBytype.push({ type: type, marker: markerClick })
+        myGroup = window.L.layerGroup(lay)
+        _that.myGroupBytype.push({ type: type, myGroup: myGroup })
+        this.map.addLayer(myGroup)
+      }
+      console.log(_that.layersBytype)
+      console.log(_that.myGroupBytype)
+    },
     setMarkersRadius: function(markersList) { //地图标点带范围
       const _that = this
       for (let i = 0; i < markersList.length; i++) {

src/views/eventdetailsdialog.vue

@@ -979,7 +979,7 @@ export default {
       eventLogList: [],
       visuForestCloudYuAnBo: null,
       eventDialog: false,
-      radius: 1,//资源搜索半径
+      radius: 5000,//资源搜索半径
       resourcesList: [
         {
           resourceName: '取水口',
@@ -1029,6 +1029,7 @@ export default {
           icon: 'camera'
         }
       ],
+      resourcesListCheck:[],
       //文本域
       feedback: ''
 
@@ -1060,60 +1061,68 @@ export default {
       })
     },
     listResourceByWz(type) {
-      //搜索物资
-      let param = { longitude: this.longitude, latitude: this.latitude, type: type, radius: this.radius }
-      listResourceByWz(param).then(res => {
-        if (res.data != null && res.data.length > 0) {
-          var markersList = []
-          for (let i = 0; i < res.data.length; i++) {
-            let markersMap = {
-              lng: 124.59,
-              lat: 43.02,
-              icon: 'marker',
-              bindPopupHtml: '',
-              click: '',
-              parameter: '',
-              keepBindPopup: false,
-              isAggregation: false
+      if(this.resourcesListCheck.indexOf(type)>-1){
+        this.resourcesListCheck.splice(this.resourcesListCheck.indexOf(type),1)
+        setTimeout(() => {
+          this.$refs.supermapDialog.clearMByType(type)
+        }, 1000)
+      }else{
+        this.resourcesListCheck.push(type)
+        //搜索物资
+        let param = { longitude: this.longitude, latitude: this.latitude, type: type, radius: this.radius }
+        listResourceByWz(param).then(res => {
+          if (res.data != null && res.data.length > 0) {
+            var markersList = []
+            for (let i = 0; i < res.data.length; i++) {
+              let markersMap = {
+                lng: 124.59,
+                lat: 43.02,
+                icon: 'marker',
+                bindPopupHtml: '',
+                click: '',
+                parameter: '',
+                keepBindPopup: false,
+                isAggregation: false
+              }
+              if (res.data.length > 50) {
+                markersMap.isAggregation = true
+              }
+              if (type == 'qsk') {
+                markersMap.icon = 'sj-icon-waterintake'
+              } else if (type == 'sh') {
+                markersMap.icon = 'sj-icon-watercrane'
+              } else if (type == 'xfs') {
+                markersMap.icon = 'sj-icon-firehydrant'
+              } else if (type == 'qjd') {
+                markersMap.icon = 'sj-icon-landing'
+              } else if (type == 'jcz') {
+                markersMap.icon = 'sj-icon-checkpoint'
+              } else if (type == 'fhd') {
+                markersMap.icon = 'sj-icon-fireteam'
+              } else if (type == 'zdqy') {
+                markersMap.icon = 'sj-icon-tcqh'
+              } else if (type == 'sxt') {
+                markersMap.icon = 'sj-icon-jkzx'
+              }
+              markersMap.lng = res.data[i].longitude
+              markersMap.lat = res.data[i].latitude
+              markersMap.bindPopupHtml = '<div class="map-tip">' +
+                '<span>' +
+                '                  <div class="d-l-con">' +
+                '                  <div class="d-l-l-text">' +
+                '                  <h4>资源名称：' + res.data[i].name + '</h4>' +
+                '                </div>' +
+                '                </div>' +
+                '                </span>' +
+                '</div>'
+              markersList.push(markersMap)
             }
-            if (res.data.length > 50) {
-              markersMap.isAggregation = true
-            }
-            if (type == 'qsk') {
-              markersMap.icon = 'sj-icon-waterintake'
-            } else if (type == 'sh') {
-              markersMap.icon = 'sj-icon-watercrane'
-            } else if (type == 'xfs') {
-              markersMap.icon = 'sj-icon-firehydrant'
-            } else if (type == 'qjd') {
-              markersMap.icon = 'sj-icon-landing'
-            } else if (type == 'jcz') {
-              markersMap.icon = 'sj-icon-checkpoint'
-            } else if (type == 'fhd') {
-              markersMap.icon = 'sj-icon-fireteam'
-            } else if (type == 'zdqy') {
-              markersMap.icon = 'sj-icon-tcqh'
-            } else if (type == 'sxt') {
-              markersMap.icon = 'sj-icon-jkzx'
-            }
-            markersMap.lng = res.data[i].longitude
-            markersMap.lat = res.data[i].latitude
-            markersMap.bindPopupHtml = '<div class="map-tip">' +
-              '<span>' +
-              '                  <div class="d-l-con">' +
-              '                  <div class="d-l-l-text">' +
-              '                  <h4>资源名称：' + res.data[i].name + '</h4>' +
-              '                </div>' +
-              '                </div>' +
-              '                </span>' +
-              '</div>'
-            markersList.push(markersMap)
+            setTimeout(() => {
+              this.$refs.supermapDialog.setMarkersByType(markersList,type)
+            }, 1000)
           }
-          setTimeout(() => {
-            this.$refs.supermapDialog.setMarkers(markersList)
-          }, 1000)
-        }
-      })
+        })
+      }
     },
     // 返回图片列表
     assetTypeAnImage(filePath) {
@@ -1173,6 +1182,7 @@ export default {
       this.deptOptionsLiandong = []//联动部门
       this.eventStatusButton = null//流程按钮标识
       this.eventConfirmTitle = null//流程按钮标识
+      this.resourcesListCheck=[]
     },
     cancelEventConfirm_send() {
       //清空表单数据