如何在 Leaflet 中绘制具有初始点的折线答案

【问题标题】：How to draw a polyline with initial point in Leaflet如何在 Leaflet 中绘制具有初始点的折线
【发布时间】：2017-10-20 09:40:04
【问题描述】：

我正在使用 Leaflet.draw 中的自定义折线抽屉

let polylineDrawer = new L.Draw.Polyline(map, {})

polylineDrawer.enable()

我需要以编程方式将起点添加到折线

我尝试调用addVertex 或L.Draw.Polyline。看起来它不适用于addHooks 的自定义折线抽屉原因...尝试更改来源，没有结果。

还尝试在启用抽屉后在地图上触发click。像这样：

let point = new L.LatLng(x, y)

map.fireEvent('click', {
  latlng: point,
  layerPoint: map.latLngToLayerPoint(point),
  containerPoint: map.latLngToContainerPoint(point),
})

也不行

编辑：实际上，AddVertex 确实适用于自定义折线。它“不起作用”，因为我在函数中传递了错误的参数。不知怎的，我错过了。

【问题讨论】：

标签： leaflet leaflet.draw

【解决方案1】：

在您的抽屉对象上使用addVertex 确实可以让您在行中添加一个起点：

var polylineDrawer = new L.Draw.Polyline(map, {})
polylineDrawer.enable();

var latlng = L.latLng(48.8583736, 2.2922926);
polylineDrawer.addVertex(latlng);

还有一个演示

var style = {
    stroke: true,
    color: 'red',
    weight: 4,
    opacity: 0.5
};
var map = L.map(document.getElementById('map')).setView([48.8583736, 2.2922926], 15);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

var drawnItems = new L.geoJson(null, {style: style}).addTo(map);

map.on(L.Draw.Event.CREATED, function (event) {
    var layer = event.layer;
    drawnItems.addLayer(layer);
});

var polylineDrawer = new L.Draw.Polyline(map, {})
polylineDrawer.enable();

var latlng = L.latLng(48.8583736, 2.2922926);
polylineDrawer.addVertex(latlng);

html, body {
  height: 100%;
  margin: 0;
}
#map {
  width: 100%;
  height: 100%;
}

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==" crossorigin=""></script>
    
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.12/leaflet.draw.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.12/leaflet.draw.js"></script>

<div id='map'></div>

【讨论】：