如何在Leaflet中将地图适配瓦片层边界

4


我有一张leaflet地图。与第一个缩放级别中的瓷砖(256px X 256px)相比,地图容器非常大。我想获取瓷砖的边界并使地图边界适应它。我可以使用多个标记符合fitbound()。我采用了这里的代码。我试图使用同样的想法来实现适应瓦片。不幸的是,它似乎不起作用。这是我的代码。

     var fitToBounds = function () {
         //getting bound of tile 256X256 pixel
        var maxLat = map.unproject(new L.Point(0,0)).lat; 
        var maxLat = map.unproject(new L.Point(0,256)).lat;
        var maxLng = map.unproject(new L.Point(256,0)).lng;
        var minLng = map.unproject(new L.Point(256,256)).lng;
        var southWest = new L.LatLng(minLat, minLng);
        var northEast = new L.LatLng(maxLat, maxLng);
        map.fitBounds(new L.LatLngBounds(southWest, northEast));
    };

3
你有两个名为maxLat的变量...其中一个应该是minLat。 - Edu
2个回答

4

将你的标记分组在 L.mapbox.featureGroup() 中,然后在你的 map 上使用。

map.fitBounds(featureGroup.getBounds());

特征组类似于一个 layerGroup,但还具有一个可以用来设置适应区域的 .getBounds() 方法。请参阅 文档。


4
他没有提及标记。他有瓷砖图层,而瓷砖图层没有getBounds方法。你关于分组标记的想法并没有帮助任何事情。 - seek

3
也许不是最好的解决方案,但至少能够工作: 添加另一层并使其不可见。放大到这一层。优点是,您可能还可以添加onEachFeature
     var pointsWithBounds=[]
     _.each(layerWithoutBounds, function (element) {
                pointsWithBounds.push(
                    {
                        "type": "Feature",
                        "geometry": {
                            "type": "CircleMarker",
                            "coordinates": [element.lon, element.lat]
                     });
      });
      var layerWithBounds = L.geoJSON(pointsWithBounds, {
                style: {
                          fillColor: 'transparent',
                          color: 'transparent'
                       }
            });
      layerWithBounds.addTo(map)
      map.setView(layerWithBounds.getBounds().getCenter());
      map.fitBounds(layerWithBounds.getBounds());

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接