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

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

Растр, «псевдо 3D» и вектор

Крупные сервисы предлагают 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].

0
20 комментариев
Написать комментарий...
Слышный Влад

Комментарий недоступен

Ответить
Развернуть ветку
Юрий Б.
Ответить
Развернуть ветку
Слышный Влад

Комментарий недоступен

Ответить
Развернуть ветку
Лесной Грех

Ору

Ответить
Развернуть ветку
Никита Хисматов

Ах, GTA 6...

Ответить
Развернуть ветку
Ivan Rigovsky

О, прям как в Mapbox :) Молодцы

Ответить
Развернуть ветку
Reborn Soul

Вопрос к фронтэнд-господам: webgl и html 5 canvas это разные вещи? Чем отличаются, в чем плюсы минусы.

Ответить
Развернуть ветку
Sergey Kolomenkin
Автор

Наверное, тут самое правильное — не пытаться всё уместить в один ответ, а поделиться ссылкой.

Ответить
Развернуть ветку
Storm Warning

Здание похоже на общагу "Парус" в Томске от ТГУ

Ответить
Развернуть ветку
Sergey Kolomenkin
Автор

Наверное, это первый случай в истории, когда Burj Al Arab сравнили с общежитием «Парус» в Томске 🙂

Ответить
Развернуть ветку
Alexander Banschikov

Уважаемые! Поправьте уже баг в Firefox под Windows, которому не первый год. Если изменять масштаб карты колесом мыши, то всё ломается. Если менять масштаб при помощи интерфейсных кнопок +/−, всё работает. Если пользоваться другими браузерами — всё в порядке с колёсиком. А вот если пользоваться колёсиком в Firefox — проблема.

Ответить
Развернуть ветку
Sergey Kolomenkin
Автор

Не смогли поймать такую багу. Можете в личку скинуть сборку FF?

Ответить
Развернуть ветку
Bezhan Nazaralizoda

Скажите пожалуйста вы делаете такие же карты для любой страны и города под заказ индивидуально ?

Ответить
Развернуть ветку
Sergey Kolomenkin
Автор

Если вы хотите открыть 2ГИС в вашем городе, то напишите на [email protected] — ребята расскажут о возможностях. Если же карты нужны прям для индивидуального использования, то лучше написать на [email protected].

Ответить
Развернуть ветку
Михаил Беззубиков

Я чего-то не знаю про webgl, или это такая маркетинговая условность мол то был растр, но и это растр, но другой растр, пускай будет "вектор".
До этого же тоже был в сыром виде вектор, потом растр, теперь ведь ничего в этом плане не изменилось, просто растр происходит позже, на клиенте. Я без претензий, просто хочу разобраться.

Ответить
Развернуть ветку
Максим Морозов

Почему в Крыму ничего нет ?? Испугались санкций ?? Гугл, БукингКом, там работают - В топку Ваш Сервис...

Ответить
Развернуть ветку
Московский файл

Забавно, что все гифки про места и здания, которые большинству сравнить с реальностью будет заведомо затруднительно (не все там были) 🤔

Ответить
Развернуть ветку
Sergey Kolomenkin
Автор

Вы имеете в виду, что «возможно, автор немного привирает, что Дубай так выглядит» или «а так ли красив любой другой город?» 🙂

Ответить
Развернуть ветку
Московский файл

Нет, всё гораздо прозаичнее: серые российские реалии, очевидно, автора уже так достали, что он предпочёл рисовать яркие арабские 🙂

Ответить
Развернуть ветку
Sergey Kolomenkin
Автор

🙂
В России тоже много красивых достопримечательностей, но мы их и так постоянно видим на 2gis.ru. Вот и решил показать что-то другое.

Ответить
Развернуть ветку
Читать все 20 комментариев
null