单击第二个点后如何在 Leaflet.Draw 中完成折线？答案

【问题标题】：How to complete a Polyline in Leaflet.Draw after clicking second point?单击第二个点后如何在 Leaflet.Draw 中完成折线？
【发布时间】：2017-02-07 14:15:09
【问题描述】：

当我尝试使用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
                    }
                });

【问题讨论】：

在我的情况下，当我双击然后行完成或者我需要手动单击完成。
看起来你的帖子主要是代码。您能否提供更多详细信息？
您好，感谢您的回复。当我尝试从传单绘图选项中绘制折线时遇到问题。首先我单击地图绘制第一个点，然后单击第二次完成行，但在我点击第二个时间线后，它本身并没有完成。它显示了一个扩展名。我想在第二次点击地图时完成那条线，
你在使用Leaflet.Draw插件吗？
是的。我使用 Leaflet.draw 插件在地图上绘制形状。

标签： leaflet leaflet.draw

【解决方案1】：

您可以在 javascript 中使用 prototype 覆盖位于 Leaflet.draw/src/draw/handler/Draw.Polyline.js 中的 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();
            }
};

【讨论】：

@shaishav shukla 如果您觉得它直截了当，请接受我的回答。谢谢

【解决方案2】：

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

您也许可以修改此行为。我建议您查看 Leaflet.draw 文档，尤其是 L.Draw.Polyline.completeShape() method。

【讨论】：

嗨，我试过你的解决方案，但我对这个方法很困惑。你能告诉我 L.Draw.Polyline.completeShape() 的哪种方法用于在第二次点击后停止线延伸地图。
我尝试过 completeShape() 方法，但没有成功。

【解决方案3】：

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

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

    }

});

【讨论】：