且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

将传单地图导出到geojson

更新时间:2023-02-11 10:17:53

没有现成的"选项可以将地图上的所有标记导出到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.LayerGroupL.FeatureGroupL.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 FeatureCollection)的GeoJSON表示形式.

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.MapsetBounds方法结合使用来还原它.而已.您可以将其发送到服务器,也可以通过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.