2 gis конструктор карт

Обновлено: 16.05.2024

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В разделе «Быстрый старт» вы уже могли попробовать создать карту. Здесь же рассмотрен этот процесс в деталях. А также освещены вопросы настройки параметров карты.

Загрузка библиотеки

Работа с картой возможна только после того, как будет загружена библиотека. Есть несколько способов это сделать. Начнем с простого.

Первый способ

Сперва подключаем код библиотеки:

Затем воспользуемся функцией DG.autoload , в которую помещаем код инициализации карты:

Именно такой способ рассматривался в разделе «Быстрый старт». Внутри себя эта функция добавляет обработчик на событие загрузки страницы.

Второй способ

Если первый способ не подходит, можно воспользоваться функцией DG.load . Ее можно вызвать именно в тот момент, когда карта станет нужна, а не только при загрузки страницы.

Плюс, если на странице подключена библиотека jQuery (для определенности), можно ускорить загрузку карты, если вызывать DG.load с помощью метода JQuery.ready :

Правда, в случае использования DG.load нужно изменить способ загрузки библиотеки — добавить GET-параметр loadByRequire :

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

Версия библиотеки

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

Первая цифра увеличивается при радикальном изменении API. Вторая - при нарушении обратной совместимости со старыми версиями.

Для подключения конкретной версии библиотеки ее следует указать при подключении. Например:

Указывать версию библиотеки обязательно.

Инициализация карты

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

Во время создания экземпляра карты нужно связать его с контейнерным HTML-элементом. Первый способ это сделать — передать в конструктор карты идентификатор элемента. В нашем случае:

Второй способ, более сложный, — передать в конструктор карты DOMElement:

Первоначальная настройка карты

Центр карты

Теперь нужно установить центр карты. Задать местоположение карты можно создав объект DG.GeoPoint , конструктор которого принимает долготу и широту точки соответственно.

Пример для Новосибирска (долгота: ~82.97, широта: ~55.02):

Чтобы установить центр карты вызываем метод карты setCenter :

Или одной строчкой:

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

Масштаб (zoom)

Установить масштаб карты можно с помощью метода карты setZoom :

Что означает коэффициент масштабирования, который мы передаем этому методу? Это целое число в интервале от 1-го до максимально допустимого уровня зума. Максимально допустимый уровень зума зависит от города, отображаемого на карте. Вне городов, покрытых 2ГИС, максимальный уровень зума составляет 13. Для большинства городов России максимальный уровень зума равен 17. Чем больше число, тем ближе мы приближаемся к поверхности. Для корректного рассчета максимально допустимого уровня зума, необходимо предварительно установить центр карты.

Управление масштабом

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

В разделе руководства «Элементы управления» мы подробно рассмотрим вопрос работы элементов.

Кнопка разворачивания карты на весь экран браузера

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

Данный элемент управления создаётся автоматически при инициализации карты и не должен создаваться вручную. Доступ к элементу управления можно получить через свойство объекта карты fullscreen, например: myMap.fullscreen .

Ниже мы рассмотрим несколько примеров.

Для наглядности предположим, что myMap — объект карты.

Включение кнопки разворачивания карты на весь экран браузера:

Отключение кнопки разворачивания карты на весь экран браузера:

Геокодирование по клику

В API карт встроена функция геокодирования, которая по умолчанию включена. Используя данную функцию, при кликах мышки по карте будет появляться балун с информацией об объекте, а периметр объекта будет подсвечиваться (периметры домов не подсвечиваются). Дополнительно можно изменить стилистику подсветки периметра объекта.

За обработку геокодированиея по клику отвечает класс геокликера. Данный класс создаётся автоматически при инициализации карты и не должен создаваться вручную. Доступ к классу можно получить через свойство объекта карты geoclicker, например: myMap.geoclicker .

Ниже мы рассмотрим несколько примеров.

Для наглядности предположим, что myMap — объект карты.

Включение функции геокодирования:

Отключение функции геокодирования:

Стилизация подсвечиваемой области:

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

Получение текущего стиля подсвечиваемой области:

Класс карты DG.Map

Для наглядности допустим, что myMap — объект карты.

Конструктор

Имя Тип Обязательный Описание
div String | DOMElement Да Карта размещается внутри контейнерного HTML-элемента, внутри которого будет показываться карта. Параметр может принимать либо идентификатор карты, либо сам DOM-элемент.

Свойства

Менеджер маркеров

Тип Описание
DG.Markers Менеджер маркеров. Экземпляр класса DG.Markers .

Менеджер балунов

Тип Описание
DG.Balloons Менеджер балунов. Экземпляр класса DG.Balloons .

Менеджер геометрий

Тип Описание
DG.Geometries Менеджер геометрий. Экземпляр класса DG.Geometries .

Менеджер элементов управления

Тип Описание
DG.Controls Менеджер элементов управления. Экземпляр класса DG.Controls .

Преобразователь координат

