Задать вопрос

Интерактивная карта на сайте. Как правильно поступить с координатами?

Необходимо реализовать на сайте интерактивную карту России, где были бы выделены области, точками указаны областные центры, и нарисованы федеральные трассы.

По быстрому я реализовал это все с помощью SVG и библиотеки Raphael.js. Каждую область я рисовал вручную в программе Inkscape, предварительно загрузив туда изображение карты областей России. Потом понял, что если мне нужно добавить какую либо точку или объект - мне все равно нужно брать координаты этой точки из программы. А хотелось бы, чтобы была возможность посмотреть координаты какой либо точки в яндекс картах, гугл картах и без проблем нарисовать их на своей карте.

И поэтому вопрос такой - как рисовать SVG карты, но в координатной сетке долготы и широты, чтобы добавление точки (долготы и широты) на моей карте соответствовало реальному расположению.

Пожалуйста, не предлагайте мне Яндекс. У меня нет 120000 в год. OpenStreetMap тоже не подойдет. Меня именно интересует вопрос связанные с SVG.
  • Вопрос задан
  • 1249 просмотров
Подписаться 13 Простой 4 комментария
Решения вопроса 4
sfi0zy
@sfi0zy Куратор тега JavaScript
Creative frontend developer
Вы можете в графическом редакторе переместить и масштабировать всю свою карту в SVG так, чтобы она была грубо говоря не от 0 до 100 (или какая она у вас там) по горизонтали, а от 19 до 169 (вроде бы, не силен в географии). И по вертикали так же подвинуть. И исходить из соображений, что координаты X/Y в SVG буквально равны нашим обычным координатам по широте и долготе. На восток и север - в плюс, на запад и юг - в минус. А перемещение на экране и масштабирование можно сделать с помощью атрибута viewbox, меняя его по ходу дела. Если вы руками рисуете, то таким образом можно получить точность в 1/4 градуса без умственных усилий, просто представив циферблат (0'/15'/30'/45' -> 0/.25/.50/.75), так что думаю, что для ваших задач, где точность не столь важна, это вполне подойдет.
Ответ написан
@Corvuss
Попробуйте d3.js + topojson. Либо Raphael.js + JQuery Mapael, там тоже есть возможность добавлять города по долготе и широте.
Ответ написан
Комментировать
@prostoprogrammist Автор вопроса
Чтобы не было проблем в будущем и можно было брать реальные точки (долгота и широта) решил проблему следующем образом:
1) Скачал бесплатную программу QGIS. В ней нарисовал необходимые мне регионы. Конвертировал это в формат geojson.
2) Использовал библиотеку leaflet.js. Туда загрузил данные в формате geojson.
Ответ написан
Комментировать
dom1n1k
@dom1n1k
Посмотрите исходники Leaflet, функции пересчета градусов в пиксели и обратно через проекции. Там довольно понятный код.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы