javascript - 保存和检索基于 leaflet.js 的非地理 map

Question

我有一个带有图像叠加的基于 SVG 的非地理布局。

var map = L.map('map', {
    crs: L.CRS.Simple
});
var bounds = [[0,0], [1000,1000]];
var image = L.imageOverlay('uqm_map_full.png', bounds).addTo(map);
map.fitBounds(bounds);

我在这张图片上画出了不同的形状。

现在我想检索所有绘制的形状，作为 json 对象数组并将其保存到数据库中。要求是稍后通过从数据库中获取 json 对象数组来复制相同的形状。在 leaflet.js 中可能吗？我想要像下面这样的东西

L.getObjectsArray(map) will give me 
var leafletAllShapesConfig = [Object1,Object2,Object3,Object4,Object5]

现在读取对象数组，我可以绘制与 L.draw(leafletAllShapesConfig) 相同的形状。 这是否可能并且任何内置方法都可以实现相同的目标？如果没有，请给出一些想法，我该如何实现。

Answer 1

是的，Leaflet 有一个内置方法:L.GeoJson()

将您的形状放入要素组而不是 map 。

var fg = L.featureGroup().addTo(map);
L.marker(latlng,options).addTo(fg);

然后你可以从featuregroup中得到geojson: var gjson = fg.toGeoJSON()

现在您可以将此 geojson 保存为字符串:var str = JSON.stringify(gjson)

要将形状添加回 map ，请使用:

var json = JSON.parse(str);

fg.clearLayers() //To clean the map from the shapes
L.geoJSON(json, {
    onEachFeature: function(feature, layer) {
        //Code
    }
}).addTo(fg);

现在您的 map 上有了您的形状，但没有颜色等选项/属性。 GeoJson 也不要转换它们。您可以通过遍历功能组中的图层并手动将它们添加到 gjson 并将 layer.options 添加到 gjson.properties.options 并稍后添加到 map 来解决此问题，从 gjson 中读取选项。