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

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

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

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

Пожалуйста, не предлагайте мне Яндекс. У меня нет 120000 в год. OpenStreetMap тоже не подойдет. Меня именно интересует вопрос связанные с SVG.
  • Вопрос задан
  • 1215 просмотров
Решения вопроса 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, функции пересчета градусов в пиксели и обратно через проекции. Там довольно понятный код.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
summer Ярославль
от 100 000 до 140 000 ₽
КРАФТТЕК Санкт-Петербург
от 60 000 до 80 000 ₽
20 апр. 2024, в 13:23
1000 руб./за проект
20 апр. 2024, в 12:50
30000 руб./за проект
20 апр. 2024, в 12:01
20000 руб./за проект