Pull to refresh

Масштабирование карты, наложение меток и отображение маршрута без использования javascript

Reading time3 min
Views14K
imageОднажды, загорелся я идеей создания инструмента просмотра маршрута на карте своего города без использования javascript. Даже были аргументы в пользу этого. Например, использование своих изображений карт.
UPD: Есть аналоги у популярных сервисов c их картами (на момент создания о них еще не знал):

Спасибо за ссылки комментирующим
Но мы делаем свою.


Получился инструмент, позволяющий в качестве карты, на которую будут наноситься маркеры, выбирать любое изображение. Следует лишь указать в настройках географические координаты его угловых точек. Я воспользовался данными OSM, а именно загрузчиком:
image
Эти координаты указываются в config.php в переменную, начиная с левого против часовой стрелки
$box_str = 86.05627,55.33832,86.1076,55.36035; //l d r u  (координаты квадрата взятого для разбиения)

Экспортированное изображение в формате png помещается к корень и в настройках указывается его имя
$source_file = "bigmap.png"; //файл, который будем разбивать

Полученную большую карту мы будем резать на части. Количество частей по каждому направлению у нас задается там же в настройках

$x_count_parts = 20;
$y_count_parts = 16;

Поэкспериментировать с быстродействием при разном количестве точек для отображения и разного размера исходной карты не захотелось.

Наложение меток

С index.php подключается show.php, результатом работы которого является вывод на экран отрисованной карты, составленной из нескольких частей. Части, которые имеют на себе маркер, отрисовываются с помощью файла picture.php, остальные простым выводом
Координаты всех меток для вывода передается GET-запросом, например:
points=86.0735,55.3529;86.0765,55.3519;86.0963,55.3519
Здесь точкой с запяток отделен каждый маркер, а запятой отделены две координаты каждого маркера. Если переменная не задана, то для демонстрации рисуются (86.0995, 55.3619), (86.0765, 55.3629), (86.0765, 55.3529).
По умолчанию масштаб подстраивается таким образом, чтобы на вывод попал квадрат, содержащий в себе все полученные координаты маркеров.
image
Опционально можно подключить draw_area.php, цель которого увеличить область отображения на некоторый радиус от определенного ранее квадрата. Коэффициенты увеличения настраиваются.

Инструменты управления

image
Опционально подключается controls.php. По завершению его работы переменная $controls содержит html-текс, рисующий инструменты со ссылками. Действия – это сдвиг по карте влево, вправо, вверх и вниз.
Управление масштабом:
  • о – сбросить масштаб
  • — – отдалить (увеличить область построения)
  • + — приблизить. Здесь планировалось уже подменять картинки, используя части из более детального изображения. Но пыл здесь мой был чем то перебит и этого я не стал делать.

Можете меня упрекнуть за то, что я не отделил здесь представление от основного кода, но я счел, что для этого крохотного фрагментика подключать отдельно шаблон нерационально.

Рисование фрагмента, содержащего маркер

image
Это действие происходит в picture.php. Сам маркер выглядит в виде красного квадратика, ширина и цвет которго настраивается в config.php.
В скрипт GET-запросом передаются переменные:
  • points — те же координаты точек, которые попали в этот фрагмент
  • curxp — координата по ширине, показывающая номер фрагмента слева на право
  • curyp — координата по высоте, показывающая номер фрагмента сверху вниз
  • order — это номер метки. Увеличенный на единицу рисуется рядом с маркером. Его можно использовать для управления цветом. Например, чтобы отличить начало движения от конца, без цифр

Здесь же сразу и проявляется недоработка: при нахождении маркера на границе фрагмента он не прорисуется. Но этого можно избежать, если предусмотреть небольшие отступы.

Назначение

Планировалось с мобильного телефона получать изображение маршрута за последние 30-60 минут. Сервер для принятия данных с gps-трекера был настроен и протестирован. Данные успешно передавались и отображались во строенном средстве. Эти же данные легко можно было выбрать из mysql таблиц по любым критериям. Необходимость слежения за этим маршрутом отпала быстрее, чем предполагалось, а проект все еще был мне интересен. Довел его до некоторой степени готовности и забросил, переключившись на другие вещи.

В действии
http://rghost.ru/8073291 — исходник
Да простит меня бесплатный хостинг.
Tags:
Hubs:
+19
Comments20

Articles