将传单地图导出到 geojson

Question

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

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

有很多方法可以在 leaflet 上加载 geojson，但我想不出任何将地图导出到 geojson 的选项...

Answer 1

没有 "out-of-the-box" 选项可以将地图上的所有标记导出到 GeoJSON，但您可以自己轻松完成。 Leaflet 的 L.Marker 有一个 toGeoJSON 方法：

Returns a GeoJSON representation of the marker (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 方法，其中 returns 一个 GeoJSON featurecollection:

Returns a GeoJSON representation of the layer group (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);

将传单地图导出到 geojson

Export leaflet map to geojson

javascript

dictionary

geojson

leaflet