Тип Описание
DG.Converter Преобразователь координат. Экземпляр класса DG.Converter .

Методы

Удалить карту

Уничтожает все объекты, которые содержит карта. Чтобы уничтожить сам объект myMap после вызова данного метода рекомендуется присвоить null объекту карты:

Добавить обработчик события

Функция-обработчик, вызываемая при возникновении события определенного типа. Функция вызывается с одним параметром callback(myEvent) .

Параметр myEvent может быть объектом различных классов. Соответствия между типом события и классом события myEvent перечислены в таблице «Тип события — Класс — Условие».

Если на события одного типа назначено несколько функций-обработчиков путем нескольких вызовов myMap.addEventListener , то они вызываются в порядке добавления. При этом, если одна из функций-обработчиков вернет true , то остальные функции-обработчики дальше выполняться не будут.

Тип Описание
DG.Observer Объект с помощью которого, можно управлять обработчиком.

Все особенности работы с событиями рассмотрены в разделе документации «События».

Таблица «Тип события — Класс — Условие»:

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

Тип Описание
Boolean Включена ли возможность изменения масштаба карты по двойному клику мыши

Отключить возможность изменения масштаба карты при прокрутке колесика мыши
Включить возможность изменения масштаба карты при прокрутке колесика мыши
Проверить включена ли возможность изменения масштаба карты при прокрутке колесика мыши

Тип Описание
Boolean Включена ли возможность изменения масштаба карты при прокрутке колесика мыши.

Отключить возможность перетаскивания карты с помощью мыши
Включить возможность перетаскивания карты с помощью мыши
Проверить включена ли возможность перетаскивания карты с помощью мыши

Тип Описание
Boolean Включена ли возможность перетаскивания карты с помощью мыши

Отключить возможность выделения области карты правой кнопкой
Включить возможность выделения области карты правой кнопкой
Проверить включена ли возможность выделения области карты правой кнопкой

Тип Описание
Boolean Включена ли возможность выделения области карты правой кнопкой мыши

Получить контейнер карты

Тип Описание
DOMElement Контейнерный DOM-элемент, в котором размещается карта.

Получить размер контейнера карты

Тип Описание
DG.Size Объект DG.Size , соответствующий размеру контейнерного DOM-элементу, в котором размещается карта.

Получить идентификатор контейнера карты

Тип Описание
String Свойство «id» контейнерного DOM-элемента, в котором размещается карта.

Перерисовать карту

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

Переместить карту на север

Имя Тип Обязательный Описание
moveStep Number Да Шаг, на сколько пикселей сместить карту на север.

Переместить карту на юг

Имя Тип Обязательный Описание
moveStep Number Да Шаг, на сколько пикселей сместить карту на юг.

Переместить карту на запад

Имя Тип Обязательный Описание
moveStep Number Да Шаг, на сколько пикселей сместить карту на запад.

Переместить карту на восток

Имя Тип Обязательный Описание
moveStep Number Да Шаг, на сколько пикселей сместить карту на восток.

Получить максимальный zoom

Тип Описание
Number Максимально возможный коэффициент масштабирования (zoom).

Получить минимальный zoom

Тип Описание
Number Минимально возможный коэффициент масштабирования (zoom).

Получить текущий zoom

Тип Описание
Number Текущий коэффициент масштабирования (zoom).

Установить максимальный zoom

Имя Тип Обязательный Описание
maxZoom Number Да Максимально возможный коэффициент масштабирования(zoom). Максимальное допустимое значение: 18.

Установить минимальный zoom

Имя Тип Обязательный Описание
minZoom Number Да Минимально возможный коэффициент масштабирования(zoom). Минимальное допустимое значение: 1.

Установить текущий zoom

Имя Тип Обязательный Описание
zoom Number Да Текущий коэффициент масштабирования (zoom).

Увеличить zoom на один уровень
Уменьшить zoom на один уровень
Изменить zoom на заданную величину

Имя Тип Обязательный Описание
zoomDiff Number Да Изменяет коэффициент масштабирования(zoom) на определенную величину. Если параметр положительный, увеличиаем zoom , иначе — уменьшаем.

Получить текущий центр карты

Тип Описание
DG.GeoPoint Географическое положение центра карты.

Установить центр карты

Имя Тип Обязательный Описание
center DG.GeoPoint Да Географическое положение центра карты.
zoomLevel Number Нет Коэффициент масштабирования карты (zoom).

Получить видимые границы карты

Тип Описание
DG.Bounds Объект DG.Bounds , соответствующий видимым границам карты.

Установить видимые границы карты

Имя Тип Обязательный Описание
bounds DG.Bounds Да Объект DG.Bounds , соответствующий видимым границам карты.

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

Установить ограничения на границы карты

Изменять ли видимые границы карты, чтобы они соответствовали ограничениям bounds . Если isChangePosition не указан или равен false , то видимые границы не меняются, и пользователь останется в том же положении на карте. Если isChangePosition равен true , видимые границы карты меняются, чтобы вписать заданный bounds .

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

