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 未捕获类型错误：无法读取未定义的属性（读取“长度”）
第一次与地图交互后，控制台中出现错误，并且无法再绘制形状
UPD：切换到mapbox绘制
我使用类似的代码在底图上绘制多边形，并且在将 Vue3 与传单和传单绘制一起使用时遇到类似的问题。绘制多边形后，我在控制台中收到一堆错误，可能是由鼠标悬停事件触发的。
尚未找到问题的根本原因，但原因可能是 leaflet-draw 不再符合 Leaflet 基础库（只是猜测）。 Github 的最后一次提交是 2018 年，并且有一个很长的列表 问题 并打开 拉取请求，而 Leaflet 本身则不断更新。
将该库与 Vue 结合使用时也可能会出现此问题。
您是否尝试过使用 Vanilla JS 创建上述功能？
我是这样解决这个问题的。 代替Leaflet，在Vue 3中使用MapBox和MapBox绘制作品