Свои карты на leaflet.js

в 5:35, , рубрики: maps, Maps API, Веб-разработка

В городе Красноярске намечено проведение Универсиады в 2019 году, в связи с этим и не только администрация Красноярска проводит разработку генерального плана территориального развития города до 2033 года. Недавно чиновники выложили схемы генерального плана на сайте администрации города для общественного обсуждения. Но вот незадача: просмотр и анализ схем неудобен, потому что файлы имеют большие размеры и разрешение. Например, файл основной схемы имеет размер 43,34Мб и разрешение 19256x16019px. У меня компьютер тормозит при просмотре такой картинки.

Немного поскриптовав с коллегами, сделали вот такую интерактивную карту antirek.github.io/krskmap/main/index.html

Свои карты на leaflet.js

Далее немного подробнее, как сделать свою карту на leaflet.js из картинки с большим разрешением.


Действия

1. Подготавливаем слои. Чтобы карты можно было зуммировать (приближать-отдалять), необходимо сделать слои.

Делаем 4 слоя (первый — это исходный файл и еще 3 с уменьшением в два раза каждый)

$ convert bigdata.jpg -resize 50% bigdata_50.jpg
$ convert bigdata.jpg -resize 25% bigdata_25.jpg
$ convert bigdata.jpg -resize 12.5% bigdata_125.jpg

2. Каждый слой нарезаем и складываем в отдельные директории

$ convert -crop 100x100 bigdata.jpg  7/%d.jpg
$ convert -crop 100x100 bigdata_50.jpg  6/%d.jpg
$ convert -crop 100x100 bigdata_25.jpg  5/%d.jpg
$ convert -crop 100x100 bigdata_125.jpg  4/%d.jpg

Поскольку сходу не нашел как при нарезке нумеровать файлы по строкам и столбцам в документации на ImageMagick, пришлось делать шаг 3.

3. Переименование файлов из линейной нумерации в сетку XxY

Небольшой php-скрипт кидаем в директорию с файлами и, задав количество файлов все и количество файлов, укладывающихся в одну строку изображения, прогоняем.

<?php
$pieces_count = 2550; //Число файлов-тайлов
$pieces_count_on_row = 50; //Число файлов-тайлов, уложившихся в длину изображения, округленное в большую сторону.
for($i=0; $i <= $pieces_count; $i++){
  $filename = (int)($i / $pieces_count_on_row);
  $filename .= 'x' . $i % $pieces_count_on_row;
  rename("{$i}.jpg","{$filename}.jpg");
}
?>

4. Подключаем на страничку скрипт leaflet.js, которому указываем, где брать тайлы для нашей карты.

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

<script>

var map = L.map('map').setView([0, 0], 4);

L.tileLayer('{z}/{y}x{x}.jpg',{
minZoom: 4,
maxZoom: 7,
attribution: '',
tms: false
}).addTo(map);

</script>

Где самая магия это {z}, {x}, {y}. {z} — это уровень zoom'а, здесь стоит от 4 до 7, в таких директориях лежат нарезки тайлов каждого масштаба, в 4 низкая степень детализации (тот файл, который был сжат до 12,5%), далее по нарастающей.

Вот, пожалуй, и все. Дальше всю кухню по работе с картой берет на себя leaflet.js, красиво зуммируя карту, позволяя перемещать ее мышкой и стрелками.

В репозитории на гитхабе github.com/antirek/krskmap лежат нарезки тайлов основной и транспортных схем генерального плана территориального развития города Красноярска до 2033 года общим объемом в 0,5Гб. С гитхаба же идет и просмотр карты antirek.github.io/krskmap/main/index.html.

P.S. В администрацию города Красноярска через онлайн-приемную было отправлено предложение разместить эту карту или ссылку на нее на сайте администрации города, зарегистрированное за номером ВП-2014-005631 от 13.10.2014.

Автор: antirek

Источник

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js