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:55vh;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>
</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(数组)
    }
  },
  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: {
    clearM: async function(isAggregation) { //清理地图标点
      if (isAggregation) {
        if (this.isAggregationMyGroup != undefined && this.isAggregationMyGroup != false) {
          this.isAggregationMyGroup.clearLayers()
        }
        if (this.isAggregationLayers != null && this.isAggregationLayers.length > 0) {
          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.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
        }).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)
            })
          }
        }
        if (isAggregation) {
          _that.isAggregationLayers.addLayer(markerClick)
          _that.isAggregationMyGroup = window.L.layerGroup(_that.isAggregationLayers)
          this.map.addLayer(_that.isAggregationLayers)
        } else {
          _that.layers.push(markerClick)
          _that.myGroup = window.L.layerGroup(_that.layers)
          this.map.addLayer(_that.myGroup)
        }

      }
    },
    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], 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';

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