javascript - 传单 map 未加载图 block

标签 javascript png leaflet

我的代码:

<!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>

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

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

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

最佳答案

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

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

关于javascript - 传单 map 未加载图 block ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38826702/

相关文章:

javascript - 使用属性名称在 javascript 中查找对象的索引

javascript - 类型错误 : Cannot read property 'child' of undefined

javascript - 如何在 Keycloak 中预先填写注册字段? (keycloak中是否有一个叫做 "register_hint"的东西?)

PHP 调整图像大小并保存透明 PNG

angular - 传单 divIcon 未以 Angular 显示在 map 上

javascript - 如何使用 jQuery 读取 $_FILES ['name' ] ['tmp_name' ]

javascript - 使用javascript获取Base64 PNG的像素颜色?

javascript - 单击透明图像

javascript - 传单绘制删除按钮删除 "clear all"操作

maps - geojson Leaflet 弹出窗口不会出现或破坏标记