简体   繁体   English

如何使地图适合传单中的图块图层范围

[英]How to fit map to tile layer bounds in leaflet


I have a leaflet map. 我有一张传单图。 The map container is very big compared to the tile in first zoom level (256px X 256px). 与第一个缩放级别(256px X 256px)的图块相比,地图容器很大。 I want to get the bounds of tile and fit the map bounds to it. 我想获取图块的边界并使其适合地图边界。 I am able to fitbound() with multiple markers. 我能够用多个标记来fitbound() I adopted the code from here . 我从这里采用了代码。 I tried to achieve fit to tile also with same idea. 我也试图以同样的想法来适应瓷砖。 unfortunately it doesn't seem working. 不幸的是,它似乎没有用。 Here is my code 这是我的代码

     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));
    };

Group your markers in a L.mapbox.featureGroup() and then on your map use 将标记分组到L.mapbox.featureGroup() ,然后在map使用

map.fitBounds(featureGroup.getBounds());

Feature groups are like a layerGroup but also has a .getBounds() method that can be used to set your fit. 要素组就像layerGroup但也具有.getBounds()方法,可用于设置适合度。 See the docs. 参见文档。

maybe not the best solution, but at least working: Add an other layer and make it invisible. 也许不是最好的解决方案,但至少可以正常工作:添加另一层并使其不可见。 Zoom to this one. 放大到这个。 Advantage is, you might also add onEachFeature . 好处是,您还可以添加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());

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM