Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.06.2016, 19:38
Аватар для spo
spo spo вне форума
Профессор
Отправить личное сообщение для spo Посмотреть профиль Найти все сообщения от spo
 
Регистрация: 11.05.2011
Сообщений: 213

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

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

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

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

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

Последний раз редактировалось spo, 05.06.2016 в 20:44.
Ответить с цитированием
  #2 (permalink)  
Старый 05.06.2016, 20:10
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,662

spo, svg это не растровое изображение
Ответить с цитированием
  #3 (permalink)  
Старый 05.06.2016, 20:32
Аватар для spo
spo spo вне форума
Профессор
Отправить личное сообщение для spo Посмотреть профиль Найти все сообщения от spo
 
Регистрация: 11.05.2011
Сообщений: 213

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

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

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

Последний раз редактировалось spo, 05.06.2016 в 20:43.
Ответить с цитированием
  #4 (permalink)  
Старый 05.06.2016, 21:08
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,662

spo, при масштабировании растровая картинка не будет четкой.
Ответить с цитированием
  #5 (permalink)  
Старый 05.06.2016, 22:07
Аватар для spo
spo spo вне форума
Профессор
Отправить личное сообщение для spo Посмотреть профиль Найти все сообщения от spo
 
Регистрация: 11.05.2011
Сообщений: 213

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

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

Только что обнаружил что google maps предоставляет возможность использовать кастомные карты https://developers.google.com/maps/d.../maptype-image
Так же заинтересовал комбайн http://openlayers.org/en/latest/examples/
Буду эксперементировать, но если кому то известны конкретные варианты решения моей задачи то буду очень благодарен.
Ответить с цитированием
  #6 (permalink)  
Старый 05.06.2016, 22:18
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,662

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Карта с кликабельными областями nyols Оффтопик 8 29.07.2011 10:28
карта увеличенного изображения Luna82 Элементы интерфейса 11 15.06.2011 10:17