Немного о красоте векторных карт

Если после прочтения заголовка вы подумали о контурных картах или новых банковских карточках, то разочарую вас. Пост о возможностях и плюсах векторных карт городов.

Крупные сервисы предлагают API как растровых, так и векторных карт.

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

Ещё бывает «псевдо-вектор» — когда на сервере из 3D-графики рендерятся растровые картинки-тайлы, которые отправляются пользователю. Благодаря привязке к координатам и JS-cкриптам, на этой карте можно кликать на объекты, чтобы узнать дополнительную информацию. Но на таких картах нельзя изменить угол наклона, повернуть их, настроить плавные перелёты и красивую анимацию.

Но всё это и and one more thing можно делать с векторными 3D-картами. Помимо уже перечисленных плюсов, векторные карты позволяют гибко настраивать внешний вид и дают возможность полетать по городу, как на квадрокоптере.

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

Один из вариантов визуализации векторных карт лежит в технологии WebGL. Он сложнее в разработке, но его возможности в прямом смысле позволяют крутить карту, как захочется. WebGL использует ресурсы видеокарты и позволяет быстро рисовать трёхмерные объекты из JavaScript'a прямо в браузере. Из-за этого карта плавнее меняет масштаб, смещается и позволяет создавать объекты, которые можно рассмотреть со всех сторон.

Мы в 2ГИС начали переходить на вектор в 2015 году. Сначала выпустили навигацию по Этажам, а позже и весь 2gis.ru для десктопов перевели на вектор. Сейчас же, мы считаем наши векторные карты, предоставляемые по JS API, одними из самых детальных для России и СНГ.

Кроме очевидной красоты, WebGL решает в кейсах, когда необходимо вынести дополнительную информацию — пины, цены, POI, полигоны или полилинии. При их большом количестве WebGL работает заметно быстрее.

API позволяет использовать карту в вебе и в мобильных приложениях во всех городах 2ГИС. Например, мы делали 3D-аркаду для браузера — писали о ней на Хабре. Если же говорить о сферах бизнеса, то самое очевидное, где такая карта принесёт пользу — это доставки и логистические компании, банки и компании с большой филиальной сетью.

Одними из первых нашу карту встроил в приложение сервис «Самокат»:

Чтобы красота карты не была просто для красоты, мы добавили инструменты для решения бизнес-задач: расставлять, подписывать и кластеризовать пины, отрисовывать свою геометрию, строить маршруты и ещё много разного.

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

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

Если хотите первыми узнать о релизе редактора стилей карты — напишите на [email protected].

#2ГИС