Question

<template>
  <div style="height: 100%">
    <div id="map" style="margin:0 auto;width: 100%;height: 100%;"></div>
  </div>
</template>
<script>
import L from 'leaflet'
import tiledMapLayer from '@supermap/iclient-leaflet'

export default {
  name: 'HelloWorld',
  data() {
    return {
      map: null
    }
  },
  methods: {
    initMap() {
      console.log(L)
      var map = L.map('map', {
        center: [23.103651, 109.602506],
        crs: L.CRS.EPSG3857,
        zoom: 14
      });
      L.supermap.cloudTileLayer("http://t2.supermapcloud.com/FileService/image").addTo(map);

      var editableLayers = new L.FeatureGroup();
      map.addLayer(editableLayers);
      var options = {
        position: 'topleft',
        draw: {
          polyline: {},
          polygon: {},
          circle: {},
          rectangle: {},
          marker: {},
          remove: {}
        },
        edit: {
          featureGroup: editableLayers,
          remove: true
        }
      };
      var drawControl = new L.Control.Draw(options);  // 这里 开始 报错  leaflet.draw  这个怎么导入
      map.addControl(drawControl);
      handleMapEvent(drawControl._container, map);
      map.on(L.Draw.Event.CREATED, function(e) {
        var type = e.layerType,
          layer = e.layer;
        if (type === 'marker') {
          layer.bindPopup('A popup!');
        }
        editableLayers.addLayer(layer);
      });

      function handleMapEvent(div, map) {
        if (!div || !map) {
          return;
        }
        div.addEventListener('mouseover', function() {
          map.scrollWheelZoom.disable();
          map.doubleClickZoom.disable();
        });
        div.addEventListener('mouseout', function() {
          map.scrollWheelZoom.enable();
          map.doubleClickZoom.enable();
        });
      }
    }
  },
  mounted() {
    this.initMap()
  }
};

</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

Answer 1

您好，leaflet.draw是个leaflet插件，您需要把它也引进来。

Comments

这个 有没有 npm  方式 下载 这个插件

---

能留个联系方式嘛，我在学习VUE+Leaflet

---

我引用了leaflet.draw还是报错啊，找不到L.Control.Draw

Answer 2

你好，我现在也是遇到同样的问题，捂脸，就是L.Control类没有Draw这个函数，也没有L.Draw这个类，不知道兄弟你到时是怎么解决的，可以分享下吗

Comments

应该是要打入js和css

leaflet.draw.js

leaflet.draw.css

---

解决了吗