Thiết kế website giá rẻ

Question

I’m trying to figure out how to change the coordinate grid. Now there is something like this

My code:

    <!DOCTYPE HTML>
<html lang="en">

<head>

    <meta charset="utf-8">
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
        integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
        crossorigin=""/>
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
        integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
        crossorigin=""></script>
    <style>
        #map { height: 100vh; width: 100vw; }
    </style>

</head>

<body>

    <div id="map"></div>

    <script>
        var yx = L.latLng;

        var xy = function(x, y) {
            if (L.Util.isArray(x)) {
                return yx(x[1], x[0]);
            }
            return yx(y, x);
        };

        var bounds = [[0, 0], [16384, 16384]]; // Обновленные границы карты

        var map = L.map("map", {
            attributionControl: false,
            crs: L.CRS.Simple,
            minZoom: -7,
            maxZoom: 2,
            // Исправленные начальные координаты карты
            center: [16384, 0],
            zoom: -3
        });

        var tiles = L.tileLayer('https://mytitlesite.net/{z}/{x}/{y}.png', {
            minZoom: -7,
            maxNativeZoom: 0,
            zoomOffset: 7
        }).addTo(map);
        // Add event listener for left click
        map.on('click', function(e) {
            console.log('Координаты клика:', e.latlng.lng, e.latlng.lat); // Выводим координаты в консоль
        });
        tiles.getTileUrl = function(coords) {
            if (coords.z === -7) {coords.y += 1}
            if (coords.z === -6) {coords.y += 1}
            if (coords.z === -5) {coords.y += 2}
            if (coords.z === -4) {coords.y += 4}
            if (coords.z === -3) {coords.y += 7}
            if (coords.z === -2) {coords.y += 13}
            if (coords.z === -1) {coords.y += 25}
            if (coords.z ===  0) {coords.y += 50}
            
            return L.TileLayer.prototype.getTileUrl.bind(tiles)(coords);
        }

        map.fitBounds(bounds); // Используем новые границы карты

        L.marker(xy(0, 0)).addTo(map) // Создаем маркер в нижнем левом углу карты
                    .bindTooltip("0,0", {permanent:true}); // Подсказка для маркера

        L.marker(xy(16384, 16384)).addTo(map) // Создаем маркер в верхнем правом углу карты
                    .bindTooltip("16384,16384", {permanent:true}); // Подсказка для маркера


        var grid = L.gridLayer({
            attribution: "Debug tilecoord grid",
            minZoom: -10,
            bounds: bounds,
            //tms: true,
        });

        grid.createTile = function (coords) {
            var tile = L.DomUtil.create("div", "tile-coords");
            tile.style.border = "1px solid black";
            tile.style.lineHeight = "256px";
            tile.style.textAlign = "center";
            tile.style.fontSize = "20px";

            var newX = coords.x;
            var newY = bounds[1][1] - coords.y - 1; // Изменен метод расчета координат

            tile.innerHTML = 
                ["x=" + newX, "y=" + newY, "z=" + (coords.z + 7)].join(", ");

            return tile;
        };

        grid.addTo(map);


    </script>
    
</body>

</html>

example from How to set up leaflet for a non-geographical tile-grid with inverted Y coordinate?
How can I make the bottom left corner be 0.0 and not in the center of the map border?
And the top right corner is 16384,16384

Thiết kế website giá rẻ

Danh mục

Lefalet change corner coordinates or grid