如何防止傳單在地圖區域之外加載圖塊？

Question

我有一個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]]);

仍然會得到那些錯誤。

Answer 1

您需要在創建mybounds之前定義tilelayer 。 如果您的邊界恰好位於圖塊的邊緣，則可能還需要將邊界稍微增加一點，以防止地圖嘗試加載相鄰的圖塊。 這是OSM磁貼的示例：

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