如何防止传单在地图区域外加载瓷砖?

时间:2016-02-22 20:54:22

标签: javascript leaflet bounds

我的地图是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]]);

仍然会遇到这些错误。

1 个答案:

答案 0 :(得分:1)

您需要在创建mybounds之前定义tilelayer。如果你的边界恰好位于瓷砖的边缘,你可能还需要将边界带入一小部分,以防止地图试图加载相邻的瓷砖。以下是OSM磁贴的示例:

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