Dynamic extension of file for Tilelayer in Leaflet

  Kiến thức lập trình

I am wondering how to do it. I want to have different file extension depending on path to taht file. In my script below for example: white_orchard have .png files in z=2 and x=2.

// Funkcja do ustawiania odpowiedniej mapy na podstawie ścieżki
function setupMap() {
    let mapPath;
    let minZoom;
    let maxZoom;
    
    // Pobranie bieżącej ścieżki URL
    const currentPath = window.location.pathname;

    // Sprawdzenie ścieżki i ustawienie odpowiednich wartości
    if (currentPath.includes('/white_orchard/index.html')) {
        mapPath = '/resources/maps/white_orchard/{z}/{x}/{y}.jpg';
        minZoom = 2;
        maxZoom = 5;
    } else if (currentPath.includes('/velen_novigrad/index.html')) {
        mapPath = '/resources/maps/hos_velen/{z}/{x}/{y}.jpg';
        minZoom = 1;
        maxZoom = 6;
    } else {
        console.error('Nieznana ścieżka mapy');
        return;
    }

    // Obliczanie średniego zoomu
    const avgZoom = Math.round((minZoom + maxZoom) / 2);

    // Inicjalizacja mapy
    var map = L.map('mapid', {
        zoomControl: false,
        fullscreenControl: true,
        zoomSnap: 0.5,
        zoomDelta: 0.5
    }).setView([51.505, -0.09],avgZoom);

    // Dodanie kontrolek zoomu
    L.control.zoom({
        position: 'bottomright',
        zoomInTitle: 'Przybliż',
        zoomOutTitle: 'Oddal'
    }).addTo(map);

    // Okienko z koordynatami
    map.on('click', function (e) {
        var coords = e.latlng;
        var lat = coords.lat.toFixed(5);
        var lng = coords.lng.toFixed(5);
        console.log('Map clicked at:', lat, lng);
        L.popup()
            .setLatLng(coords)
            .setContent("Koordynaty: " + lat + ", " + lng)
            .openOn(map);
    });


    // Dodanie warstwy kafelków z opcją TMS
    L.tileLayer(mapPath, {
        minZoom: minZoom,
        maxZoom: maxZoom,
        tms: true // Ustawienie odwrotnej numeracji kafelków
    }).addTo(map);
}

// Wywołanie funkcji po załadowaniu DOM
document.addEventListener('DOMContentLoaded', function() {
    setupMap();
});

I tried to search for answers or use AI but it was in vain. I could use some advice on this particular problem.

2

Theme wordpress giá rẻ Theme wordpress giá rẻ Thiết kế website

LEAVE A COMMENT