Как создать кастомную сетку координат в Leaflet?

Как изменить сетку координат для Leaflet, чтобы углы карты были следующими:

Нижний левый: -1,0
Верхний левый: -1,1
Нижний правый: 0,0
Верхний правый: 0,1

Меня интересует специфичный пример с такими координатами, а именно https://mapgenie.io/conan-exiles/maps/exiled-lands, хотя там используется mapbox. Я предполагаю, что для этого может потребоваться работа с CRS, proj4.js и proj4leaflet.js, но мне не совсем понятно, с чего начать.
  • 4 января 2024 г. 10:08
Ответы на вопрос 2
Для создания кастомной сетки координат в Leaflet, действительно, часто используются библиотеки, такие как Proj4js для работы с пользовательскими системами координат (CRS) и Proj4Leaflet для удобной интеграции этих CRS в Leaflet. Вот пример, как можно настроить сетку координат согласно вашим требованиям:

1. Добавьте ссылки на необходимые библиотеки в ваш HTML файл:

```html
<script src="path/to/leaflet.js"></script>
<script src="path/to/proj4.js"></script>
<script src="path/to/proj4leaflet.js"></script>
```

2. Определите новую систему координат (CRS) с помощью proj4 и Proj4Leaflet:

```javascript
var customCRS = new L.Proj.CRS('EPSG:3395', // Вы можете использовать любой идентификатор
    '+proj=lcc +lat_0=0 +lon_0=0 ' + // Широта и долгота центральной точки
    '+lat_1=1 +lat_2=-1 ' +           // Широта начала и конца измерений
    '+x_0=0 +y_0=0 ' +                // Смещение в метрах
    '+ellps=WGS84 +datum=WGS84 +units=m +no_defs', {
        resolutions: [ // Массив с разрешениями для каждого уровня масштабирования
            8192, 4096, 2048, 1024, 512, 256, 128
        ],
        origin: [-1, 1], // Устанавливаем начальную точку для отсчета координат (верхний левый угол)
        bounds: L.bounds([-1, 0], [0, 1]) // Задается область допустимых координат
    });
```

3. Инициализируйте карту с кастомным CRS:

```javascript
var map = L.map('map', {
    crs: customCRS,
    continuousWorld: true,
    worldCopyJump: false,
    minZoom: 0,
    maxZoom: 6 // Адаптируйте под ваши значения масштабирования, исходя из массива resolutions
});

// Добавляем слой тайлов
L.tileLayer('url_to_your_tiles/{z}/{x}/{y}.png', {
    minZoom: 0,
    maxZoom: 6, // Адаптируйте под ваши значения масштабирования
    tileSize: 256 // Размер тайлов, измените, если у вас они другие
}).addTo(map);

// Устанавливаем вид карты на ту область, которую планируете показывать
map.fitBounds([[-1, 0], [0, 1]]);
```

В примере используется линейно-конформное коническое проектирование (proj=lcc). Однако нужно учитывать, что ваша область достаточно мала и не требует сложных картографических проекций, так что здесь пример с lcc упрощен и может потребовать дополнительной настройки.

Обратите внимание, что для работы с тайловыми серверами и определением правильного формата URL для тайлов, пути к тайлам должны быть адаптированы под ваш конкретный источник.

Если ваша задача стоит в интеграции карты из конкретного источника (например, mapgenie.io), удостоверьтесь, что у вас есть разрешение на использование этих картографических данных в ваших целях и что использование API и тайлов соответствует и
Ушел на MapLibre там это решилось очень просто.
Похожие вопросы