当我尝试使用Leaflet.Draw plugin绘制折线时,我遇到了问题。
首先,我点击地图绘制第一个点,然后点击第二个点完成一行。
然而,在我第二次点击该行之后,该行并没有完成。它显示了该行的扩展。
当我双击它时,该行完成,否则我需要手动点击完成按钮。我想在地图上第二次点击完成该行。
这是我绘制折线的代码:
var drawControl = new L.Control.Draw({
position: 'topleft',
draw: {
polygon: {
allowIntersection: true,
showArea: true,
drawError: {
color: '#b00b00',
timeout: 1000
},
shapeOptions: {
color: '#0033ff'
}
},
circle: {
shapeOptions: {
color: '#0033ff'
}
},
polyline: {
shapeOptions: {
color: 'red'
},
},
rectangle: {
shapeOptions: {
color: '#0033ff'
}
},
marker: false,
polyline: true,
},
edit: {
featureGroup: drawnItems,
remove: true
}
});
答案 0 :(得分:4)
您可以使用addVertex
覆盖L.Draw.Polyline
类中的prototype
功能,该功能位于 Leaflet.draw/src/draw/handler/Draw.Polyline.js 中javascript,并在其末尾添加以下代码:
markersLength = this._markers.length;
if (markersLength == 2) {
this._fireCreatedEvent();
this.disable();
}
而且,这是完整的代码:
L.Draw.Polyline.prototype.addVertex = function (latlng) {
var markersLength = this._markers.length;
// markersLength must be greater than or equal to 2 before intersections can occur
if (markersLength >= 2 && !this.options.allowIntersection && this._poly.newLatLngIntersects(latlng)) {
this._showErrorTooltip();
return;
}
else if (this._errorShown) {
this._hideErrorTooltip();
}
this._markers.push(this._createMarker(latlng));
this._poly.addLatLng(latlng);
if (this._poly.getLatLngs().length === 2) {
this._map.addLayer(this._poly);
}
this._vertexChanged(latlng, true);
markersLength = this._markers.length;
if (markersLength == 2) {
this._fireCreatedEvent();
this.disable();
}
};
答案 1 :(得分:2)
在折线上添加多个顶点(例如,在第二次点击时不自动完成折线)是Leaflet.Draw
的一项功能。
您可以修改此行为。我建议您查看Leaflet.draw文档,尤其是L.Draw.Polyline.completeShape() method。
答案 2 :(得分:0)
您可以自动触发第二次点击以完成形状。
map.on('draw:drawvertex', e => {
const layerIds = Object.keys(e.layers._layers);
if (layerIds.length > 1) {
const secondVertex = e.layers._layers[layerIds[1]]._icon;
requestAnimationFrame(() => secondVertex.click());
}
});