Листовка с таможенной плиткой, похоже, не работает - PullRequest
1 голос
/ 02 апреля 2020

Я пытаюсь использовать Leaflet в сочетании с пользовательскими плитками для создания вымышленной карты, но, похоже, она не работает, даже если я задаю 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, и я понятия не имею, почему это не работает.

1 Ответ

0 голосов
/ 02 апреля 2020

Вы должны удалить свойство 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);
...