<template>
  <div class="mapCom">
    <div id="map"></div>
  </div>
</template>
<script>
import { CanvasLabel } from '@panzhiyue/leaflet-canvaslabel'
import img from '@/assets/mapdarw/images/marker-icon.png'

// import '@/assets/mapdarw/Leaflet.draw'
// import '@/assets/mapdarw/leaflet.draw.css'
// import '@/assets/mapdarw/leaflet.pin.css'
// import '@/assets/mapdarw/leaflet.pin.js'

export default {
  data() {
    return {
      map: null,
      img: img,
      layers: [],
      tilsUrl: './static/kMapTiles/{z}/{x}/{y}.jpg'
    }
  },
  mounted() {
    this.initMap()
  },
  methods: {
    initMap() {
      let map = L.map('map', {
        center: [40.02404009136253, 116.50641060224784], // 地图中心--北京
        zoom: 16, //缩放比列
        // drawControl: true
        zoomControl: false, //禁用 + - 按钮
        // doubleClickZoom: true, // 禁用双击放大
        attributionControl: false // 移除右下角leaflet标识
        // preferCanvas: true
      })
      let name = L.tileLayer(
        'http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}'
      ).addTo(map)

      var editableLayers = new L.FeatureGroup()
      map.addLayer(editableLayers)

      var MyCustomMarker = L.Icon.extend({
        options: {
          shadowUrl: null,
          iconAnchor: new L.Point(12, 12),
          iconSize: new L.Point(24, 36),
          iconUrl: this.img
        }
      })

      var options = {
        position: 'topleft',
        draw: {
          polyline: {
            shapeOptions: {
              color: '#f357a1',
              weight: 10
            }
          },
          polygon: {
            allowIntersection: false, // Restricts shapes to simple polygons
            drawError: {
              color: '#e1e100', // Color the shape will turn when intersects
              message: "<strong>Oh snap!<strong> you can't draw that!" // Message that will show when intersect
            },
            shapeOptions: {
              color: '#bada55'
            }
          },
          // circle: false, // Turns off this drawing tool
          rectangle: false,
          // rectangle: {
          //   shapeOptions: {
          //     clickable: false
          //   }
          // },
          marker: {
            icon: new MyCustomMarker()
          }
        },
        edit: {
          featureGroup: editableLayers, //REQUIRED!!
          remove: true
        }
      }

      this.initDrawTooltip()

      var drawControl = new L.Control.Draw(options)
      map.addControl(drawControl)

      // CREATED
      map.on(L.Draw.Event.CREATED, function (e) {
        let type = e.layerType,
          layer = e.layer
        console.log('CREATED======>>>>', e)

        if (type === 'marker') {
          layer.bindPopup('A popup!')
        }

        editableLayers.addLayer(layer)
      })
      map.on(L.Draw.Event.DRAESTOP, function (e) {
        console.log('DRAESTOP======>>>>', e)
      })
    },
    initDrawTooltip() {
      L.drawLocal.draw.handlers.polygon = {
        tooltip: {
          start: '点击地图开始绘制多边形',
          cont: '继续选择',
          end: '点击第一个顶点完成绘制'
        }
      }
      L.drawLocal.draw.toolbar.buttons.polyline = '绘制-线'
      L.drawLocal.draw.toolbar.buttons.polygon = '绘制-多边形区域'
      L.drawLocal.draw.toolbar.buttons.circle = '绘制-圆形区域'
      L.drawLocal.draw.toolbar.buttons.marker = '绘制-定点标记'
      L.drawLocal.draw.toolbar.buttons.circlemarker = '绘制-定点圆形标记'
      L.drawLocal.edit.toolbar.actions.save.text = '保存'
      L.drawLocal.edit.toolbar.actions.save.title = '保存'
      L.drawLocal.edit.toolbar.actions.cancel.text = '取消'
      L.drawLocal.edit.toolbar.actions.cancel.title = '取消'
      L.drawLocal.edit.toolbar.actions.clearAll.text = '清除全部'
      L.drawLocal.edit.toolbar.actions.clearAll.title = '清除全部'
      L.drawLocal.edit.toolbar.buttons.editDisabled = '暂无区域可编辑'
      L.drawLocal.edit.toolbar.buttons.removeDisabled = '暂无区域可删除'
      L.drawLocal.edit.handlers.remove.tooltip.text = '选中一个区域去清除'
      L.drawLocal.edit.toolbar.buttons.edit = '编辑'
      L.drawLocal.edit.toolbar.buttons.remove = '删除'
      L.drawLocal.edit.toolbar.buttons.cancel = '取消'
      L.drawLocal.edit.toolbar.buttons.save = '保存'
      L.drawLocal.draw.toolbar.actions.text = '取消'
      L.drawLocal.draw.toolbar.actions.title = '取消绘制'
      L.drawLocal.draw.toolbar.finish.text = '完成'
      L.drawLocal.draw.toolbar.finish.title = '完成绘制'
      L.drawLocal.draw.toolbar.undo.text = '撤销'
      L.drawLocal.draw.toolbar.undo.title = '撤销'
      L.drawLocal.edit.handlers.edit.tooltip.subtext = '点击取消以撤消更改'
      L.drawLocal.edit.handlers.edit.tooltip.text = '拖动标记以编辑图形'
    }
  }
}
</script>
<style scoped lang="sass">
.mapCom
  height: 85vh

  .iconLabel
    width: 80px !important

  .iconSty
    &Class
      width: 50px
      height: 100px
      position: relative
      top: 40px

#map
  width: 100%
  height: 100%

.lmap-image
  width: 32px
  height: 32px

.lmap-span
  display: inline-block
  margin-left: 5px
  padding: 5px
  font-weight: bold
  line-height: 20px
  font-size: 14px
  color: #fff
  white-space: nowrap

.lmap-text
  display: inline-block
  margin-left: 5px
  padding: 5px
  font-weight: bold
  line-height: 20px
  font-size: 16px
  color: #fff
  width: 500px
  white-space: nowrap
  position: absolute
  text-align: center
  top: 25px
  left: -250px
</style>