init

src/components/supermap.vue

@@ -1,20 +1,70 @@
 <template>
-  <div v-bind:id="mapDivId" ref="map" style="width: 100%; height: 100%;background: none;"></div>
-</template>
+  <div v-bind:id="mapDivId" ref="map" style="width: 100%; height: 100%;background: none;">
+    <div id="toolbar" v-if="isdynamicPlotting" class="panel panel-primary"
+         style="position:absolute;z-index: 9999;top:4rem;left: 1rem; border-radius: 4px; width: fit-content;height:635px;overflow-y:scroll;background:#040b1f">
+      <div class="panel-heading" id="panelheading">
+        <h5 style=" color: #2bacf7;font-size: 1rem;padding:.5rem;">鼠标标绘</h5>
+      </div>
+      <div class="panel-body content" id="panelbodycontent" style="margin-bottom: .5rem;padding-right: .5rem;">
+        <div align="right" class="button-group">
+          <el-button type="success" @click="PlottingDrawCancel">取消标绘</el-button>
+          &nbsp;&nbsp;
+          <el-button type="success" @click="clearLayers">清空标绘</el-button>
+        </div>
+      </div>
+      <div id="plottingPanel">
+        <div id="plotPanel" style="width: 15rem;height:50%;overflow-y:scroll;">
+        </div>
+      </div>
+    </div>
 
+    <div id="toolbar-heat" v-if="isheatPlotting" class="panel panel-primary"
+         style="position:absolute;z-index: 9999; padding: 1rem; bottom:3rem;right: 1rem; border-radius: 4px; width: fit-content;height:635px;overflow-y:scroll;background:#040b1f">
+      <div class="panel-body content">
+        <div class="panel">
+          <div class="input-group">
+            <span class="input-group-addon">风向</span>
+            <select class="form-control" style="width:auto" id="heatNums">
+              <option value="1">南风</option>
+              <option value="31">西南风</option>
+              <option value="41">东南风</option>
+              <option value="2">北风</option>
+              <option value="32">西北风</option>
+              <option value="42">东北风</option>
+              <option value="3">西风</option>
+              <option value="4">东风</option>
+            </select>
+          </div>
+        </div>
+        <div class="panel">
+          <div class="input-group">
+            <span class="input-group-addon">风速</span>
+            <input type="text" class="form-control" id="heatNums1" value="20"/>
+          </div>
+        </div>
+        <div class="panel">
+          <el-button type="success" @click="createHeatPoints">标绘</el-button>
+          <el-button type="success" @click="clearHeatPoints">取消标绘</el-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
 <script>
-import 'leaflet-side-by-side'
-import '@supermap/iclient-leaflet'
-import 'leaflet/dist/leaflet.css'
-import 'leaflet.markercluster/dist/leaflet.markercluster-src.js'
-import 'leaflet.markercluster/dist/MarkerCluster.css'
-import 'leaflet.markercluster/dist/MarkerCluster.Default.css'
-import 'leaflet-draw'
-import 'leaflet-draw/dist/leaflet.draw.css'
-
-import L from 'leaflet'
-
-import { getSuperMap, iconList } from '@/api/components/supermap.js'
+// import 'leaflet-side-by-side'
+// import '@supermap/iclient-leaflet'
+// import 'leaflet/dist/leaflet.css'
+// import 'leaflet.markercluster/dist/leaflet.markercluster-src.js'
+// import 'leaflet.markercluster/dist/MarkerCluster.css'
+// import 'leaflet.markercluster/dist/MarkerCluster.Default.css'
+// import 'leaflet-draw'
+// import 'leaflet-draw/dist/leaflet.draw.css'
+// import L from 'leaflet'
+
+import {
+  getSuperMap,
+  iconList
+} from '@/api/components/supermap.js'
 // import {setToken} from '../plugins/auth'
 import modal from '@/plugins/modal'
 
