Javascript 将传单地图导出到geojson

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

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

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

没有“开箱即用”选项将地图上的所有标记导出为geojson，但这是您可以自己轻松完成的。传单的

L.Marker

有一个

toGeoJSON

方法：

返回标记的GeoJSON表示形式（GeoJSON点功能）

例如：

// 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]
    }
}

{
    "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]
        }
    }]
}

如果要将添加到地图的所有标记存储在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":"Feature",
    "properties":{},
    "geometry":{
        "type":"Point",
        "coordinates":[0,0]
    }
}

{
    "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）

如果要存储地图的当前边界（居中和缩放），只需将其添加到集合中即可：

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下载。希望这会有帮助，祝你好运。

根据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);

---

非常感谢您的回复！它帮助我找到了一个更简单的解决方案：））绝对不需要感谢，这就是Stackoverflow的作用。然而，你可以考虑接受这个答案，以便其他有类似问题的人也能找到一个测试/接受的解决方案。请参阅：关于您的其他解决方案。我以为你知道

L.FeatureLayer

的

toGeoJSON

方法，因为你说过，你在任何地方都找不到解决方案（我在文档中想过，因为它已经明确说明了），而且

L.Map

需要一个解决方案。我将对我的答案进行修改，以使其对其他用户来说是完整的，并避免混淆。我使用了类似的解决方案，但发现当我将toGeoJson（）的输出转储到HTML中的元素时，我得到的只是[object][object]。我的解决方案是使用：JSON.stringify（collection.toGeoJSON（））；