Дубль гис конструктор карт

Обновлено: 10.05.2024

Недавно передо мной встала интересная задача — отображать на сайте карту, с различными объектами, причем этих объектов могут быть десятки и сотни, а управлять ими должен уметь любой менеджер ниже среднего звена.

Более формально задача сводилась к тому, чтобы дать возможность пользователям задавать некий список гео-объектов, дать им возможность легко и быстро этими объектами управлять и автоматически отображать эти объекты на некоей карте.

Для реализации задумки была выбрана связка Google Docs и API картографического сервиса 2ГИС. Решение получилось действительно простым, в духе знаменитых «30 строк» :)

Шаг 1. Заводим таблицу для данных.

Открываем Google Docs и создаем таблицу. В моей таблице было достаточно много ненужных мне, но очень нужных для прочих служб полей, поэтому я пойду на небольшую хитрость и для тестирования заведу отдельную.

В качестве тестовых данных я взял адреса домов, относящихся к двум небольшим избирательным участкам в городе Костроме. Номер участка, улица, номер дома и число квартир.

Использование в качестве источника данных Google Drive снимает множество проблем с совместной работой специалистов разной степени подготовки и с оперативным обновлением данных.

Теперь таблицу нужно опубликовать. Для этого идем в меню «Файл — Опубликовать в интернете». В появившемся окне выбираем «Начать публикацию», в нижней части — выбираем «CSV (значения, разделенные запятыми)» и получаем ссылку на наш лист таблицы в виде CSV.

Шаг 2. Готовим данные для карты.

Напишем несложный скрипт на PHP и назовем его getMapData.php:

Разумеется, массив $points нужно куда-то закешировать, чтобы не «дергать» Google Docs при каждой отрисовке карты.

Вот простейший код для работы с API геокодера:

Ну и наконец пробежимся по массиву $points нашим «геокодером» и выведем результат в формате JSON:

Обратите внимание на странную строчку sleep(1); в коде. Дело в том, что я пользуюсь тестовым доступом к API 2GIS, а при нем частота запросов ограничена одним в секунду. После получения полного доступа эту строчку нужно, разумеется, убрать.

Ну и не забываем опять же кэшировать полученные данные, чтобы не создавать 2ГИС лишнюю нагрузку, а себе — лишнее время работы скрипта.

Шаг 3. Показываем карту.

На этом, собственно, всё. Мы получили простейшую, но вполне функциональную систему, которая показывает на карте объекты согласно списку, ведущемуся в Google Docs. Вот такой mash-up :)

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

Собственно, ничто не мешает сделать такой же «трюк» с картами, например, от Яндекса. Получится даже красивее, за счет множества встроенных стилей и технологии кластеризации маркеров на карте. Изначально я пошел именно этим путем, но тесты показали, что геокодер 2ГИС все-таки гораздо точнее. Яндекс справляется с получением координат примерно от 95% адресов при условии их тщательной подготовки, 2ГИС — почти все 100%.

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

Что есть в конструкторе

Отметки. Указывают на конкретное место, адрес или компанию. Расставляйте точки вручную или привязывайте к конкретному адресу. Чтобы привязать точку к адресу, введите улицу и дом, название организации или объекта в поисковой строке.

Линии. Пригодятся, чтобы показать маршрут забега, перекрытые улицы, дорогу от остановки до офиса.

Фигуры: квадраты, круги, многоугольники. Помогают выделить на карте небольшой участок или целый район.

Как добавить объекты на карту

Выберите отметку, линию или фигуру и поместите её в нужное место.

Цвет, толщина линии и другие свойства фигур настраиваются в левой панели.

Точкам, линиям и фигурам можно добавить описание — пользователи увидят его, когда кликнут на объект. Если знаете разметку Markdown и HTML, вставляйте в описания картинки.

Отметкам можно добавить подпись, которую всегда видно на карте.

Все отметки, линии и фигуры, которые вы нанесёте на карту, появятся в левой панели. Нажмите на объект в списке, чтобы выделить его на карте. И наоборот: выберите объект на карте, чтобы выделить в списке.

Если добавить объекту описание, оно появится в списке. Так проще отличить одну точку или фигуру от другой.

Площадные объекты могут накладываться друг на друга. Если кликнете по смежной области, то выберете тот объект, который находится на более высоком слое. Чтобы изменить приоритет объектов, перемещайте их в списке вверх и вниз.

Чтобы удалить объект, найдите его в списке и нажмите на крестик.

Как настроить размер карты

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

Как добавить карту на свой сайт

Нажмите на кнопку «Получить код» под картой, скопируйте код и вставьте на свою страничку. Если у сайта есть админка, которая поддерживает HTML, можно сделать это через неё. Если админки нет, добавьте карту прямо в код сайта.

