Project_yhfu/src/components/supermap.vue

<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:fit-content;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="6"/>
          </div>
        </div>
        <div class="panel">
          <div class="input-group">
            <span class="input-group-addon">温度</span>
            <input type="text" class="form-control" id="heatNums2" value="10℃"/>
          </div>
        </div>
        <div class="panel">
          <div class="input-group">
            <span class="input-group-addon">湿度</span>
            <input type="text" class="form-control" id="heatNums3" value="6%RH"/>
          </div>
        </div>
        <div class="panel">
          <div class="input-group">
            <span class="input-group-addon">持续时间</span>
            <input type="text" class="form-control" id="heatNums4" value="60分钟"/>
          </div>
        </div>
        <div class="panel">
          <div class="input-group">
            <span class="input-group-addon">植被类型</span>
            <select class="form-control" style="width:auto" id="heatNums5">
              <option value="1">针叶林</option>
              <option value="31">落叶林</option>
            </select>
          </div>
        </div>
        <div class="panel">
          <div class="input-group">
            <span class="input-group-addon">大气压</span>
            <input type="text" class="form-control" id="heatNums6" value="101.325kPa"/>
          </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 {setToken} from '../plugins/auth'
  import modal from '@/plugins/modal'

  export default {
    name: 'sookaSuperMap',
    data() {
      return {
        plottingdrawControl: null,
        plottingLayer: null,
        mapDivId: '',
        map: null,
        layers: [],
        layersBytype: [],
        isAggregationLayers: [],
        radiusLayers: [],
        myGroup: [],
        myGroupBytype: [],
        isAggregationMyGroup: [],
        polygon: null,
        connectLayer: [],
        connectLayerTwo: [],
        graphicsLayer: [],
        latLngLayers: [],
        latLngGroup: [],
        isEditableLayers: false, //绘图控件
        drawControl: null, //绘图控件
        deckglLayer: null, //图层Layer
        deckglLayerList: [], //图层Layer(数组)
        heatMapLayer: [], //火灾蔓延图层Layer
        isheatPlotting: false,//火灾蔓延
        heat_lat: 0, //火灾蔓延经纬度
        heat_lng: 0 //火灾蔓延经纬度
      }
    },
    watch: {
      isEditableLayers: {
        handler(newValue, oldValue) {
          if (newValue) {
            var editableLayers = new window.L.FeatureGroup()
            this.map.addLayer(editableLayers)
            let options = {
              position: 'topleft',
              draw: {
                polyline: {},
                polygon: {},
                circle: {},
                rectangle: {},
                marker: {},
                remove: {}
              },
              edit: {
                featureGroup: editableLayers,
                remove: true
              }
            }
            this.drawControl = new window.L.Control.Draw(options)
            this.map.addControl(this.drawControl)
            this.map.on(window.L.Draw.Event.CREATED, function(e) {
              let editableLayer = e.layer
              let layerType = e.layerType
              editableLayer.on('dblclick', function(e) {
                if (layerType === 'polygon' || layerType === 'rectangle') {
                  let latlng = editableLayer.getLatLngs()[0]
                  //一个自定义的计算面积的函数
                  var seeArea = window.L.GeometryUtil.geodesicArea(latlng)
                  let area = (seeArea / 10e5).toFixed(2) + 'k㎡'
                  modal.msg(area)
                } else if (layerType === 'polyline') {
                  let latlng = editableLayer.getLatLngs()
                  //一个自定义的计算长度的函数
                  let dis = 0
                  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
                    ]) //计算两个点之间的距离，并累加
                  }
                  //结果得到的也是number类型，单位是KM
                  modal.msg((dis / 10e2).toFixed(2) + 'km')
                }
              })
              if (layerType === 'marker') {
                let icon = new window.L.Icon({
                  iconUrl: iconList['marker'],
                  iconSize: [48, 48],
                  iconAnchor: [24, 40],
                  popupAnchor: [-3, -40],
                  shadowSize: [41, 41]
                })
                editableLayer.options.icon = icon
              }
              editableLayers.addLayer(editableLayer)
            })
          } else {
            this.map.removeControl(this.drawControl)
          }
        }
      }
    },
    mounted() {
      this.initMap()
      //添加画图的提示信息
      window.L.drawLocal.draw.toolbar = {
        actions: {
          title: '取消绘图',
          text: '取消'
        },
        finish: {
          title: '完成绘图',
          text: '完成'
        },
        undo: {
          title: '删除最后绘制的点',
          text: '删除最后一个点'
        },
        buttons: {
          polyline: '绘制折线',
          polygon: '绘制多边形',
          rectangle: '绘制矩形',
          circle: '绘制圆圈',
          marker: '绘制标记',
          circlemarker: '绘制圆圈标记'
        }
      }
      window.L.drawLocal.draw.handlers = {
        circle: {
          tooltip: {
            start: '单击并拖动以绘制圆形'
          },
          radius: '半径'
        },
        circlemarker: {
          tooltip: {
            start: '点击地图放置圆圈标记'
          }
        },
        marker: {
          tooltip: {
            start: '点击地图放置标记'
          }
        },
        polygon: {
          tooltip: {
            start: '点击开始绘制形状',
            cont: '点击继续绘制形状',
            end: '单击第一个点以关闭此形状'
          }
        },
        polyline: {
          error: '<strong>Error:</strong> shape edges cannot cross!',
          tooltip: {
            start: '点击开始画线',
            cont: '点击继续画线',
            end: '单击最后一点以完成线'
          }
        },
        rectangle: {
          tooltip: {
            start: '单击并拖动以绘制矩形'
          }
        },
        simpleshape: {
          tooltip: {
            end: '释放鼠标完成绘图'
          }
        }
      }
      window.L.drawLocal.edit = {
        toolbar: {
          actions: {
            save: {
              title: '保存更改',
              text: '保存'
            },
            cancel: {
              title: '取消编辑，放弃所有更改',
              text: '取消'
            },
            clearAll: {
              title: '清除所有图层',
              text: '清除所有'
            }
          },
          buttons: {
            edit: '编辑图层',
            editDisabled: '没有可编辑的图层',
            remove: '删除图层',
            removeDisabled: '没有可删除的图层'
          }
        },
        handlers: {
          edit: {
            tooltip: {
              text: '拖动手柄或标记以编辑要素',
              subtext: '单击取消以撤消更改'
            }
          },
          remove: {
            tooltip: {
              text: '单击要删除的功能'
            }
          }
        }
      }
    },
    props: {
      mapDiv: null,
      codes: null,
      mapSite: {},
      isdynamicPlotting: false,//动态标绘表格
      isSideBySide: false,
      showLatLng: null,
      showAreaLatLng: null,
      showLineLatLng: null
    },
    methods: {
      /** ----------------------------------火势蔓延  开始------------------------------------- */
      // 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(points) {
        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 = points
        // 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()
          }
          this.map.removeLayer(this.isAggregationLayers)
          this.isAggregationLayers = []
          this.radiusLayers = []
          this.isAggregationLayers = window.L.markerClusterGroup({
            //设置为true时显示聚类所占据的范围
            showCoverageOnHover: true,
            //设置为true时会向低一级聚类缩放
            zoomToBoundsOnClick: true,
            //增加点位时增加聚合动画（否则会出问题）
            animateAddingMarkers: true,
            //最大缩放级别点击聚合图标展开图标
            spiderfyOnMaxZoom: true
          })
        } else {
          if (this.myGroup != undefined && this.myGroup != false) {
            this.myGroup.clearLayers()
          }
          this.map.removeLayer(this.layers)
          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) {
          this.connectLayer.clearLayers()
        }
        this.connectLayer = []
      },
      clearCTwo: async function() { //清理地图画线two
        if (this.connectLayerTwo != undefined && this.connectLayerTwo != false) {
          this.connectLayerTwo.clearLayers()
        }
        this.connectLayerTwo = []
      },
      clearG: async function() { //清理地图图形
        if (this.graphicsLayer != undefined && this.graphicsLayer != false) {
          this.graphicsLayer.clearLayers()
        }
        this.graphicsLayer = []
      },
      clearP: async function() { //清理点击事件落点
        if (this.latLngGroup != undefined && this.latLngGroup != false) {
          this.latLngGroup.clearLayers()
        }
        this.latLngLayers = []
      },
      initMap: function() {
        let _that = this
        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时显示聚类所占据的范围
          showCoverageOnHover: true,
          //设置为true时会向低一级聚类缩放
          zoomToBoundsOnClick: true,
          //增加点位时增加聚合动画（否则会出问题）
          animateAddingMarkers: true,
          //最大缩放级别点击聚合图标展开图标
          spiderfyOnMaxZoom: true
        })
        if (!isSideBySide) { //只有一个地图
          if (this.codes.length != 1) {
            modal.msgError('请输入一个地图code！')
            return
          }
          getSuperMap(this.codes).then(resp => {
            let mapList = resp.data
            if (mapList != null && mapList.length > 0) {
              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 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 defaultConfigure = {
                crs: window.L.CRS.EPSG4326,
                center: [centerLat, centerLng],
                maxZoom: maxZoom,
                minZoom: minZoom,
                zoom: zoom,
                editable: true,
                zoomControl: zoomControl,
                attributionControl: attributionControl,
                dragging: dragging,
                logoControl: logoControl
              }
              let loadConfiguration = Object.assign(defaultConfigure, mapSite)
              this.map = window.L.map(this.mapDiv, loadConfiguration)

              //鼠标双击落点
              if (this.showLatLng != undefined) {
                let icon = new window.L.Icon({
                  iconUrl: iconList['marker'],
                  iconSize: [48, 48],
                  iconAnchor: [24, 40],
                  popupAnchor: [-3, -40],
                  shadowSize: [41, 41]
                })

                this.map.on('dblclick', function(e) {
                  _that.clearP()
                  _that.showLatLng(e.latlng.lat, e.latlng.lng)
                  let marker = window.L.marker([e.latlng.lat, e.latlng.lng], {
                    icon: icon
                  }).addTo(this.map)
                  _that.latLngLayers.push(marker)
                  _that.latLngGroup = window.L.layerGroup(_that.latLngLayers)
                  this.map.addLayer(_that.latLngGroup)
                })
              }
              //鼠标绘制区域
              if (this.showAreaLatLng != undefined) {
                var editableLayers = new window.L.FeatureGroup()
                this.map.addLayer(editableLayers)
                let options = {
                  position: 'topleft',
                  draw: {
                    polyline: null,
                    polygon: {},
                    circle: null,
                    rectangle: null,
                    circlemarker: null,
                    marker: null,
                    remove: {}
                  },
                  edit: {
                    featureGroup: editableLayers,
                    remove: true
                  }
                }
                var drawControl = new window.L.Control.Draw(options)
                this.map.addControl(drawControl)
                this.map.on(window.L.Draw.Event.CREATED, function(e) {
                  let editableLayer = e.layer
                  let layerType = e.layerType
                  editableLayer.on('dblclick', function(e) {
                    if (layerType === 'polygon' || layerType ===
                      'rectangle') {
                      let latlng = editableLayer.getLatLngs()[0]
                      _that.showAreaLatLng(latlng)
                    }
                  })
                  editableLayers.addLayer(editableLayer)
                })
              }
              //鼠标绘制线段
              if (this.showLineLatLng != undefined) {
                var editableLayers = new window.L.FeatureGroup()
                this.map.addLayer(editableLayers)
                let options = {
                  position: 'topleft',
                  draw: {
                    polyline: {},
                    polygon: null,
                    circle: null,
                    rectangle: null,
                    circlemarker: null,
                    marker: null,
                    remove: {}
                  },
                  edit: {
                    featureGroup: editableLayers,
                    remove: true
                  }
                }
                var drawControl = new window.L.Control.Draw(options)
                this.map.addControl(drawControl)
                this.map.on(window.L.Draw.Event.CREATED, function(e) {
                  let editableLayer = e.layer
                  let layerType = e.layerType
                  editableLayer.on('dblclick', function(e) {
                    if (layerType === 'polyline') {
                      let latlng = editableLayer.getLatLngs()
                      _that.showLineLatLng(latlng)
                    }
                  })
                  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 { //卷帘地图
          if (this.codes.length != 2) {
            modal.msgError('请输入两个地图code！')
            return
          }
          getSuperMap(this.codes).then(resp => {
            let mapList = resp.data
            if (mapList != null && mapList.length == 2) {
              let stamenurl = mapList[0].url
              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 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 defaultConfigure = {
                crs: window.L.CRS.EPSG4326,
                center: [centerLat, centerLng],
                maxZoom: maxZoom,
                minZoom: minZoom,
                zoom: zoom,
                editable: true,
                zoomControl: zoomControl,
                attributionControl: attributionControl,
                dragging: dragging,
                logoControl: logoControl
              }

              let loadConfiguration = Object.assign(defaultConfigure, mapSite)
              this.map = window.L.map(this.mapDiv, loadConfiguration)
              //鼠标双击落点
              if (this.showLatLng != undefined) {
                let icon = new window.L.Icon({
                  iconUrl: iconList['marker'],
                  iconSize: [48, 48],
                  iconAnchor: [24, 40],
                  popupAnchor: [-3, -40],
                  shadowSize: [41, 41]
                })

                this.map.on('dblclick', function(e) {
                  _that.clearP()
                  _that.showLatLng(e.latlng.lat, e.latlng.lng)
                  let marker = window.L.marker([e.latlng.lat, e.latlng.lng], {
                    icon: icon
                  }).addTo(this.map)
                  _that.latLngLayers.push(marker)
                  _that.latLngGroup = window.L.layerGroup(_that.latLngLayers)
                  this.map.addLayer(_that.latLngGroup)
                })
              }
              //鼠标绘制区域
              if (this.showAreaLatLng != undefined) {
                var editableLayers = new window.L.FeatureGroup()
                this.map.addLayer(editableLayers)
                let options = {
                  position: 'topleft',
                  draw: {
                    polyline: null,
                    polygon: {},
                    circle: null,
                    rectangle: null,
                    circlemarker: null,
                    marker: null,
                    remove: {}
                  },
                  edit: {
                    featureGroup: editableLayers,
                    remove: true
                  }
                }
                var drawControl = new window.L.Control.Draw(options)
                this.map.addControl(drawControl)
                this.map.on(window.L.Draw.Event.CREATED, function(e) {
                  let editableLayer = e.layer
                  let layerType = e.layerType
                  editableLayer.on('dblclick', function(e) {
                    if (layerType === 'polygon' || layerType ===
                      'rectangle') {
                      let latlng = editableLayer.getLatLngs()[0]
                      _that.showAreaLatLng(latlng)
                    }
                  })
                  editableLayers.addLayer(editableLayer)
                })
              }
              //鼠标绘制线段
              if (this.showLineLatLng != undefined) {
                var editableLayers = new window.L.FeatureGroup()
                this.map.addLayer(editableLayers)
                let options = {
                  position: 'topleft',
                  draw: {
                    polyline: {},
                    polygon: null,
                    circle: null,
                    rectangle: null,
                    circlemarker: null,
                    marker: null,
                    remove: {}
                  },
                  edit: {
                    featureGroup: editableLayers,
                    remove: true
                  }
                }
                var drawControl = new window.L.Control.Draw(options)
                this.map.addControl(drawControl)
                this.map.on(window.L.Draw.Event.CREATED, function(e) {
                  let editableLayer = e.layer
                  let layerType = e.layerType
                  editableLayer.on('dblclick', function(e) {
                    if (layerType === 'polyline') {
                      let latlng = editableLayer.getLatLngs()
                      _that.showLineLatLng(latlng)
                    }
                  })
                  editableLayers.addLayer(editableLayer)
                })
              }

              let stamenLayer = window.L.supermap.tiledMapLayer(stamenurl).addTo(this.map)
              let osmLayer = window.L.supermap.tiledMapLayer(osmurl).addTo(this.map)
              L.control.sideBySide(stamenLayer, osmLayer).addTo(this.map)
            }
          })
        }
      },
      // 获取面积
      /**
       * polygon [{lat:30,lng:104},{lat:30,lng:104},{lat:30,lng:104}]
       */
      formatArea: function(polygon) {
        //L.GeometryUtil.geodesicArea(),返回number类型的数据，单位是平方米，这里做了一下转化
        var seeArea = window.L.GeometryUtil.geodesicArea(polygon)
        let area = (seeArea / 10e5).toFixed(2) + 'k㎡'
        return area
      },
      // 获取长度
      /**
       * line[{lat:30,lng:104},{lat:30,lng:104},{lat:30,lng:104}]
       */
      formatLength: function(line) {
        let dis = 0
        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]) //计算两个点之间的距离，并累加
        }
        //结果得到的也是number类型，单位是 米
        return (dis / 10e2).toFixed(2) + 'km'
      },
      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 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)
              })
            }
          }
          if (isAggregation) {
            _that.isAggregationLayers.addLayer(markerClick)
            _that.isAggregationMyGroup = window.L.layerGroup(_that.isAggregationLayers)
          } else {
            _that.layers.push(markerClick)
            _that.myGroup = window.L.layerGroup(_that.layers)
          }
        }
        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
          }).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)
        }
      },
      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 //提示气泡是否一直显示

          _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],
            popupAnchor: [-3, -40],
            shadowSize: [41, 41]
          })
          let marker = 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) {
              marker.bindPopup(html, {
                autoClose: false,
                closeOnClick: null,
                closeButton: false
              }).openPopup(marker.getLatLng())
            } else {
              marker.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 !== '') {
              marker.on('click', function() {
                let clickName = markersList[i].click
                _that.$emit(clickName, markersList[i].parameter)
              })
            } else {
              marker.on('click', function() {
                let clickName = markersList[i].click
                _that.$emit(clickName)
              })
            }
          }
          marker.addTo(this.map)

          if (isAggregation) {
            _that.isAggregationLayers.addLayer(marker)
            _that.radiusLayers.push(_that.polygon)
            this.map.addLayer(_that.isAggregationLayers)
            _that.isAggregationMyGroup = window.L.layerGroup(_that.radiusLayers)
            this.map.addLayer(_that.isAggregationMyGroup)
          } else {
            _that.layers.push(marker)
            _that.layers.push(_that.polygon)
            _that.myGroup = window.L.layerGroup(_that.layers)
            this.map.addLayer(_that.myGroup)
          }
        }
      },
      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]) //创建点
        }
        let polyline = window.L.polyline(points, {
          color: color
        })
        if (this.connectLayer != undefined && this.connectLayer != false) {
          _that.connectLayer.addLayer(polyline)
        } else {
          _that.connectLayer = window.L.featureGroup().addTo(this.map)
          _that.connectLayer.addLayer(polyline)
        }
      },
      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]) //创建点
        }
        let polyline = window.L.polyline(points, {
          color: color
        })
        if (this.connectLayerTwo != undefined && this.connectLayerTwo != false) {
          _that.connectLayerTwo.addLayer(polyline)
        } else {
          _that.connectLayerTwo = window.L.featureGroup().addTo(this.map)
          _that.connectLayerTwo.addLayer(polyline)
        }
      },
      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]) //创建点
        }
        let polygon = window.L.polygon(points, {
          color: color
        })
        polygon.addTo(this.map)
        if (this.graphicsLayer != undefined && this.graphicsLayer != false) {
          _that.graphicsLayer.addLayer(polygon)
        } else {
          _that.graphicsLayer = window.L.featureGroup().addTo(this.map)
          _that.graphicsLayer.addLayer(polygon)
        }
      },
      dropLocation: function(lat, lng) { //落点定位
        this.map.flyTo([lat, lng], 13, { duration: 2 })
      },
      dropLocation10: function(lat, lng) { //落点定位
        this.map.flyTo([lat, lng], 10, { duration: 2 })
      },
      dropLocation5: function(lat, lng) { //落点定位
        this.map.flyTo([lat, lng], 5, { duration: 2 })
      },
      controlLevel: function(level) { //控制地图缩放级别
        this.map.setZoom(level)
      },
      layerSwitching: function(url, isClear) { //图层切换  url 图层地址   isClear  是否清除图层
        if (isClear) {
          if (this.deckglLayer != null) {
            this.deckglLayer.remove()
          }
        }
        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 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;
        width: 3rem;
        text-align: right;

      }
      .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>