如何以编程方式放置自定义 Leaflet.draw 形状？答案

【问题标题】：How to place custom leaflet.draw shape programmatically?如何以编程方式放置自定义 Leaflet.draw 形状？
【发布时间】：2020-08-25 11:58:49
【问题描述】：

我想从数据库中恢复一个自定义的 L.Draw.Marker (L.Draw.Waypoint)，但是当我尝试初始化它时，结果不是正确的层，而只是处理程序。如果不使用鼠标单击按钮来激活处理程序，然后在地图上的某个位置放置航点，我该如何做到这一点？

我可以用 L.geoJson() 做一些接近的事情，但这只是一个普通的标记，没有我的航点对象的功能......或者有没有办法从 GeoJSON 层创建航点？

类似这样的：

function load_shape() {
    let test_wp = {
        "type": "Feature",
        "properties": {
            "layer_type": "waypoint",
            "map_id": 0,
            "rotation": -44
        },
        "geometry": {
            "type": "Point",
            "coordinates": [27.712348, 5.000000]
        }
    };
    
    let geojson = L.geoJson(test_wp); <- works
    let wp = waypoint(map, geojson._layers[geojson._leaflet_id-1]); <- works too, but this is 
                                                                       just the handler

    drawnItems.addLayer(wp.layer); <- doesn't work of course, just to get the idea...
    - or -
    wp.layer.addTo(map)
}

【问题讨论】：

标签： javascript json leaflet geojson leaflet.draw

【解决方案1】：

我找到了解决办法：

L.geoJson(test_wp, {
            // style: function (feature) {
            //     return {color: feature.properties.color};
            // },
            pointToLayer: function (feature, latlng) {
                return L.marker(latlng, {
                    draggable: true,
                    icon: L.icon({
                        iconUrl: 'static/images/icons/arrow-alt-circle-up-regular.svg',
                        iconSize: [18, 18],
                        iconAnchor: [9, 9],
                    }),
                    rotationOrigin: 'center center',
                })
            },
            onEachFeature: function (feature, layer) {

                layer.on('click', function (e) {
                    //open a popup or whatever
                });

                layer.on('drag', function (e) {
                    //when dragging do...
                });

                layer.bindPopup(feature.properties.description).addTo(drawnItems);
            }
        });

这不会创建我的自定义标记，但我可以为其提供我需要的所有功能。

【讨论】：