問題描述

是否可以從傳單中導出 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.

這篇關于將傳單地圖導出到 geojson的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！