Leaflet 在 GeoJSON 層中移動多邊形的單點

Question

我有一個帶有 geoJSON 圖層組的 leaflet 並加載了幾個 geoJSON 功能，每個功能都作為一個單獨的圖層添加到 geoJSON 圖層組。 對於給定的選定圖層，我需要使用 javascript 在該圖層上移動多邊形的一個點。 因此，例如，我可能需要將第三個頂點移動到 30.123、-80.123。 我無法弄清楚如何做到這一點。 我可以使用 setLatLng() 方法輕松移動標記，但找不到任何東西來更改多邊形點。

這是我如何創建 map 並添加我的 geoJSON 功能的示例：

   function createMap(){ 
    myMap = L.map('locationMap', {
                editable: true,
                attributionControl: false,
                fullscreenControl: true,
                fullscreenControlOptions: {
                    position: 'topleft'
                }
            }).setView([@Model.MapCenterLat, @Model.MapCenterLong], @Model.MapInitialZoom);

    L.tileLayer('@Model.MapUrl2', {
        drawControl: true,
        maxZoom: 20,
        id: 'mapbox.streets'
    }).addTo(myMap);

    geoJsonLayer = L.geoJson().addTo(myMap);

    loadGeoFences('');
}

function loadGeoFences(parentId) {
    var url = '@Url.Action("GetGeoFences")';

    $.get(url, { parentId: parentId },
        function (data) {
            if (data.length > 0) {
                $.each(data, function (index, value) {
                    var newLayer = L.geoJson(value,
                        {
                            onEachFeature: applyLayerStyle
                        });
                    newLayer.addTo(geoJsonLayer);
                });
            }
        });
}

Answer 1

我可以使用 leaflet.editing 插件來做到這一點。 一旦有了正確的圖層，就可以使用所需的坐標修改 layer.editing.latlngs 數組。 然后調用 layer.redraw() 來更新多邊形。

Answer 2

您可以在 geoJson 加載時更改 latlngs，方法如下：

function onEachFeature(feature, layer) {
    if(layer instanceof L.Polyline){
      var latlngs = layer.getLatLngs()
      var ll = latlngs[0][2];
      ll.lat = 51.490056
      latlngs[0][2] = ll;
      layer.setLatLngs(latlngs);
    }
}


L.geoJSON(json,{onEachFeature: onEachFeature}).addTo(map);

https://jsfiddle.net/falkedesign/hvdxo3z7/