我的代码:
<!DOCTYPE html>
<html>
<head>
<title>OpenTTD Map</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://npmcdn.com/leaflet@1.0.0-rc.3/dist/leaflet.css" />
<script src="https://npmcdn.com/leaflet@1.0.0-rc.3/dist/leaflet.js"></script>
</head>
<body>
<div id="map" style="width: 1600px; height: 900px"></div>
<script>
var tile_url = 'http://dev.ruun.nl/zelf/openttd/tiles/map_{x}_{y}.png';
var map = L.map('map', {
maxZoom: 20,
minZoom: 20,
crs: L.CRS.Simple
}).setView([0, 0], 20);
//65409x32839
var southWest = map.unproject([0, 32839], map.getMaxZoom());
var northEast = map.unproject([65409, 0], map.getMaxZoom());
map.setMaxBounds(new L.LatLngBounds(southWest, northEast));
L.tileLayer(tile_url, {
attribution: 'Map data © Ieuan\'s OpenTTD World',
continuousWorld: true,
tileSize: 256
}).addTo(map);
</script>
</body>
</html>
出于某种原因,我的图 block 没有加载, map 只显示灰色。它们没有被浏览器下载,我也没有收到任何错误消息
图 block 是 65409x32839 屏幕截图的 256x256 部分
要查看的 URL 是 http://dev.ruun.nl/zelf/openttd/
最佳答案
您必须明确指定您的 Tile Layer maxZoom
选项为 20,否则您将获得默认值 18
,这会阻止您的图 block 在您唯一的缩放 (20
) 时被调用。
关于javascript - 传单 map 未加载图 block ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38826702/