Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Карта из растрового изображения с интерактивными областями (https://javascript.ru/forum/jquery/63402-karta-iz-rastrovogo-izobrazheniya-s-interaktivnymi-oblastyami.html)

spo 05.06.2016 19:38

[Решено] Карта из растрового изображения с интерактивными областями
 
Привет, сообщество.
Нужна помощь.

Задача в создании карты на основе растрового изображения с интерактивными областями.
Необходимые требования: zooming (желательно mousewheel) и dragging, регионы (например svg) с заголовками и callback при клике на них.

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

Прошу подсказать, возможно кто-нибудь уже сталкивался с аналогичной задачей или просто знает решение. Спасибо.

p.s.: Было бы большим плюсом построение карты из tile-ов, а так же ограничение zoom на определенный шаг в обе стороны и коэффициент увеличения/уменьшения.

Rise 05.06.2016 20:10

spo, svg это не растровое изображение

spo 05.06.2016 20:32

Цитата:

Сообщение от Rise (Сообщение 418577)
spo, svg это не растровое изображение

Совершенно верно, по этому про svg я упомянул, говоря о регионах (которые поверх карты). Растровое изображение как бы фоном, но при изменении размера и перетаскивании все сохраняет пропорции и позиции друг относительно друга.

Вот смотрите пример одного из плагинов http://jvectormap.com/examples/mall/ Кастомная карта, все отлично, только нижним слоем должно быть png-изображение.

upd: Мне только что представилось возможным так и поступить, создать svg в качестве подложки и установить ей в качестве фона картинку (как тут http://jvectormap.com/examples/legends/). Решение работает!

Rise 05.06.2016 21:08

spo, при масштабировании растровая картинка не будет четкой.

spo 05.06.2016 22:07

Цитата:

Сообщение от Rise (Сообщение 418580)
spo, при масштабировании растровая картинка не будет четкой.

Я видел на паре сайтов такие карты когда, при определенном зуме подгружается соответствующее изображение.
Так же, как я уже писал, карта нарезана на куски (256x256) и из них составлена.

Плагины удовлетворяющие данным условиям найти можно, но каждый из них делает чтото одно.

Только что обнаружил что google maps предоставляет возможность использовать кастомные карты https://developers.google.com/maps/d.../maptype-image
Так же заинтересовал комбайн http://openlayers.org/en/latest/examples/
Буду эксперементировать, но если кому то известны конкретные варианты решения моей задачи то буду очень благодарен.

Rise 05.06.2016 22:18

spo, если максимальный масштаб будет равен размеру изображения тогда нормально будет.


Часовой пояс GMT +3, время: 22:25.