将传单地图导出到 geojson

Export leaflet map to geojson(将传单地图导出到 geojson)
本文介绍了将传单地图导出到 geojson的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着跟版网的小编来一起学习吧!

问题描述

是否可以从传单中导出 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.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 表示 (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.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.

这篇关于将传单地图导出到 geojson的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!

本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益,请联系我们,我们会在确认后第一时间进行删除!

相关文档推荐

How do I can get a text of all the cells of the table using testcafe(如何使用 testcafe 获取表格中所有单元格的文本)
node_modules is not recognized as an internal or external command(node_modules 未被识别为内部或外部命令)
How can I create conditional test cases using Protractor?(如何使用 Protractor 创建条件测试用例?)
PhantomJS and clicking a form button(PhantomJS 并单击表单按钮)
Clicking #39;OK#39; on alert or confirm dialog through jquery/javascript?(在警报上单击“确定或通过 jquery/javascript 确认对话框?)
QunitJS-Tests don#39;t start: PhantomJS timed out, possibly due to a missing QUnit start() call(QunitJS-Tests 不启动:PhantomJS 超时,可能是由于缺少 QUnit start() 调用)