MapGL JS API - это JavaScript-библиотека, при помощи которой вы можете добавить карту 2GIS в ваше веб-приложение или сайт.

Добавлять трехмерную карту, использующую технологию WebGL и картографические данные 2GIS, в веб-приложения и сайты. карту при помощи мыши или сенсорных жестов.
Отображать планы этажей торговых центров и аэропортов.
Настраивать внешний вид карты с помощью редактора стилей.
Добавлять на карту одиночные маркеры и группы маркеров.
Добавлять текстовые метки и рисовать геометрические фигуры.
Строить автомобильные и пешеходные маршруты.
Добавлять произвольные метки и подсказки к объектам на карте.
Настраивать элементы управления карты.

Картографические данные поддерживают стандарты OGC.

В этом разделе описан процесс подключения библиотеки при помощи элемента . Если вы используете npm, вы можете также подключить библиотеку с помощью пакета @2gis/mapgl.

Получение ключа доступа Использование

Чтобы подключить библиотеку MapGL JS API, добавьте следующую строку в код страницы:

Библиотека добавит глобальную переменную mapgl . Полный список доступных методов этой переменной можно посмотреть в Справочнике API.

⚠ Используйте только описанные в документации поля и методы MapGL JS API . Мы не гарантируем стабильную работу незадокуметированного функционала.

Создание карты

Чтобы отобразить карту на странице, нужно создать HTML-элемент, который будет выступать в роли контейнера:

Так как карта будет помещена внутрь этого элемента, нужно указать его размеры:

После этого нужно инициализировать карту, вызвав метод Map() и указав идентификатор контейнера и ваш ключ доступа. Вы также можете указать начальные координаты карты и нужный масштаб. Полный список параметров можно найти в Справочнике API.

Добавление маркера

Чтобы добавить маркер на карту, нужно вызвать метод Marker(), указав инстанс карты и координаты для маркера:

Полный список дополнительных параметров для маркера можно найти в Справочнике API.

Преимущество карт в том, что они наглядны, а с помощью интерактивных сервисов ещё и многофункциональны. С помощью карт можно измерить расстояние, оценить масштаб, увидеть внешний вид, узнать информацию о реальном объекте, определить местоположение.

2GIS — простой конструктор для создания интерактивных карт

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

Как создать простую анимированную карту: сервис Mult.dev

Анимированную карту хорошо использовать, когда надо показать длительное путешествие, охватывающее несколько городов (или стран). Такой формат будет хорошо смотреться и на сайте, и в соцсетях.

Как создать интерактивную карту хороплет: сервис Datawrapper

Раскрасить регионы на карте — создать фоновую картограмму или хороплет — позволяет сервис Datawrapper. Это бесплатно.

Как бесплатно сделать интерактивную карту: сервис Interacty

Рассказываем, как с помощью бесплатного редактора расставить точки на интерактивной карте (или любой картинке), подписать все объекты и встроить ее к себе на сайт.

Как в пару кликов нанести на интерактивную карту сто и более адресов

Для этого вам потребуется иметь аккаунт в Google и заранее подготовить файл в Excel.

Как создать интерактивную карту в конструкторе Яндекс Карты

Два клика и ни строчки кода. Онлайн-картография для новичков

Как создать интерактивную карту в Carto

Визуализируй как известные медиа мира. При анализе большого объема геоданных, создании многослойных карт можно воспользоваться онлайн-инструментом Carto.

Как создать интерактивную карту в сервисе Storymap

Если нужно создать простую, наглядную, адаптированную к мобильным устройствам карту с небольшим количеством точек-маркеров

Как визуализировать большое количество данных: открытая платформа Ушахиди

Сервис работает с информацией из различных источников: SMS, MMS, блоги, Twitter, принимает фото, видео и другие данные из сети

Как создать интерактивную карту с сервисами ESRI

Ключевое слово, которое объединяет все сервисы сторимэп — история. А истории, как известно, можно рассказывать по-разному

Как сделать интерактивную карту: обзор сервисов

Преимущество карт в том, что они наглядны, а с помощью интерактивных сервисов ещё и многофункциональны

Еженедельная рассылка для мультимедийных авторов

Не хватает времени сёрфить по профессиональным сайтам? Подпишитесь на нашу email-рассылку, и каждую неделю вы будете получать полезные статьи, анонсы, интервью, презентации, видеоролики, переводы, инфографику.

Продуктами 2ГИС пользуются 30 млн горожан. Чтобы огромный набор данных попал к конечному пользователю, мы используем множество внутренних продуктов, о которых очень редко рассказываем.

