https://codepen.io/masushin/pen/qwljryv
Чтобы воспроизвести этот вопрос, выполните следующие действия:
< ol>
Выберите инструмент рисования полигона на панели инструментов. < /li>
Нажмите на карту, чтобы создать вершины многоугольника. < /li>
< /ol>
Код: Выделить всё
var map = L.map('map', {
crs: L.CRS.Simple,
minZoom: -3,
maxZoom: 5,
zoomControl: true,
attributionControl: false
});
img = new Image();
img.src = "https://placehold.jp/150x150.png"
console.log('img.src', this.img.src);
this.img.onload = () => {
let bounds = [[0, 0], [this.img.height, this.img.width]];
L.imageOverlay(this.img, bounds).addTo(this.map);
this.map.fitBounds(bounds);
};
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
var drawControl = new L.Control.Draw({
draw: {
polygon: true,
polyline: false,
rectangle: false,
circle: false,
circlemarker: false,
marker: false,
},
edit: {
featureGroup: drawnItems
}
});
map.addControl(drawControl);
map.on("draw:drawvertex", function (e) {
console.log('draw:vertex', e);
});
map.on(L.Draw.Event.CREATED, function (e) {
console.log(e)
var type = e.layerType,
layer = e.layer;
if (type === 'polygon') {
// Do marker specific actions
console.log('polygon drawn');
console.log(layer.toGeoJSON());
}
drawnItems.addLayer(e.layer);
});
Однако вместо этого результирующие данные включают 9 вершин.
Хотелось бы понять:
Почему событие draw:drawvertex срабатывает дважды за один клик.
Если есть какие-либо необходимые конфигурации или дополнительные шаги по решению этой проблемы.
Я бы очень хотел буду признателен, если вы укажете на какие-либо ошибки или недостающие конфигурации в моем коде.
Подробнее здесь: https://stackoverflow.com/questions/793 ... in-leaflet