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: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 {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() {
      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()
        }
          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
        })
        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], 14, { duration: 2 })

      // this.controlLevel(12)
      // setTimeout(() => {
      //   this.map.panTo([lat, lng])
      // }, 1000)
    },
    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;

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