将传单映射导出到geojson

Question

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

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

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

Answer 1

没有“开箱即用”的选项可以将地图上的所有标记导出到GeoJSON，但这是您可以轻松完成的事情。 Leaflet的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 ， L.FeatureGroup或L.GeoJSON图层，你可以使用它的toGeoJSON方法返回一个GeoJSON特征集：

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

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

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

var bounds = map.getBounds();

var collection = {
    "type": "FeatureCollection",
    "bbox": [[
        bounds.getSouthWest().lng,
        bounds.getSouthWest().lat
    ], [
        bounds.getNorthEast().lng,
        bounds.getNorthEast().lat
    ]],
    "features": []
};

您可以稍后通过将bbox成员与L.Map的setBounds方法结合使用来恢复它。 而已。 您可以将它发送到服务器或通过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);