时间戳

首页 > 解决方案 > 带有海关瓷砖的传单似乎不起作用

javascript - 带有海关瓷砖的传单似乎不起作用

问题描述

我正在尝试将 Leaflet 与 Custom Tiles 结合使用来制作虚构的地图，但即使我将 Error Tile URL 设置为完全不同的图像，它似乎也无法正常工作，它甚至没有显示出来。

我的 JS 代码如下所示：

axios.get("https://crugg.de/udumap/map1/tiles/tiles.json").then((result) => {
    let tilesData = JSON.parse(result.data.replace(/(\/\/)[A-Z a-z,:'()\/.#0-9]*/gm, ""));
    console.log(tilesData.center);
    let map = L.map('map', {
        center: [tilesData.center[0], tilesData.center[1]],
        zoom: tilesData.center[2]
    }).setView([tilesData.center[0], tilesData.center[1]], tilesData.center[2]);
    L.tileLayer('https://crugg.de/udumap/map1/tiles/{z}/{x}/{y}.png', {
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">UD:RP Map</a> contributors',
        minZoom: tilesData.minzoom,
        maxZoom: tilesData.maxzoom,
        zoomOffset: -1,
        bounds: L.latLngBounds(L.latLng(tilesData.bounds[0], tilesData.bounds[1]), L.latLng(tilesData.bounds[2], tilesData.bounds[3])),
        errorTileUrl: "https://crugg.de/udumap/map1/tiles/17/107729/82841.png"
    }).addTo(map);
});

JSFiddle：https
://jsfiddle.net/5xprc6n3/1/ 这是我第一次使用 Leaflet，我不知道为什么这不起作用。

标签： javascripthtmlwebleaflet

解决方案

您必须删除该bounds属性。

L.tileLayer('https://crugg.de/udumap/map1/tiles/{z}/{x}/{y}.png', {
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">UD:RP Map</a> contributors',
        minZoom: tilesData.minzoom,
        maxZoom: tilesData.maxzoom,
        zoomOffset: -1,
        errorTileUrl: "https://crugg.de/udumap/map1/tiles/17/107729/82841.png"
    }).addTo(map);

推荐阅读