传单地图未加载图块

Question

我的代码：

<!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 &copy; Ieuan\'s OpenTTD World',    
            continuousWorld: true,
            tileSize: 256
        }).addTo(map);

    </script>
</body>
</html>

由于某种原因，我的图块没有加载，地图只显示灰色。它们没有被浏览器下载，我也没有收到任何错误消息

图块是 65409x32839 屏幕截图的 256x256 部分

URL查看是http://dev.ruun.nl/zelf/openttd/

Answer 1

您必须明确指定您的 Tile Layer maxZoom 选项为 20，否则您将获得默认值 18，这会阻止您的图块在您唯一的缩放时被调用（20).

演示：http://plnkr.co/edit/0654usix33JJ5HJ4EQT4?p=preview

传单地图未加载图块

Leaflet map not loading tiles

javascript

png

leaflet