Однажды на Хабре уже была статья о нашем внутреннем продукте — векторном редакторе геометрий. Чудеса нейминга привели нас к трём точкам — Fiji. До них проект назывался так: «Новая карта» → «Новая новая карта» → «Новая новая новая карта». Три года назад мы приступили к реализации Fiji и рассказали о прототипировании UI, сегодня — погрузимся в технические детали и расскажем о том, как создать быстрый и надежный ГИС-редактор.

Картографы и их запросы

Fiji — это продукт, в котором наши картографы создают карту. Хотите узнать, как выглядит обычный день картографа? Мы, разработчики, видим его примерно так:

Большую часть времени картограф взаимодействует непосредственно с картой, которую сам и создаёт. Отзывчивая и быстрая карта, позволяющая видеть изменения онлайн, — такую задачу ставят перед нами 500 картографов, работающих в офисах 2ГИС от Новосибирска и Москвы до Праги и Сантьяго. Конечно же, у нас есть SLA для всех этих операций — навигация по карте максимум 3 секунды, обновление данных карты — 5 секунд.

Как же мы решаем эту задачу?

Очевидно, что у нас есть база данных, в которой хранятся все геообъекты. Первое, что приходит в голову, — это просто тянуть из неё все объекты, которые хочет увидеть картограф. Именно такой подход использовался в предыдущем поколении нашей картографической системы, когда база данных была отдельной для каждого города 2ГИС, а количество картографов не превышало пары десятков.

Одним из основных требований к новой системе была возможность создания карты всего мира, а не его отдельных частей в границах крупных городов. Предыдущий подход исключили, так как геопересечения на базе — очень дорогая операция. Например для того, чтобы получить все здания Москвы, потребуется около двух минут, а если учесть, что картограф обычно видит не один слой, а 10−20, то ему приходилось бы выпивать довольно-таки много кофе во время ожидания загрузки :)

Ещё один минус такого подхода — большие объёмы данных, которые тянет клиент с сервера. Например, здания Москвы весят более 20 мегабайт. База данных находится в нашем дата-центре в Новосибирске, а клиент может быть в Чили. Между Новосибирском и Чили пинг 300 мс. С такими показателями карта сразу перестаёт быть отзывчивой.

Растровые тайлы

Следующий вариант, который мы рассматривали, — это использование растровых тайлов. Ничего нового, очень популярный подход для загрузки определенного экстента карты. Весь мир бьётся на несколько уровней масштаба (zoom level), каждый из которых делится на равные квадраты. В итоге получаем пирамиду тайлов, покрывающих мир.

Так мы уходим от постоянных геопересечений при каждом запросе клиента. Кроме того, растровые картинки значительно легче сырых бинарных геометрий. Тайлы можно подготовить один раз, разложить по распределённым серверам и периодически актуализировать.

Вариант имеет право на существование, но нам он не подошёл, так как в любой момент каждый картограф может изменить:

Набор отображаемых слоёв или их порядок. Это значит, что пришлось бы иметь отдельные тайлы для зданий, рек, дорог и на клиенте городить логику по наложению тайлов друг на друга в нужном порядке.
Стилизацию любого слоя. То есть решить, что кварталы должны быть не коричневые, а зелёные с красной обводкой. Тогда нам пришлось бы перегенерировать все тайлы кварталов. Настройки стилизации индивидуальны.
Стилизацию для отдельных объектов по какому-либо условию. Например, сделать все дома выше пяти этажей красными. С растрами это не получится.

Зарождение векторных тайлов

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

Плюсы очевидны и покрывают все минусы, перечисленные в предыдущих подходах. Идея классная, но для её воплощения нам пришлось пройти достаточно долгий путь и столкнуться с рядом проблем.

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

В качестве проекции у нас используется EPSG:3395 – WGS84 / World Mercator. Именно на этой проекции мы и создаём тайловую сетку с несколькими уровнями. На первом уровне имеем одну квадратную ячейку, в которой находится весь мир, то есть она покрывает территорию размером примерно 40 000 на 40 000 км.

Тайловая сетка первого уровня

На втором уровне делим нашу ячейку на четыре. На следующем уровне каждую из полученных ячеек делим ещё на четыре и так далее.

Тайловая сетка второго уровня

Всего у нас 16 уровней. Таким образом на последнем уровне получаем ячейки, покрывающие территорию размером примерно 1 200 на 1 200 метров. Дальнейшее дробление никаких ощутимых выигрышей в размерах тайлов не даст, но приведёт к значительному увеличению количества тайлов.

Мы используем уникальные тайлы для дорог, зданий, рек, кварталов. Благодаря этому на клиент передаются только необходимые для отображения в данный момент типы тайлов.