Установить курсор

Позволяет добавлять один и больше курсоров на карту. Последний добавленный делается активным.

Имя Тип Обязательный Описание
cursorType String Да Одна из констант класса DG.Cursor
Открыть пример в новом окне

Удалить курсор

Удаляет курсор из карты. Если курсор был активным, то устанавливает предыдущий активным.

Имя Тип Обязательный Описание
cursorType String Да Одна из констант класса DG.Cursor
Открыть пример в новом окне

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

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

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

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


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


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


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

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


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


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

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


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

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


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

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

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

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


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

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


Продуктами 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 Мая, или же просто названия улиц.

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

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

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

Что дальше?

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

Мы рассказали про новый 2ГИС почти всё. Точнее, почти обо всём, с чем сталкивается пользователь. Настало время рассказать о том, что у него “под капотом”. Угадали, речь об API 2ГИС.

Если вы пользовались новым 2ГИС с момента его появления, вы уже видели 2GIS API 2.0 в деле. Сегодня же он вышел из статуса беты и стал доступен всем желающим. Отдельно хотим поблагодарить тех, кто участвовал в тестировании: ребята, спасибо, вы помогли сделать продукт именно таким, каким он получился. То есть более, чем неплохим.

Если вам не терпится попробовать новый API, то посмотрите сюда. Те, кто любит не только смотреть, но и читать, загляните под кат.



Что внутри?

API 2.0 основан на open-source библиотеке Leaflet. Она проста, быстра и активно развивается. Количество кода заметно сократилось, без какого-либо ущерба для функциональности.

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


Изменения в лучшую сторону видны не только разработчикам, но и пользователям. Анимации при перемещении или масштабировании карты стали красивыми и плавными.

Также в API 2.0 появились новые базовые функции, которые отсутствовали в первой версии — от возможности указать HTML-код вместо картинки маркера и до чтения данных в формате GeoJSON.

Дизайн

Внешний вид продукта для нас важен не менее точности и полноты информации. А она очень для нас важна.

Поэтому мы прорисовали карты вплоть до мельчайших подробностей. Смоделировали известные здания в 3D. Подобрали цвета так, чтобы акцентировать внимание на самом нужном, в зависимости от выбранного масштаба.

И сделали два цветовых решения интерфейса: темное и светлое. Вам остается лишь выбрать то, которое лучше вписывается в дизайн вашего сайта.

Выбор темы оформления осуществляется на этапе подключения API при помощи параметра skin:




Модульность

Бывает, что для решения задачи все функции API не требуются. Поэтому мы сделали новый API модульным. Мы предлагаем два готовых пакета — full и basic.

Пакет basic содержит в себе базовые функции:

— карта;
— маркеры;
— балуны;
— растровые слои;
— GeoJSON-слой;
— геометрии;
— группы;
— контрол полноэкранного режима;
— масштабная линейка.

Пакет full дополнительно включает в себя:

— подсказки;
— линейку измерения расстояний;
— контрол геолокации;
— функцию для работы с Ajax;
— класс для работы с WKT-форматом;
— геокликер.

Но если вам нужен уникальный набор функций, вы можете сделать сборку под свои нужды.

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

Легче, проще, быстрее

Весь JS- и CSS-код новой версии API в два раза меньше, чем у старой. Это кардинально ускорило загрузку страниц с картой:

Загрузчик (КБ) JavaScript-код (КБ) CSS-код (КБ)
API 1.0 1.9 671 59.0
API 2.0 (пакет Full) 2.4 377 44.9
API 2.0 (пакет Basic) 2.4 214 24.9

Данные приведены для браузера Google Chrome. CSS-код API карт 2.0 также включает в себя изображения, закодированные в base64.

Поддержка устройств и браузеров

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

Полноэкранный режим, который особенно полезен на небольших экранах, работает с использованием fullscreen API (в тех браузерах, где это возможно). А позиции элементов управления подстраиваются под тип устройства, чтобы на них было удобно нажимать:


Геокликер и входы в здания

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


Дальше, можно посмотреть подробную информацию о каждой из них:


Но мы пошли еще дальше. Теперь 2ГИС помогает пользователю не просто найти организацию, но и попасть в нее. Наши сотрудники обошли более 1 млн компаний и узнали, где находятся входы в них. Даже такие:


Открытость

2ГИС поддерживает движение Open Source. Разработчикам должен прийтись по вкусу факт, что мы открыли исходный код API карт. Это значит, что любой может легко изучить его и разработать собственный модуль.

Нет необходимости дожидаться исправления той или иной ошибки в коде или документации: можно прислать pull request, мы его рассмотрим и примем. Весь код API карт доступен на GitHub.

Качество данных

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

Примеры использования


Новой версией API уже воспользовались первые партнеры. Формально, наш онлайновый 2ГИС — тоже один из них. Попасть в список партнеров можете и вы — ждем вас тут.

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