<template>
  <div v-bind:id="mapDivId" ref="map" style="width: 100%; height: 100%;background: none;"></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 {
        mapDivId: '',
        map: null,
        layers: [],
        isAggregationLayers: [],
        radiusLayers: [],
        myGroup: [],
        isAggregationMyGroup: [],
        polygon: null,
        connectLayer: [],
        connectLayerTwo: [],
        graphicsLayer: [],
        latLngLayers: [],
        latLngGroup: [],
        isEditableLayers: false,//绘图控件
        drawControl: null,//绘图控件
        deckglLayer: null//图层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: {},
      isSideBySide: null,
      showLatLng: null,
      showAreaLatLng: null,
      showLineLatLng: null
    },
    methods: {
      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.layers = []
        }

      },
      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
        // 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)
                })
              }
              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)
          }

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

<style scoped>

</style>
