更改Leaflet折线和多边形坐标会在重新渲染期间使几何混乱

时间:2019-10-04 03:18:55

标签: geometry leaflet geojson leaflet.draw

我的应用程序允许用户使用Leaflet.draw插件绘制折线和多边形,并将几何图形另存为.json文件在服务器中。从服务器加载形状后,用户应该可以对其进行编辑。会话重新加载后,所有更改应自动保存到服务器。

我使用map.on('draw:editvertex')事件来更新形状的json对象中的几何形状。然后将它们保存到会话存储中并发送到服务器。

map.on('draw:editvertex', function (e) 
{   
    let newLatLng = [];
    let layers = e.layers._layers;

    for (let i in layers)
    {
        let lat = layers[i]._latlng.lat;
        let lng = layers[i]._latlng.lng;
        newLatLng.push([lng, lat]);
    }

    jsonObj.Project.Result[key].Layers[e.poly.id].
         features[0].geometry.coordinates = newLatLng;
    sessionStorage.jsonObj = JSON.stringify(jsonObj);

}

当用户重新加载网页时,所做的更改是可见的。但是,从坐标渲染的几何看上去与mod完全不同。例如,具有修改后几何形状的多边形将重新渲染为带有孔的多边形。修改后的折线看起来就像是在随机位置绘制的线。

我查看了geojson,发现修改后的几何具有更多的坐标点。我也可以在编辑过程中看到这种情况,拖动顶点会沿边缘生成其他顶点。

我怀疑生成的额外顶点是重新渲染的几何体不正确的原因。我应该如何用Leaflet.draw编辑形状,以便没有新的顶点?

0 个答案:

没有答案