将传单地图导出到 geojson

2022-01-12 00:00:00 dictionary geojson leaflet javascript

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

Is it possible to export geojson from leaflet to save the map state?

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

I want to store the markers, zoom & map center to load it later.

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

There is plenty of ways to load geojson on leaflet, but I can't figure out any option to export the map to geojson...

推荐答案

没有开箱即用"的选项可以将地图上的所有标记导出到 GeoJSON，但您可以自己轻松完成.Leaflet 的 L.Marker 有一个 toGeoJSON 方法:

There's no "out-of-the-box" option to export all the markers on the map to GeoJSON but it's something you can do easily do yourself. Leaflet's L.Marker has a toGeoJSON method:

返回标记的 GeoJSON 表示(GeoJSON 点特征).

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 集合中，您可以执行以下操作:

If you want to store all the markers added to your map in a GeoJSON collection, you could do something like this:

// 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 特征集合:

Edit: However, as the QP found out, if you're able to put your markers into a L.LayerGroup, L.FeatureGroup or L.GeoJSON layer you can just use it's toGeoJSON method which returns a GeoJSON featurecollection:

返回图层组的 GeoJSON 表示 (GeoJSON FeatureCollection).

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

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

如果您想存储地图的当前边界(中心和缩放)，您只需将其添加到集合中即可:

If you want to store the map's current bounds (center and zoom) you could simply add it to the collection doing this:

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 下载任何您喜欢的内容.希望对你有帮助，祝你好运.

You can later restore it by using the bbox member in conjunction with L.Map's setBounds method. That's it. You could send it to the server or download it via dataurl whatever you like. Hope that helps, good luck.

相关文章