将传单地图导出到geojson [英] Export leaflet map to 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.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 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.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的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!