platformProject/src/views/mapAnalysis/index.vue

<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,
      DefaultIcon1: null,
      layerGroup: [],
      layers: [],
      rightObj: {},
      areaLayer: null,
      tilsUrl: './static/kMapTiles/{z}/{x}/{y}.jpg',
      ciLayer: null
    }
  },
  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: 'topright',
        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
        }
      }

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

      map.on(L.Draw.Event.CREATED, function (e) {
        let type = e.layerType,
          layer = e.layer

        console.log('e====>>>', e)

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

        editableLayers.addLayer(layer)
      })
    }
  }
}
</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>