Question

是否可以从传单导出geojson以保存地图状态？

我想存储标记，缩放和放大地图中心稍后加载。

有很多方法可以在传单上加载geojson，但是我无法找出将地图导出到geojson的任何选项...

Answer 1

没有＆＃34;开箱即用＆＃34;将地图上的所有标记导出到GeoJSON的选项，但您可以自己轻松完成这些操作。宣传单L.Marker有一个toGeoJSON方法：

返回标记的GeoJSON表示（GeoJSON Point Feature）。

http://leafletjs.com/reference.html#marker-togeojson

例如：

// Create a marker
var marker = new L.Marker([0, 0]);
// Get the GeoJSON object
var geojson = marker.toGeoJSON();
// Log to console
console.log(geojson);

将输出到您的控制台：

{
    "type":"Feature",
    "properties":{},
    "geometry":{
        "type":"Point",
        "coordinates":[0,0]
    }
}

如果您想将所有添加到地图中的标记存储在GeoJSON集合中，您可以执行以下操作：

// Adding some markers to the map
var markerA = new L.Marker([0, 0]).addTo(map),
    markerB = new L.Marker([1, 1]).addTo(map),
    markerC = new L.Marker([2, 2]).addTo(map),
    markerD = new L.Marker([3, 3]).addTo(map);

// Create an empty GeoJSON collection
var collection = {
    "type": "FeatureCollection",
    "features": []
};

// Iterate the layers of the map
map.eachLayer(function (layer) {
    // Check if layer is a marker
    if (layer instanceof L.Marker) {
        // Create GeoJSON object from marker
        var geojson = layer.toGeoJSON();
        // Push GeoJSON object to collection
        collection.features.push(geojson);
    }
});

// Log GeoJSON collection to console
console.log(collection);

将输出到您的控制台：

{
    "type":"FeatureCollection",
    "features":[{
        "type":"Feature",
        "properties":{},
        "geometry":{
            "type":"Point",
            "coordinates":[0,0]
        }
    },{
        "type":"Feature",
        "properties":{},
        "geometry":{
            "type":"Point",
            "coordinates":[1,1]
        }
    },{
        "type":"Feature",
        "properties":{},
        "geometry":{
            "type":"Point",
            "coordinates":[2,2]
        }
    },{
        "type":"Feature",
        "properties":{},
        "geometry":{
            "type":"Point",
            "coordinates":[3,3]
        }
    }]
}

编辑：但是，正如QP发现的那样，如果您能够将标记放入L.LayerGroup，{{1}或L.FeatureGroup图层，您可以使用它返回GeoJSON featurecollection的L.GeoJSON方法：

返回图层组的GeoJSON表示（GeoJSON FeatureCollection）。

http://leafletjs.com/reference.html#layergroup-togeojson

如果你想存储地图的当前界限（中心和缩放），你可以简单地将它添加到集合中：

toGeoJSON

您可以稍后将bbox成员与var bounds = map.getBounds(); var collection = { "type": "FeatureCollection", "bbox": [[ bounds.getSouthWest().lng, bounds.getSouthWest().lat ], [ bounds.getNorthEast().lng, bounds.getNorthEast().lat ]], "features": [] };的{{1}}方法结合使用来恢复它。就是这样。您可以将它发送到服务器或通过dataurl下载它，无论您喜欢什么。希望有所帮助，祝你好运。

Answer 2

我根据iH8的答案和同事的帮助找到了一个更简单的解决方案。

首先，创建一个FeatureGroup图层并将其添加到地图中：

var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);

然后将标记（或其他元素）添加到图层：

var marker = new L.marker([lat, lon]).addTo(drawnItems);

并在您想要的时候导出所有内容：

var collection = drawnItems.toGeoJSON();
var bounds = map.getBounds();

collection.bbox = [[
    bounds.getSouthWest().lng,
    bounds.getSouthWest().lat,
    bounds.getNorthEast().lng,
    bounds.getNorthEast().lat
]];

// Do what you want with this:
console.log(collection);

将传单映射导出到geojson

2 个答案: