javascript - 将传单 map 导出到 geojson

Question

是否可以从 leaflet 导出 geojson 来保存 map 状态？

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

有很多方法可以在传单上加载 geojson，但我想不出任何选项可以将 map 导出到 geojson...

Answer 1

没有将 map 上的所有标记导出到 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]
    }
}

如果您想将添加到 map 的所有标记存储在 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 特征集合:

Returns a GeoJSON representation of the layer group (GeoJSON FeatureCollection).

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

如果你想存储 map 的当前边界(中心和缩放)，你可以简单地将它添加到集合中，这样做:

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 下载它。希望对您有所帮助，祝您好运。