Leaflet использование SVG картинки вместо географической карты

Javascript библиотека Leaflet для организации работы с картами помимо гео-карт позволяет работать с произвольными наложениями в режиме «без гео-карты».

Т.е. всю мощь скрипта, работу с масштабом, перемещением карты, можно применить к вашей произвольной картинке (например, карте торгового центра).

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

Вот наш «типовой» шаблон для экспериментов с картой leaflet:

Шаблон содержит описание контейнера #map, который мы растягиваем на весь viewport. Подключены стили и скрипт leaflet, а также jQuery, который не требуется для библиотеки работы с картой, но может быть использован нами для более комфортного кодинга.

Осталось добавить инициализацию карты и загрузку картинки отдельным слоем.

Основной шаг — это выбор системы соотнесения координат (СRS). L.CRS.Simple соответствует прямоугольной декартовой системе координат. При этом широта и долгота напрямую сопоставляются с Y и X — это то что нам и нужно. Также важно, что не грузятся какие то элементы географических карт, ничего лишнего.

Далее требуется задать какие размеры имеет наше наложение. Фактически, это выбор размеров картинки при «нулевом» масштабе.

Здесь важны пропорции. Не верно заданные пропорции для SVG изображений грозят тем, что будут видны части картинки за т.н. границей монтажной области. А для растра вы получите соответствующее искажение пропорций.

Ограничение области показа

Так как наша задача — это показать пользователю только карту и ничего более (а на плоскости ничего более и нет), то наверное стоит ограничить просмотр пределами вашей картинки.

Добавьте в инициализацию карты параметр maxBounds.

Теперь программа будет возвращать пользователя к границам карты, даже если тот попытается выйти куда то дальше. Если же ваша картинка меньше чем размеры контейнера карты, то она будет центрироваться.

Преодоление «нулевого» масштаба

Заданные при инициализации границы (bounds) слоя с картинкой , являются размерами при «нулевом» значении масштаба. По умолчанию настройки таковы, что дальше уменьшить карту нельзя.

Чтобы изменить это — вы можете либо задать другие значения для w и h, либо использовать параметр minZoom при инициализации карты. Задайте отрицательное значение параметра, указывающее во сколько раз слой может быть уменьшен в размерах при масштабировании.

Например:

Написать комментарий

Мало букафф? Читайте есчо !

Смещение карты только при двойном касании в Leaflet

Июнь 13, 2018 г.

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

Читать

Перетачиваем popup в leaflet для показа его справа

Май 10, 2018 г.

В leaflet для элемента tooltip реализовано свойство direction, в вот для popup - нет. Возможно, добавят в будущих обновлениях. Но сейчас, если у вас появилась ...

Читать

 

Комментарии к «Leaflet использование SVG картинки вместо географической карты»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: