yj_vue3/src/components/supermap.vue

<template>
  <div v-bind:id="mapDivId" ref="map" style="width: 100%; height: 100%;background: none;">
  </div>
</template>
<script>

import {
  iconList
} from '@/api/components/supermap.js'

export default {
  name: 'sookaSuperMap',
  data() {
    return {
      windDirection:'',
      windSpeed:null,
      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, //火灾蔓延经纬度
      aac:null,
      host:'http://121.36.228.94:8090'
    }
  },
  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, 58],
                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()
  },
  props: {
    mapDiv: null,
    codes: null,
    mapSite: {},
    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,windSpeed,windDirection) {
      console.log(heat_lat, heat_lng,windSpeed,windDirection)
      this.heat_lat = heat_lat
      this.heat_lng = heat_lng
      this.windDirection = windDirection
      this.windSpeed = windSpeed
      this.createHeatPoints()
    },
    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 (that.windDirection) {
        case '南风'://南风
          features = that.getPointArray1()
          break
        case '西南风'://西南风
          features = that.getPointArray3_1()
          break
        case '东南风'://东南风
          features = that.getPointArray4_1()
          break
        case '北风'://北风
          features = that.getPointArray2()
          break
        case '西北风'://西北风
          features = that.getPointArray3_2()
          break
        case '东北风'://东北风
          features = that.getPointArray4_2()
          break
        case '西风'://西风
          features = that.getPointArray3()
          break
        case '东风'://东风
          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 = this.windSpeed
      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 = this.windSpeed
      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 = this.windSpeed
      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 = this.windSpeed
      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 = this.windSpeed
      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 = this.windSpeed
      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 = this.windSpeed
      console.log(heatNums1)

      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 = this.windSpeed
      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 (_that.codes.length != 1) {
          // modal.msgError('请输入一个地图code！')
          return
        }
        // getSuperMap(this.codes).then(resp => {

          const mapList = [
            {
              "url": "http://116.142.80.12:8090/iserver/services/map-JiLin/rest/maps/JiLin",
              "centerLng": "129.438218",
              "centerLat": "42.912081",
              "zoom": 13,
              "maxZoom": 16,
              "minZoom": 1,
              "zoomControl": 0,
              "attributionControl": 0
            }
          ]

          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
            }
            setTimeout(() => {
              let loadConfiguration = Object.assign(defaultConfigure, mapSite)
              _that.map = window.L.map(_that.mapDiv, loadConfiguration)

              window.L.supermap.tiledMapLayer(url).addTo(_that.map)
            },1000)

          }
        // })
      } else { //卷帘地图
        if (this.codes.length != 2) {
          // modal.msgError('请输入两个地图code！')
          return
        }
        // getSuperMap(this.codes).then(resp => {
          let mapList = ""
          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, 58],
                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, 58],
          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)
    },
    setMarkersA: 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, 58],
          iconAnchor: [24, 40],
          popupAnchor: [-3, -40],
          shadowSize: [41, 41]
        })
        let markerClick = window.L.marker([markersList[i].lat, markersList[i].lng], {
          icon: icon
        })

        markerClick.on('mouseover', function() {
          let a = "";
          _that.aac = setInterval(function (){
            var color = "green";
            var value = Math.random();
            var up = "▲";
            var down = "▼";
            if(value>0.5){
              color = "red";
              value = value +""+ up;
            }else{
              value = value +""+ down;
            }
            a = "<span style='color:"+color+"'>当前传感器数值:"+value+"</span>";
            markerClick.bindPopup(a).openPopup(markerClick.getLatLng());
            console.log(this);
          },500);
        }).on('mouseout', function() {
          clearInterval(_that.aac);
          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: [65, 58],
          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, 58],
          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 })
    },
    dropLocation: function(lat, lng,leve) { //落点定位
      this.map.flyTo([lat, lng], leve, {
        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()
    },
    // getspuerMapHost(){
    //   selectConfigKey('superMap.iserver.plot').then(res => {
    //     this.host = res.data;
    //   })
    // },
    dynamicPlotting: function() {
      setTimeout(() => {
        var host = this.host
        // var serverUrl = host + '/iserver/services/plot-jingyong/rest/plot/'
        var serverUrl = host  +"/iserver/services/map-JiLin/rest/maps/JiLin";
//http://121.36.228.94:8090/iserver/services/map-JiLin/rest/maps

        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/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>