Интерактивная карта использованием Raphael и SVG?

Доброго времени суток всем!



Есть задача сделать интерактивную карту по Пермскому краю, есть карта ru.wikipedia.org/wiki/%D0%A4%D0%B0%D0%B9%D0%BB:Outline_Map_of_Perm_Krai.svg, есть очень замечательный пример как можно это организовать ruseller.com/lessons.php?rub=32&id=952, в этом примере используется карта en.wikipedia.org/wiki/File:Blank_map_of_Europe_-_Atelier_graphique_colors.svg.



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



Проблема заключается в следующем:

Беру данные из SVG из значения d="....", вставляю эти данные в path, но при этом изображение не отображается на странице. Разница в том что в примере используются координаты типа «M 353.1856,270.01047 C 352.78938,269.87841 344.33684,265.78418 343.94062....», в моём случае координаты типа «m 463.53375,957.92014 -2.10173,-0.54675 1.53701,2.96424 0.21957,2.4153 -1.31743,0 -0.21958....». Как я понял из манула к Rapchael, регистры символов M и m имеют разницу в абсолютном и относительном позиционировании, но как это правильно организовать в моём случае, для меня пока остается загадкой.



Если этот метод бредовый, то возможно, есть смысл использовать flash/silverlight?
  • Вопрос задан
  • 11740 просмотров
Решения вопроса 2
notcommon
@notcommon
@sashak нужно перевести обычный SVG в формат, который понимает Raphael. Вот на этой странице это можно сделать. Сначала выбираете файл, жмете convert, затем collect Raphael. Открывается другое окно, там по началу ничего нет, нужно сверху слева нажать Page и ваша карта будет в новом окне. Сайт ужасен, я еле разобрался в нем, зато работает :) у меня вашу карту конвертнуть получилось www.irunmywebsite.com/raphael/p_OutlineMapofPermKr...
Ответ написан
@sashak Автор вопроса
Я сделал всё проще, открыл файл в Inkscape, в настройках программы по умолчанию выставлено «Разрешить относительные координаты» (автор данной карты именно в этой программе и делал с относительными координатами). Заходим Файл — настроить Inkscape — Экспорт в svg, убираем галку напротив «Разрешить относительные координаты». Открываем нашу карту, двигаем её в разные стороны, чтобы произошло изменение координат, сохраняем файл, и вуаля!, координаты в нашем svg сменились на абсолютные.

Может быть в будущем это кому-то поможет… но реализация действительно несложная.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 11
@sashak Автор вопроса
Неужели никто не может подсказать как это можно сделать?
Ответ написан
Комментировать
@TimID
Ну а простое распарсивание Вашей строки с заменой символов и пересчетом коэффициентов Вам не поможет?
Насколько я понял, в исходном формате после С идут абсолютные координаты, а в Вашем случае — смещения от первых. Попробуйте как-то так:

В варианте php:
$oldcoords = split(' ', $my_source_coord); // режем по пробелу "свою" строку
$newcoords = [];
$newcoords[0]='M';
$newcoords[1]=$oldcoords[1];
$newcoords[2]='C';
$basiscoords=split(',' , $oldcoords[1]); // наши базисные координаты
$coordselements=split(',' , $oldcoords[2]); // первая группа "относительных" координат
$newcoords[3]=($basiscoords[0]+$coordselements[0]) . ',' . ($basiscoords[1]+$coordselements[1]); // складываем абсолютные координаты базиса и смещения, а затем склеиваем в одну строку

// ... здесь продолжаем нужное число раз ...//

$newline = join (' ',$newcoords); // склеиваем строчку через пробел

Ответ написан
@Neir0
Еще было бы здорово код привести. Не помню такого момента из доки рафаел. ИМХО он тупо пишет все что в g.path находится в SVG PATH
Ответ написан
@iDrakon
Если ещё актуально, при использовании Raphael, где указывается карта (картинка) на которой всё отображается?
Ответ написан
Комментировать
@sashak Автор вопроса
Насколько я помню, там всё указывается в координатах из массива вида «M 353.1856,270.01047 C 352.78938,269.87841 344.33684,265.78418 343.94062....»
Ответ написан
Комментировать
@iDrakon
с координатами всё просто и понятно - это самое простое.
видимо я не правильно вопрос формулирую....
создаю на основе данного примера
htmlbook.ru/blog/postroenie-interaktivnoi-karty-s-...
координаты созданы и помещены в paths.js
но на карте ничего не отображается....
Ответ написан
Комментировать
@sashak Автор вопроса
Обратите внимание, что координаты должны быть абсолютные, а не относительные, у меня тоже ничего не отображалось, когда я использовал относительные координаты.
Ответ написан
Комментировать
@iDrakon
у меня используются, как в примере - БОЛЬШИЕ букавы в координатах - абсолютные.
path: 'M 172.76 659.87 C 176.90 662.90 183.03 663.86 185.31 668.90 C 181.57 667.34 178.07 665.28 174.69 663.07 C 173.39 662.50 173.01 661.13 172.76 659.87 Z'
- в примере не сказано, но - посмотрев код сайтов на которых выложены аналогичные карты - обратил внимание - что, координаты - так же выложены в index файле и обёрнуты в div -в примере это не указано.
Ответ написан
Комментировать
@iDrakon
кто то в теме вообще?
Ответ написан
Комментировать
@iDrakon
Всё сделал по рекомендациям notcommon
notcommon - тебе, так сказать, ЛАЙК!
Ответ написан
Комментировать
Вопрос старый, но вдруг кто-то еще ищет как это сделать.

Интерактивная карта за 20 минут без плагинов и библиотек: https://www.youtube.com/watch?v=CurYICWI0T8
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы