Leaflet.js - 在地图视图上拟合 geoJSON 坐标

Posted

技术标签:

【中文标题】Leaflet.js - 在地图视图上拟合 geoJSON 坐标【英文标题】:Leaflet.js - Fit geoJSON co-ordinates on map view 【发布时间】:2012-05-02 00:50:09 【问题描述】:

我有一个 Leaflet.js 地图,上面有来自外部 JSON 文件的点和线串。

如果我添加: map.setView(new L.LatLng(0,0), 10);

它将以纬度和经度 0,0 为中心设置地图。如何设置它以使地图中心和缩放适合 JSON 上的所有点?

【问题讨论】:

【参考方案1】:

您可以将所有图层添加到具有 getBounds 方法的 FeatureGroup。所以你应该可以说myMap.fitBounds(myFeatureGroup.getBounds());

至少目前,L.FeatureGroup 的 getBounds 方法仅在 master 分支中可用(不是最新版本,0.3.1)。

【讨论】:

好的,感谢您的帮助。因此,如果此刻我添加 geoJSON 层的代码如下所示: geojsonLayer.addGeoJSON(jsonData); map.addLayer(geojsonLayer); map.fitBounds(jsonGroup.getBounds());我会将其更改为: geojsonLayer.addGeoJSON(jsonData); map.addLayer(geojsonLayer); var jsonGroup = new L.FeatureGroup(jsonData); map.fitBounds(jsonGroup.getBounds());那应该可以吗? 抱歉,它已经从我上面的帖子中删除了所有格式,我不知道在保存评论时如何保留它。 在 cmets 中调试非常困难。你能把你的代码粘贴到jsfiddle.net 来告诉我你有什么(或者至少是其中的一部分)吗? 你们走在正确的轨道上,但您所要做的就是在 geojsonLayer 上调用 .getBounds()。它从 FeatureGroup 扩展而来。 leafletjs.com/reference.html#geojson getBounds() 在 geojson 或功能组上都给我一个边界不存在的错误【参考方案2】:

我的情况类似。我从 GeoJson 数据中绘制了所有 标记。所以我写了这个函数,它在按钮点击时被重复调用。只要符合你的要求就试试吧。

   function bestFitZoom()
    
        // declaring the group variable  
        var group = new L.featureGroup;

        // map._layers gives all the layers of the map including main container
        // so looping in all those layers filtering those having feature   
        $.each(map._layers, function(ml)

           // here we can be more specific to feature for point, line etc.            
            if(map._layers[].feature) 
             
                 group.addLayer(this)
             
         )

         map.fitBounds(group.getBounds());
    

编写此函数的最佳用途是即使地图/标记的状态发生变化,它也会获得标记/图层的最新/当前状态。每当调用此方法时,所有图层都将以适度的缩放级别可见。

【讨论】:

【参考方案3】:

在向用户显示从起点到目的地的路线时,我需要这样做。我将我的路线列表存储在一个名为 directionLatLngsL.LatLng 数组中,然后您可以简单地调用

map.fitBounds(directionLatLngs);

这是因为map.fitBounds 需要一个L.LatLngBounds 对象,它只是L.LatLng 的数组

http://leafletjs.com/reference.html#latlngbounds

【讨论】:

以上是关于Leaflet.js - 在地图视图上拟合 geoJSON 坐标的主要内容,如果未能解决你的问题,请参考以下文章

Leaflet.js:检测地图何时完成缩放

如何在 iframe 中使用 Leaflet.js 中的地图

单击地图时添加新标记(OpenStreetMap,Leaflet JS)

Leaflet.js 地图不占用全宽 [React.js]

在 Leaflet.js 地图周围包裹 GeoJSON 对象

前端学习-使用JS库Leaflet.js生成世界地图并获取标注地址经纬度。