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

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

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

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

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

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

Войти через центр авторизации
Похожие вопросы
eGamings Воронеж
от 80 000 до 110 000 ₽
Sveak Барнаул
от 50 000 ₽
ЧИТАЙ-ГОРОД Москва
от 100 000 до 140 000 ₽
05 апр. 2020, в 23:37
1000 руб./за проект
05 апр. 2020, в 21:08
40000 руб./за проект
05 апр. 2020, в 21:01
3000 руб./за проект