@@ -22,12 +72,16 @@ export default {
   name: 'sookaSuperMap',
   data() {
     return {
+      plottingdrawControl: null,
+      plottingLayer: null,
       mapDivId: '',
       map: null,
       layers: [],
+      layersBytype: [],
       isAggregationLayers: [],
       radiusLayers: [],
       myGroup: [],
+      myGroupBytype: [],
       isAggregationMyGroup: [],
       polygon: null,
       connectLayer: [],
@@ -35,9 +89,14 @@ export default {
       graphicsLayer: [],
       latLngLayers: [],
       latLngGroup: [],
-      isEditableLayers: false,//绘图控件
-      drawControl: null,//绘图控件
-      deckglLayer: null//图层Layer
+      isEditableLayers: false, //绘图控件
+      drawControl: null, //绘图控件
+      deckglLayer: null, //图层Layer
+      deckglLayerList: [], //图层Layer(数组)
+      heatMapLayer: [], //火灾蔓延图层Layer
+      isheatPlotting: false,//火灾蔓延
+      heat_lat: 0, //火灾蔓延经纬度
+      heat_lng: 0 //火灾蔓延经纬度
     }
   },
   watch: {
@@ -80,7 +139,9 @@ export default {
                 for (let i = 0; i < latlng.length - 1; i++) {
                   let start = latlng[i]
                   let end = latlng[i + 1]
-                  dis += window.L.latLng([start.lat, start.lng]).distanceTo([end.lat, end.lng])//计算两个点之间的距离，并累加
+                  dis += window.L.latLng([start.lat, start.lng]).distanceTo([end.lat,
+                    end.lng
+                  ]) //计算两个点之间的距离，并累加
                 }
                 //结果得到的也是number类型，单位是KM
                 modal.msg((dis / 10e2).toFixed(2) + 'km')
@@ -214,13 +275,311 @@ export default {
     mapDiv: null,
     codes: null,
     mapSite: {},
-    isSideBySide: null,
+    isdynamicPlotting: false,//动态标绘表格
+    isSideBySide: false,
     showLatLng: null,
     showAreaLatLng: null,
     showLineLatLng: null
   },
   methods: {
-    clearM: async function(isAggregation) {//清理地图标点
+    /** ----------------------------------火势蔓延  开始------------------------------------- */
+    // initEditView: function() {
+    //   var that = this
+    //   var infoView = window.L.control({ position: 'topright' })
+    //   infoView.onAdd = function() {
+    //     that._div = L.DomUtil.create('div', 'editPane')
+    //     that._div.style.width = '236px'
+    //     that._div.innerHTML = '<div id="toolbar" class="panel panel-primary">' +
+    //       '<div class="panel-heading">' +
+    //       '<h5 class="panel-title text-center">' + resources.text_fastHeatMapLayer + '</h5></div>' +
+    //       '<div class="panel-body content">' +
+    //       '<div class="panel">' +
+    //       '<div class="input-group">' +
+    //       '<span class="input-group-addon">风向</span>' +
+    //       '<select class="form-control" style="width:auto" id="heatNums">' +
+    //       '<option value="1" >南风</option>' +
+    //       '<option value="2" >北风</option>' +
+    //       '<option value="3" >西风</option>' +
+    //       '<option value="4" >东风</option>' +
+    //       '</select>' +
+    //       '</div>' +
+    //       '</div>' +
+    //       '<div class="panel">' +
+    //       '<div class="input-group">' +
+    //       '<span class="input-group-addon">风速</span>' +
+    //       '<input type="text" class="form-control" id="heatNums1" value="20"/>' +
+    //       '</div>' +
+    //       '</div>' +
+    //
+    //       '<input type="button" class="btn btn-default" value="' + resources.btn_startDraw + '" onclick ="'+that.createHeatPoints()+'"/>&nbsp; &nbsp;' +
+    //       '<input type="button" class="btn btn-default" value="' + resources.text_input_value_clear + '" onclick ="'+that.clearHeatPoints()+'"/>' +
+    //       '</div>' +
+    //       '</div>'
+    //     that.handleMapEvent(that._div, that.map)
+    //     return that._div
+    //   }
+    //   infoView.addTo(that.map)
+    // },
+    // handleMapEvent: function(div, map) {
+    //   let that = this
+    //   if (!div || !map) {
+    //     return
+    //   }
+    //   div.addEventListener('mouseover', function() {
+    //     that.map.dragging.disable()
+    //     that.map.scrollWheelZoom.disable()
+    //     that.map.doubleClickZoom.disable()
+    //   })
+    //   div.addEventListener('mouseout', function() {
+    //     that.map.dragging.enable()
+    //     that.map.scrollWheelZoom.enable()
+    //     that.map.doubleClickZoom.enable()
+    //   })
+    // },
+    showheatPlotting: function(heat_lat, heat_lng) {
+      this.heat_lat = heat_lat
+      this.heat_lng = heat_lng
+      this.isheatPlotting = true
+    },
+    createHeatPoints: function() {
+      let that = this
+      that.clearHeatPoints()
+      that.heatMapLayer = new window.L.supermap.heatMapLayer(
+        'heatMap',
+        {
+          'map': that.map,
+          'id': 'heatmap',
+          'radius': 10,
+//            设置图层透明度：（参数方式）
+          'opacity': 0.5,
+          //featureWeight指定以哪个属性值为热力权重值创建热力图：
+          'featureWeight': 'value'
+        }
+      )
+      var heatNums = parseInt($('#heatNums').val())
+      //热力半径单位不使用用地理单位
+      that.heatMapLayer.useGeoUnit = true
+      that.heatMapLayer.radius = 0.01
+
+      var features = []
+
+      switch (heatNums) {
+        case 1://南风
+          features = that.getPointArray1()
+          break
+        case 31://西南风
+          features = that.getPointArray3_1()
+          break
+        case 41://东南风
+          features = that.getPointArray4_1()
+          break
+        case 2://北风
+          features = that.getPointArray2()
+          break
+        case 32://西北风
+          features = that.getPointArray3_2()
+          break
+        case 42://东北风
+          features = that.getPointArray4_2()
+          break
+        case 3://西风
+          features = that.getPointArray3()
+          break
+        case 4://东风
+          features = that.getPointArray4()
+          break
+      }
+
+      //加载heatMapFeature格式数据：
+      that.heatMapLayer.addFeatures(features)
+      that.heatMapLayer.addTo(that.map)
+
+    },
+
+    clearHeatPoints: function() {
+      let that = this
+      if (that.heatMapLayer) {
+        that.map.removeLayer(that.heatMapLayer)
+        that.heatMapLayer = null
+      }
+    },
+
+    getPointArray1: function() {
+      var heatNums1 = parseInt($('#heatNums1').val())
+      var mLon = this.heat_lng, mLat = this.heat_lat
+      var points = []
+      for (var i = 0; i < parseInt(heatNums1 / 3); i++) {
+        mLat = this.accAdd(mLat, 0.005)
+        points[i] = new window.L.supermap.heatMapFeature(L.point(mLon, mLat), {
+          'value': 2000 - (i * Math.random())
+        })
+      }
+      return points
+    },
+    getPointArray3_1: function() {
+      var heatNums1 = parseInt($('#heatNums1').val())
+      var mLon = this.heat_lng, mLat = this.heat_lat
+      var points = []
+      for (var i = 0; i < parseInt(heatNums1 / 3); i++) {
+        mLat = this.accAdd(mLat, 0.005)
+        mLon = this.accAdd(mLon, 0.005)
+        points[i] = new window.L.supermap.heatMapFeature(L.point(mLon, mLat), {
+          'value': 2000 - (i * Math.random())
+        })
+      }
+      return points
+    },
+    getPointArray4_1: function() {
+      var heatNums1 = parseInt($('#heatNums1').val())
+      var mLon = this.heat_lng, mLat = this.heat_lat
+      var points = []
+      for (var i = 0; i < parseInt(heatNums1 / 3); i++) {
+        mLat = this.accAdd(mLat, 0.005)
+        mLon = this.accSub(mLon, 0.005)
+        points[i] = new window.L.supermap.heatMapFeature(L.point(mLon, mLat), {
+          'value': 2000 - (i * Math.random())
+        })
+      }
+      return points
+    },
+    getPointArray2: function() {
+      var heatNums1 = parseInt($('#heatNums1').val())
+      var mLon = this.heat_lng, mLat = this.heat_lat
+      var points = []
+      for (var i = 0; i < parseInt(heatNums1 / 3); i++) {
+        mLat = this.accSub(mLat, 0.005)
+        points[i] = new window.L.supermap.heatMapFeature(L.point(mLon, mLat), {
+          'value': 2000 - (i * Math.random())
+        })
+      }
+      return points
+    },
+    getPointArray3_2: function() {
+      var heatNums1 = parseInt($('#heatNums1').val())
+      var mLon = this.heat_lng, mLat = this.heat_lat
+      var points = []
+      for (var i = 0; i < parseInt(heatNums1 / 3); i++) {
+        mLat = this.accSub(mLat, 0.005)
+        mLon = this.accAdd(mLon, 0.005)
+        points[i] = new window.L.supermap.heatMapFeature(L.point(mLon, mLat), {
+          'value': 2000 - (i * Math.random())
+        })
+      }
+      return points
+    },
+    getPointArray4_2: function() {
+      var heatNums1 = parseInt($('#heatNums1').val())
+      var mLon = this.heat_lng, mLat = this.heat_lat
+      var points = []
+      for (var i = 0; i < parseInt(heatNums1 / 3); i++) {
+        mLat = this.accSub(mLat, 0.005)
+        mLon = this.accSub(mLon, 0.005)
+        points[i] = new window.L.supermap.heatMapFeature(L.point(mLon, mLat), {
+          'value': 2000 - (i * Math.random())
+        })
+      }
+      return points
+    },
+    getPointArray3: function() {
+      var heatNums1 = parseInt($('#heatNums1').val())
+      var mLon = this.heat_lng, mLat = this.heat_lat
+      var points = []
+      for (var i = 0; i < parseInt(heatNums1 / 3); i++) {
+        mLon = this.accAdd(mLon, 0.005)
+        points[i] = new window.L.supermap.heatMapFeature(L.point(mLon, mLat), {
+          'value': 2000 - (i * Math.random())
+        })
+      }
+      return points
+
+    },
+    getPointArray4: function() {
+      var heatNums1 = parseInt($('#heatNums1').val())
+      var mLon = this.heat_lng, mLat = this.heat_lat
+      var points = []
+      for (var i = 0; i < parseInt(heatNums1 / 3); i++) {
+        mLon = this.accSub(mLon, 0.005)
+        points[i] = new window.L.supermap.heatMapFeature(L.point(mLon, mLat), {
+          'value': 2000 - (i * Math.random())
+        })
+      }
+      return points
+
+    },
+    //加法函数，用来得到精确的加法结果
+//说明：javascript的加法结果会有误差，在两个浮点数相加的时候会比较明显。这个函数返回较为精确的加法结果。
+//调用：accAdd(arg1,arg2)
+//返回值：arg1加上arg2的精确结果
+    accAdd: function(arg1, arg2) {
+      var r1, r2, m, c
+      try {
+        r1 = arg1.toString().split('.')[1].length
+      } catch (e) {
+        r1 = 0
+      }
+      try {
+        r2 = arg2.toString().split('.')[1].length
+      } catch (e) {
+        r2 = 0
+      }
+      c = Math.abs(r1 - r2)
+      m = Math.pow(10, Math.max(r1, r2))
+      if (c > 0) {
+        var cm = Math.pow(10, c)
+        if (r1 > r2) {
+          arg1 = Number(arg1.toString().replace('.', ''))
+          arg2 = Number(arg2.toString().replace('.', '')) * cm
+        } else {
+          arg1 = Number(arg1.toString().replace('.', '')) * cm
+          arg2 = Number(arg2.toString().replace('.', ''))
+        }
+      } else {
+        arg1 = Number(arg1.toString().replace('.', ''))
+        arg2 = Number(arg2.toString().replace('.', ''))
+      }
+      return (arg1 + arg2) / m
+    },
+    /**
+     ** 减法函数，用来得到精确的减法结果
+     ** 说明：javascript的减法结果会有误差，在两个浮点数相减的时候会比较明显。这个函数返回较为精确的减法结果。
+     ** 调用：accSub(arg1,arg2)
+     ** 返回值：arg1加上arg2的精确结果
+     **/
+    accSub: function(arg1, arg2) {
+      var r1, r2, m, n
+      try {
+        r1 = arg1.toString().split('.')[1].length
+      } catch (e) {
+        r1 = 0
+      }
+      try {
+        r2 = arg2.toString().split('.')[1].length
+      } catch (e) {
+        r2 = 0
+      }
+      m = Math.pow(10, Math.max(r1, r2)) //last modify by deeka //动态控制精度长度
+      n = r1 >= r2 ? r1 : r2
+      return ((arg1 * m - arg2 * m) / m).toFixed(n)
+    },
+    /** ----------------------------------火势蔓延  结束------------------------------------- */
+    /** ----------------------------------热力图  结束------------------------------------- */
+    loadHeatMap: async function() {
+      var heatNumbers = 150, heatRadius = 30
+      var num = parseInt(heatNumbers)
+      num = (num > 0) ? num : 0
+      var radius = parseInt(heatRadius)
+      radius = (radius > 0) ? radius : 0
+      var heatPoints = []
+      for (var i = 0; i < num; i++) {
+        heatPoints[i] = [Math.random() * 0.28 + 42, Math.random() * 0.5 + 125, Math.random() * 80]
+      }
+      var resultLayer = window.L.heatLayer(heatPoints, {
+        radius: radius,
+        minOpacity: 0.5
+      }).addTo(this.map)
+    },
+    /** ----------------------------------热力图  开始------------------------------------- */
+    clearM: async function(isAggregation) { //清理地图标点
       if (isAggregation) {
         if (this.isAggregationMyGroup != undefined && this.isAggregationMyGroup != false) {
           this.isAggregationMyGroup.clearLayers()
@@ -238,34 +597,50 @@ export default {
           //最大缩放级别点击聚合图标展开图标
           spiderfyOnMaxZoom: true
         })
-
       } else {
         if (this.myGroup != undefined && this.myGroup != false) {
           this.myGroup.clearLayers()
         }
+        this.map.removeLayer(this.layers)
         this.layers = []
       }
-
     },
-    clearC: async function() {//清理地图画线
+    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) {
         this.connectLayer.clearLayers()
       }
       this.connectLayer = []
     },
-    clearCTwo: async function() {//清理地图画线two
+    clearCTwo: async function() { //清理地图画线two
       if (this.connectLayerTwo != undefined && this.connectLayerTwo != false) {
         this.connectLayerTwo.clearLayers()
       }
       this.connectLayerTwo = []
     },
-    clearG: async function() {//清理地图图形
+    clearG: async function() { //清理地图图形
       if (this.graphicsLayer != undefined && this.graphicsLayer != false) {
         this.graphicsLayer.clearLayers()
       }
       this.graphicsLayer = []
     },
-    clearP: async function() {//清理点击事件落点
+    clearP: async function() { //清理点击事件落点
       if (this.latLngGroup != undefined && this.latLngGroup != false) {
         this.latLngGroup.clearLayers()
       }
@@ -276,6 +651,7 @@ export default {
       this.mapDivId = this.mapDiv
       let mapSite = this.mapSite
       let isSideBySide = this.isSideBySide
+      let isdynamicPlotting = this.isdynamicPlotting
       // setToken("eyJhbGciOiJIUzUxMiJ9.eyJ1c2VyX2lkIjoxLCJ1c2VyX2tleSI6ImY5Zjg3ZjVmLWQ4NTctNDQxZC04NmQ5LTg4OWExZWRlODE4ZSIsInVzZXJuYW1lIjoiYWRtaW4ifQ.26mAzmaM9pUza9585aLnRMyRd4GxvrWbCxN0erYsuiBDYQiYnyc-TwXVNDI7Xrpt3Bqmbnul-XMszOxYQi12LA");
       _that.isAggregationLayers = window.L.markerClusterGroup({
         //设置为true时显示聚类所占据的范围
@@ -287,7 +663,7 @@ export default {
         //最大缩放级别点击聚合图标展开图标
         spiderfyOnMaxZoom: true
       })
-      if (!isSideBySide) {  //只有一个地图
+      if (!isSideBySide) { //只有一个地图
         if (this.codes.length != 1) {
           modal.msgError('请输入一个地图code！')
           return
@@ -298,13 +674,17 @@ export default {
             let url = mapList[0].url
             let centerLat = mapList[0].centerLat
             let centerLng = mapList[0].centerLng
-            let zoom = mapList[0].zoom  //默认比例
-            let maxZoom = mapList[0].maxZoom  //最大比例
+            let zoom = mapList[0].zoom //默认比例
+            let maxZoom = mapList[0].maxZoom //最大比例
             let minZoom = mapList[0].minZoom //最小比例
-            let zoomControl = mapList[0].zoomControl == null ? true : mapList[0].zoomControl  //地图缩放+-号是否显示
-            let attributionControl = mapList[0].attributionControl == null ? true : mapList[0].attributionControl //logo是否显示
-            let logoControl = mapList[0].logoControl == null ? false : mapList[0].logoControl //logo是否显示
-            let dragging = mapList[0].dragging == null ? true : mapList[0].dragging //地图是否允许鼠标拖拽
+            let zoomControl = mapList[0].zoomControl == null ? true : mapList[0]
+              .zoomControl //地图缩放+-号是否显示
+            let attributionControl = mapList[0].attributionControl == null ? true : mapList[0]
+              .attributionControl //logo是否显示
+            let logoControl = mapList[0].logoControl == null ? false : mapList[0]
+              .logoControl //logo是否显示
+            let dragging = mapList[0].dragging == null ? true : mapList[0]
+              .dragging //地图是否允许鼠标拖拽
 
             let defaultConfigure = {
               crs: window.L.CRS.EPSG4326,
@@ -320,6 +700,7 @@ export default {
             }
             let loadConfiguration = Object.assign(defaultConfigure, mapSite)
             this.map = window.L.map(this.mapDiv, loadConfiguration)
+
             //鼠标双击落点
             if (this.showLatLng != undefined) {
               let icon = new window.L.Icon({
@@ -367,7 +748,8 @@ export default {
                 let editableLayer = e.layer
                 let layerType = e.layerType
                 editableLayer.on('dblclick', function(e) {
-                  if (layerType === 'polygon' || layerType === 'rectangle') {
+                  if (layerType === 'polygon' || layerType ===
+                    'rectangle') {
                     let latlng = editableLayer.getLatLngs()[0]
                     _that.showAreaLatLng(latlng)
                   }
@@ -409,10 +791,12 @@ export default {
                 editableLayers.addLayer(editableLayer)
               })
             }
+            // url = 'https://iserver.supermap.io/iserver/services/map-china400/rest/maps/China_4326'
+
             window.L.supermap.tiledMapLayer(url).addTo(this.map)
           }
         })
-      } else {  //卷帘地图
+      } else { //卷帘地图
         if (this.codes.length != 2) {
           modal.msgError('请输入两个地图code！')
           return
@@ -424,13 +808,17 @@ export default {
             let osmurl = mapList[1].url
             let centerLat = mapList[0].centerLat
             let centerLng = mapList[0].centerLng
-            let zoom = mapList[0].zoom  //默认比例
-            let maxZoom = mapList[0].maxZoom  //最大比例
+            let zoom = mapList[0].zoom //默认比例
+            let maxZoom = mapList[0].maxZoom //最大比例
             let minZoom = mapList[0].minZoom //最小比例
-            let zoomControl = mapList[0].zoomControl == null ? true : mapList[0].zoomControl  //地图缩放+-号是否显示
-            let attributionControl = mapList[0].attributionControl == null ? true : mapList[0].attributionControl //logo是否显示
-            let logoControl = mapList[0].logoControl == null ? false : mapList[0].logoControl //logo是否显示
-            let dragging = mapList[0].dragging == null ? true : mapList[0].dragging //地图是否允许鼠标拖拽
+            let zoomControl = mapList[0].zoomControl == null ? true : mapList[0]
+              .zoomControl //地图缩放+-号是否显示
+            let attributionControl = mapList[0].attributionControl == null ? true : mapList[0]
+              .attributionControl //logo是否显示
+            let logoControl = mapList[0].logoControl == null ? false : mapList[0]
+              .logoControl //logo是否显示
+            let dragging = mapList[0].dragging == null ? true : mapList[0]
+              .dragging //地图是否允许鼠标拖拽
 
             let defaultConfigure = {
               crs: window.L.CRS.EPSG4326,
@@ -494,7 +882,8 @@ export default {
                 let editableLayer = e.layer
                 let layerType = e.layerType
                 editableLayer.on('dblclick', function(e) {
-                  if (layerType === 'polygon' || layerType === 'rectangle') {
+                  if (layerType === 'polygon' || layerType ===
+                    'rectangle') {
                     let latlng = editableLayer.getLatLngs()[0]
                     _that.showAreaLatLng(latlng)
                   }
@@ -563,16 +952,17 @@ export default {
       for (let i = 0; i < line.length - 1; i++) {
         let start = line[i]
         let end = line[i + 1]
-        dis += window.L.latLng([start.lat, start.lng]).distanceTo([end.lat, end.lng])//计算两个点之间的距离，并累加
+        dis += window.L.latLng([start.lat, start.lng]).distanceTo([end.lat, end.lng]) //计算两个点之间的距离，并累加
       }
       //结果得到的也是number类型，单位是 米
       return (dis / 10e2).toFixed(2) + 'km'
     },
-    setMarkers: function(markersList) {//地图标点
+    setMarkers: function(markersList) { //地图标点
       const _that = this
       for (let i = 0; i < markersList.length; i++) {
-        let isAggregation = markersList[i].isAggregation == null ? false : markersList[i].isAggregation  //是否聚合点位
-        let keepBindPopup = isAggregation == true ? false : markersList[i].keepBindPopup  //提示气泡是否一直显示
+        let isAggregation = markersList[i].isAggregation == null ? false : markersList[i]
+          .isAggregation //是否聚合点位
+        let keepBindPopup = isAggregation == true ? false : markersList[i].keepBindPopup //提示气泡是否一直显示
 
         let icon = new window.L.Icon({
           iconUrl: iconList[markersList[i].icon],
@@ -583,7 +973,7 @@ export default {
         })
         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) {
@@ -617,23 +1007,81 @@ export default {
         if (isAggregation) {
           _that.isAggregationLayers.addLayer(markerClick)
           _that.isAggregationMyGroup = window.L.layerGroup(_that.isAggregationLayers)
-          this.map.addLayer(_that.isAggregationLayers)
         } else {
           _that.layers.push(markerClick)
           _that.myGroup = window.L.layerGroup(_that.layers)
-          this.map.addLayer(_that.myGroup)
         }
+      }
+      if (_that.myGroup != undefined && _that.myGroup != false) {
+        _that.map.addLayer(_that.myGroup)
+      }
+      _that.map.addLayer(_that.isAggregationLayers)
+    },
+    setMarkersByType: function(markersList, type) { //地图标点(根据类型,可取消落点 clearMByType方法)
+      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
+        })
+        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)
       }
     },
-    setMarkersRadius: function(markersList) {//地图标点带范围
+    setMarkersRadius: function(markersList) { //地图标点带范围
       const _that = this
       for (let i = 0; i < markersList.length; i++) {
-        let isAggregation = markersList[i].isAggregation == null ? false : markersList[i].isAggregation  //是否聚合点位
-        let keepBindPopup = isAggregation == true ? false : markersList[i].keepBindPopup  //提示气泡是否一直显示
+        let isAggregation = markersList[i].isAggregation == null ? false : markersList[i]
+          .isAggregation //是否聚合点位
+        let keepBindPopup = isAggregation == true ? false : markersList[i].keepBindPopup //提示气泡是否一直显示
 
-        _that.polygon = window.L.circle([markersList[i].lat, markersList[i].lng], { radius: markersList[i].radius * 1000 })
-        let icon = new window.L.Icon({//传感器
+        _that.polygon = window.L.circle([markersList[i].lat, markersList[i].lng], {
+          radius: markersList[i].radius
+        })
+        let icon = new window.L.Icon({ //传感器
           iconUrl: iconList[markersList[i].icon],
           iconSize: [48, 48],
           iconAnchor: [24, 40],
@@ -689,13 +1137,15 @@ export default {
         }
       }
     },
-    setConnectList: function(connectList, color) {//地图画线
+    setConnectList: function(connectList, color) { //地图画线
       const _that = this
       let points = []
       for (let i = 0; i < connectList.length; i++) {
-        points.push([connectList[i].lat, connectList[i].lng])//创建点
+        points.push([connectList[i].lat, connectList[i].lng]) //创建点
       }
-      let polyline = window.L.polyline(points, { color: color })
+      let polyline = window.L.polyline(points, {
+        color: color
+      })
       if (this.connectLayer != undefined && this.connectLayer != false) {
         _that.connectLayer.addLayer(polyline)
       } else {
@@ -703,13 +1153,15 @@ export default {
         _that.connectLayer.addLayer(polyline)
       }
     },
-    setConnectTwoList: function(connectList, color) {//地图画线图层2
+    setConnectTwoList: function(connectList, color) { //地图画线图层2
       const _that = this
       let points = []
       for (let i = 0; i < connectList.length; i++) {
-        points.push([connectList[i].lat, connectList[i].lng])//创建点
+        points.push([connectList[i].lat, connectList[i].lng]) //创建点
       }
-      let polyline = window.L.polyline(points, { color: color })
+      let polyline = window.L.polyline(points, {
+        color: color
+      })
       if (this.connectLayerTwo != undefined && this.connectLayerTwo != false) {
         _that.connectLayerTwo.addLayer(polyline)
       } else {
@@ -717,13 +1169,15 @@ export default {
         _that.connectLayerTwo.addLayer(polyline)
       }
     },
-    setGraphicsList: function(graphicsList, color) {//地图图形
+    setGraphicsList: function(graphicsList, color) { //地图图形
       const _that = this
       let points = []
       for (let i = 0; i < graphicsList.length; i++) {
-        points.push([graphicsList[i].lat, graphicsList[i].lng])//创建点
+        points.push([graphicsList[i].lat, graphicsList[i].lng]) //创建点
       }
-      let polygon = window.L.polygon(points, { color: color })
+      let polygon = window.L.polygon(points, {
+        color: color
+      })
       polygon.addTo(this.map)
       if (this.graphicsLayer != undefined && this.graphicsLayer != false) {
         _that.graphicsLayer.addLayer(polygon)
@@ -732,16 +1186,19 @@ export default {
         _that.graphicsLayer.addLayer(polygon)
       }
     },
-    dropLocation: function(lat, lng) {//落点定位
-      this.controlLevel(10)
-      setTimeout(() => {
-        this.map.panTo([lat, lng])
-      }, 500)
+    dropLocation: function(lat, lng) { //落点定位
+
+      this.map.flyTo([lat, lng], 14, { duration: 2 })
+
+      // this.controlLevel(12)
+      // setTimeout(() => {
+      //   this.map.panTo([lat, lng])
+      // }, 1000)
     },
-    controlLevel: function(level) {//控制地图缩放级别
+    controlLevel: function(level) { //控制地图缩放级别
       this.map.setZoom(level)
     },
-    layerSwitching: function(url, isClear) {//图层切换  url 图层地址   isClear  是否清除图层
+    layerSwitching: function(url, isClear) { //图层切换  url 图层地址   isClear  是否清除图层
       if (isClear) {
         if (this.deckglLayer != null) {
           this.deckglLayer.remove()
@@ -749,11 +1206,95 @@ export default {
       }
       this.deckglLayer = window.L.supermap.tiledMapLayer(url, {})
       this.map.addLayer(this.deckglLayer)
+    },
+    layerSwitchingList: function(urlList) { //图层切换数组  urlList 图层地址(数组)
+      if (this.deckglLayerList != null && this.deckglLayerList.length > 0) {
+        for (let i = 0; i < this.deckglLayerList.length; i++) {
+          this.deckglLayerList[i].remove()
+        }
+      }
+      if (urlList != null && urlList.length > 0) {
+        for (let i = 0; i < urlList.length; i++) {
+          this.deckglLayer = window.L.supermap.tiledMapLayer(urlList[i], {})
+          this.deckglLayerList.push(this.deckglLayer)
+          this.map.addLayer(this.deckglLayer)
+        }
+      }
+    },
+    /** ----------------------------------动态绘制开始------------------------------------- */
+    clearLayers: function() {
+      this.plottingLayer.removeAllFeatures()
+    },
+    PlottingDrawCancel: function() {
+      this.plottingdrawControl.handler.disable()
+    },
+    dynamicPlotting: function() {
+      setTimeout(() => {
+        var host = 'https://iserver.supermap.io'
+        var serverUrl = host + '/iserver/services/plot-jingyong/rest/plot/'
+
+        var me = this
+        this.plottingLayer = window.L.supermap.plotting.plottingLayer('plot',
+          serverUrl)
+        this.plottingLayer.spatialAnalystUrl =
+          host + '/iserver/services/spatialanalyst-sample/restjsr/spatialanalyst'
+        this.plottingLayer.addTo(this.map)
+        this.plottingdrawControl = window.L.supermap.plotting.drawControl(this
+          .plottingLayer)
+        this.plottingdrawControl.addTo(this.map)
+        var editControl = window.L.supermap.plotting.editControl()
+        editControl.addTo(this.map)
+        window.L.supermap.plotting.initPlotPanel('plotPanel', serverUrl, this
+          .plottingdrawControl)
+      }, 2000)
     }
+    /** ----------------------------------动态绘制结束------------------------------------- */
   }
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+@import '@/assets/styles/base.scss';
+.panel{
+  margin-bottom: .5rem;
+  button{
+    margin-top: .5rem;
+  }
+  .input-group{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    .input-group-addon{
+      color: $inBlue;
+
+    }
+    .form-control{
+      padding: 0 .3rem;
+      margin-left: .5rem;
+      height: 1.5rem;
+      line-height: 1.5rem;
+      background-color: #112543;
+      color: $inBlue;
+      border: 1px $searchBorder;
+    }
+  }
+}
+
+.button-group {
+  button {
+    padding: 0 0.3rem;
+    height: 1.5rem;
+    background-color: #112543;
+    color: #2bacf7;
+    border: 1px solid #33467f;
+  }
+
+  button:hover {
+    border: 1px solid #33467f;
+    background-color: #112543;
+    text-shadow: 0 0 15px rgba($color: $inBlueHover, $alpha: 1.0);
+  }
+}
+
 
 </style>