У каждого тайла есть свой уникальный адрес вида: Тип_объекта/уровень_масштаба/строка/столбец/

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

Ещё один плюс векторных данных — мы можем показывать их на любом масштабе, который хочет пользователь, хоть один к одному. С растрами такого не сделать, там жёстко фиксированный набор масштабов, соответствующих выбранным для тайловой пирамиды уровнями.

Как устроена работа с тайлами в Fiji?

Схематично картина работы с тайлами у нас выглядит так:

Центральная БД — тут хранятся все наши объекты, создаваемые картографами. Используем MSSQL 2016. На данный момент в ней примерно 75 млн геообъектов и весит она 450 гигабайт.

Карт-сервер — «мозг» системы, через который проходят все бизнес-операции — создание, обновление, удаление объектов.

Тайл-серверы — лёгкие Java-приложения, которые могут быть развёрнуты практически на любой машине. Логика в них предельно проста — по запросу от клиента отдать необходимый тайл, если он уже есть. Если его нет, то создать новый, отдать клиенту и сохранить на будущее. Кроме того, нужно периодически обновлять имеющиеся тайлы по информации об измененных объектах, получаемой от карт-сервера.

В качестве хранилища тайлов используем PostgreSQL, отдельную базу для каждого сервера.

Тайл-серверы мы располагаем рядом с большими группами пользователей — европейская часть России, Новосибирск, Владивосток. Благодаря тому, что эти серверы независимы друг от друга, мы можем в любой момент исключить из раздачи или добавить новый сервер.

Клиенты — desktop-приложения, каждое из которых автоматически выбирает лучший для него тайл-сервер. Критерии отбора: скорость ответа и пропускная способность сети.

Тайлы в клиенте используются только для отображения и геокодинга. Геометрии из тайлов не подходят для редактирования, так как они могут быть сильно упрощены, либо обрезаны границами тайлов. Поэтому для редактирования мы просто получаем весь объект из БД по идентификатору.

Для отображения тайлов мы используем свой собственный рендер. Долгое время сидели на чужом платном, пробовали различные бесплатные варианты, но ни один из них не удовлетворил нашим потребностям. В итоге написали свой, который поддерживает отрисовку через DirectX и GDI+.

Оптимизация тайлов

Чем меньше весит тайл, тем быстрее он доходит до клиента. Мы использовали несколько оптимизаций, позволивших уменьшить вес тайлов:

Проекция WGS84 оперирует метрами, мы же ограничиваемся точностью в один сантиметр, поэтому можем работать с координатами как с целочисленными значениями. Поскольку геометрия объекта внутри тайла состоит из довольно близко расположенных между собой точек, то координаты этих точек выгоднее хранить не в абсолютном виде, а как смещения относительно предыдущей точки. В каждом тайле первая точка первого объекта хранится в абсолютных координатах, а все остальные — как смещение относительно предыдущей точки. Это позволяет уменьшить размер тайла в 8 раз!
Многие типы объектов нет смысла отображать на мелких масштабах, например, нет смысла показывать все здания, когда на экране мы видим страну. Для каждого типа объектов мы определили нижнюю границу видимости тайлов, чтобы не запрашивать их с клиента и, соответственно, не создавать на сервере.
На всех видимых уровнях, кроме последнего (шестнадцатого), используется простая генерализация. Представим, что максимальный масштаб тайла — изображение 256 на 256 пикселей. Из всех точек объекта, попавших в один и тот же пиксель, оставим одну. Результат сильно нарушит исходную геометрию — квадратный дом может превратиться в точку. Маловероятно, что картограф будет доволен результатом, не увидев честную негенерализованную геометрию при приближении один к одному.
Мы используем битовый флаг, когда геометрия объекта полностью покрывает тайл. Это актуально для больших объектов, покрывающих множество тайлов — районы, населённые пункты и, конечно же, страны.

Всегда ли это работает?

В идеальном мире — всегда. В реальности же геометрии не всегда хватает для полноценного отображения объекта. Например, картографу хочется увидеть все участки дороги, перекрытые на 9 Мая, или же просто названия улиц.

Для решения этой ситуации можно хранить в тайле вместе с геометрией всю атрибутивную информацию. Чаще всего это сильно избыточно: у одних только зданий может быть до двадцати атрибутов.

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

Мы решили делать помимо геометрических ещё и атрибутивные тайлы, для каждого атрибута — свой набор тайлов. Клиент сам определяет, тайлы каких атрибутов ему необходимы, и запрашивает их вместе с геометрическими.

Что дальше?

Мы решили множество нетривиальных задач, но ещё не все. Сейчас все силы сосредоточены на следующих проблемах:

Читайте также: