Question

我这样初始化传单：

var map,
    imageWidth  = 6400,
    imageHeight = 8000,
    tileSize    = 200;

L.tileLayer('tiles/{z}/map_{x}_{y}.png', {
                minZoom: 17,
                maxZoom: 20,
                updateWhenIdle: true,
                noWrap: true,
                tileSize: tileSize,
                unloadInvisibleTiles: false,
                reuseTiles: true,
                crs: L.CRS.Simple
              }).addTo(map);

            map.doubleClickZoom.disable();

            var southWest = map.unproject([0, imageHeight], map.getMaxZoom());
            var northEast = map.unproject([imageWidth, 0], map.getMaxZoom());
            map.setMaxBounds(new L.LatLngBounds(southWest, northEast));

我收到这些控制台错误：

GET http://localhost:8000/dist/tiles/17/map_83886_83886.png 404 (Not Found)
map.html:32 GET http://localhost:8000/dist/tiles/17/map_83885_83886.png 404 (Not Found)
map.html:32 GET http://localhost:8000/dist/tiles/17/map_83886_83885.png 404 (Not Found)
map.html:32 GET http://localhost:8000/dist/tiles/17/map_83885_83885.png 404 (Not Found)
map.html:32 GET http://localhost:8000/dist/tiles/17/map_83885_83887.png 404 (Not Found)
map.html:32 GET http://localhost:8000/dist/tiles/17/map_83886_83887.png 404 (Not Found)
map.html:32 GET http://localhost:8000/dist/tiles/17/map_3_5.png 404 (Not Found)
map.html:32 GET http://localhost:8000/dist/tiles/17/map_2_5.png 404 (Not Found)
map.html:32 GET http://localhost:8000/dist/tiles/17/map_1_5.png 404 (Not Found)
map.html:32 GET http://localhost:8000/dist/tiles/17/map_83884_83886.png 404 (Not Found)
map.html:32 GET http://localhost:8000/dist/tiles/17/map_83887_83886.png 404 (Not Found)
map.html:32 GET http://localhost:8000/dist/tiles/17/map_83884_83887.png 404 (Not Found)
map.html:32 GET http://localhost:8000/dist/tiles/17/map_83884_83885.png 404 (Not Found)
map.html:32 GET http://localhost:8000/dist/tiles/17/map_83887_83885.png 404 (Not Found)
map.html:32 GET http://localhost:8000/dist/tiles/17/map_83887_83887.png 404 (Not Found)
map.html:32 GET http://localhost:8000/dist/tiles/17/map_4_3.png 404 (Not Found)
map.html:32 GET http://localhost:8000/dist/tiles/17/map_4_4.png 404 (Not Found)
map.html:32 GET http://localhost:8000/dist/tiles/17/map_4_2.png 404 (Not Found)
map.html:32 GET http://localhost:8000/dist/tiles/17/map_4_5.png 404 (Not Found)

我不太明白为什么图书馆试图加载这些图块，因为我设置了边界，所以传单不应该尝试加载超出它们的东西？

我使用map.unproject的方式有什么问题吗？就用户在屏幕上显示图像的距离而言，边界看起来效果很好。

谢谢！

Answer 1

maxBounds来自LatLngBounds类型。因此，您必须将坐标放入，而不是像示例中那样放置像素大小。

Answer 2

Leaflet 0.7有一个错误，它试图加载触摸地图边界的图块，而不仅仅是与边界相交的图块。这应该在Leaflet 1.0（目前处于Beta版）中修复。您可以在MSDN documentation找到详细信息。

简单的解决方案是通过单个像素调整地图块。我发现真的只需要调整0。所以而不是：

var southWest = map.unproject([0, imageHeight], map.getMaxZoom());
var northEast = map.unproject([imageWidth, 0], map.getMaxZoom());

使用：

var southWest = map.unproject([1, imageHeight], map.getMaxZoom());
var northEast = map.unproject([imageWidth, 1], map.getMaxZoom());

Answer 3

任何人仍然遇到这个问题，我使用@Josh的解决方案解决了这个问题，但也必须将我的地图宽度和高度各减少2px（边界的每边1px）。所以我的界限来自

var southWest = map.unproject([0, 1200], map.getMaxZoom());
var northEast = map.unproject([800, 0], map.getMaxZoom());

要：

var southWest = map.unproject([1, 1198], map.getMaxZoom());
var northEast = map.unproject([798, 1], map.getMaxZoom());

leaflet.js正在尝试加载超出边界的tile

3 个答案: