如何防止传单在地图区域外加载图块？答案

【问题标题】：How to prevent leaflet from loading tiles outside map area?如何防止传单在地图区域外加载图块？
【发布时间】：2016-02-23 06:15:06
【问题描述】：

我有一张 8576x8576 的地图，但我不断收到控制台错误：

Failed to load resource: net::ERR_FILE_NOT_FOUND

因为传单试图加载不存在的图块。我设置了边界和 MaxBounds 以防止在地图区域之外平移（以将地图保持在屏幕的中心）。

var map = L.map('map', {
    maxZoom: mapMaxZoom,
    minZoom: mapMinZoom,
    zoomControl: false,
    crs: L.CRS.MySimple
}).setView([0, 0], 3);

L.tileLayer('assets/map/{z}_{x}_{y}.jpg', {
    minZoom: mapMinZoom,
    maxZoom: mapMaxZoom,
    tileSize: 268,
    noWrap: true,
    reuseTiles: true,
    tms: false,
    bounds: mybounds,
    errorTileUrl: "assets/map/404.jpg",
    continuousWorld: true
}).addTo(map);

new L.Control.Zoom({position: 'topright'}).addTo(map);

var sidebar = L.control.sidebar('sidebar').addTo(map);

var mybounds = [[-8576 / 2, -8576 / 2],[8576 / 2, 8576 / 2]];

map.setMaxBounds([[-5600, -5600], [5600, 5600]]);

我做错了什么？为什么传单一直尝试加载这些图块？

我尝试这样设置 MaxBounds：

map.setMaxBounds([[-8576 / 2, -8576 / 2],[8576 / 2, 8576 / 2]]);

仍然会出现这些错误。

【问题讨论】：

标签： javascript leaflet bounds

【解决方案1】：

您需要在创建tilelayer 之前定义mybounds。如果您的边界正好位于图块的边缘，您可能还需要将边界带入少量，以防止地图尝试加载相邻的图块。以下是 OSM 瓦片的示例：

http://fiddle.jshell.net/nathansnider/2g4h5eu5/

【讨论】：

谢谢，它成功了。我还像你说的那样将边界更改为小于我的实际地图。
fiddle 不再起作用了你能提供一个更新的例子吗？
@Dylan 带有 "var mybounds =" 的行应该在行 "L.tileLayer('assets/map/{z}_{x}_{y}.jpg', {" 之前全部