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个部分

要查看的网址为http://dev.ruun.nl/zelf/openttd/

Answer 1

您必须明确指定您的图块层maxZoom选项为20，否则您将获得默认值18，这会阻止您的图块在您的唯一缩放处被调用（{{1} }）。

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

宣传单地图未加载图块

1 个答案: