Leaflet 如何完成传单中的多段线。单击第二个点后绘制？

在尝试使用绘制多段线时，我遇到了一个问题

首先，我在地图上单击以绘制第一个点，然后再单击以完成直线

但是，在我第二次单击该行之后，该行本身并没有完成。它显示了线的延伸

当我双击它时，该行完成，否则我需要手动单击finish按钮。我想在第二次点击地图时完成这一行

这是我绘制多段线的代码：

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
                    }
                });

---

在多段线上添加多个顶点（例如，在第二次单击时不自动完成多段线）是lipper.Draw的一项功能

---

您可以修改此行为。我建议您查看传单.draw文档，尤其是。

在多段线上添加多个顶点，例如，不在第二次单击时自动完成多段线是传单.draw的一项功能

您可以修改此行为。我建议您查看传单.draw文档，尤其是。

您可以使用javascript中的prototype重写L.draw.Polyline类中的addVertex函数，并在其末尾添加以下代码：

        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();
            }
};

您可以使用javascript中的prototype重写位于中的L.Draw.Polyline类中的addVertex函数，并在其末尾添加以下代码：

        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();
            }
};

---

可以自动触发第二次单击以完成形状

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());

    }

});

---

可以自动触发第二次单击以完成形状

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());

    }

});

---

在我的例子中，当我双击然后行完成时，或者我需要手动单击finish。看起来您的帖子大部分是代码。您能提供更多详细信息吗？您好，谢谢您的回复。当我试图从传单绘图选项中绘制多边形线时，我遇到了一个问题。首先，我单击地图绘制第一个点，然后第二次单击以完成线，但在我单击第二次后，线本身无法完成。它显示了一个扩展。我想在第二次点击地图上完成这一行，你在用传单吗？画图插件？是的。我在地图上绘制形状时使用了传单.draw插件。在我的情况下，当我双击然后线条完成，或者我需要手动单击finish。看起来你的帖子大部分都是代码。您能提供更多详细信息吗？您好，谢谢您的回复。当我试图从传单绘图选项中绘制多边形线时，我遇到了一个问题。首先，我单击地图绘制第一个点，然后第二次单击以完成线，但在我单击第二次后，线本身无法完成。它显示了一个扩展。我想在第二次点击地图上完成这一行，你在用传单吗？画图插件？是的。我使用了ployate.draw插件在地图上绘制形状。您好，我尝试了您的解决方案，但我对这种方法感到困惑。您能告诉我在第二次单击地图后使用L.draw.Polyline.completeShape的哪种方法来停止线延伸吗。我尝试了completeShape方法，但不起作用。您好，我尝试过你的解决方案，但我对这种方法感到困惑。你能告诉我，在第二次点击地图后，使用L.Draw.Polyline.completeShape的哪种方法来停止直线延伸吗？我尝试过completeShape方法，但不起作用。@shaishav shukla如果你觉得简单，请接受我的答案。Thanks@shaishavshukla如果你觉得简单，请接受我的回答。谢谢