javascript - leaflet和leaflet draw vue leaflet.draw.js的问题?20d6 :8 Uncaught TypeError: Cannot read properties of undefined (reading 'length' )

Question

mounted() {
 this.initMap();
},
methods: {
initMap() {
  this.map = L.map('mapContainer').setView([48.856663, 2.351556], 12);
  this.tileLayer = L.tileLayer(
      "https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}",
      {
        attribution: '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery (c) <a href="https://www.mapbox.com/">Mapbox</a>',
        maxZoom: 18,
        id: "mapbox/satellite-streets-v11",
        accessToken: "token",
      }
  );
  this.tileLayer.addTo(this.map);
  var drawnItems = new L.FeatureGroup();
  this.map.addLayer(drawnItems);
  var drawControl = new L.Control.Draw({
    edit: {
      featureGroup: drawnItems
    }
  });
  this.map.addControl(drawControl);

  this.map.on(L.Draw.Event.CREATED, function(event){
    let layer = event.layer;
    console.log(`start ${layer}`);
    drawnItems.addLayer((layer))
  })
 },
},
}

leaflet.draw.js?20d6:8 Uncaught TypeError: Cannot read properties of undefined (reading 'length')

第一次与 map 交互后，控制台出现错误，无法再绘制形状

更新:切换到mapbox draw

Answer 1

我是这样解决这个问题的。代替 Leaflet，在 Vue 3 中使用 MapBox 和 MapBox 绘图