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

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

Растр, «псевдо 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 и многое другое.

Если хотите первыми узнать о релизе редактора стилей карты — напишите на content@2gis.ru.

{ "author_name": "Sergey Kolomenkin", "author_type": "self", "tags": ["2\u0433\u0438\u0441"], "comments": 19, "likes": 63, "favorites": 40, "is_advertisement": false, "subsite_label": "dev", "id": 180651, "is_wide": true, "is_ugc": true, "date": "Tue, 01 Dec 2020 08:19:33 +0300", "is_special": false }
0
19 комментариев
Популярные
По порядку
Написать комментарий...

Деревянный томагавк_два

5
Ответить

Деревянный томагавк_два

Юрий
5

А что тут не так собственно? ))

Ответить
3

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

Ответить
0

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

Ответить
1

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

Ответить
0

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

Ответить
1

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
0

Если вы хотите открыть 2ГИС в вашем городе, то напишите на franchisesales@2gis.ru — ребята расскажут о возможностях. Если же карты нужны прям для индивидуального использования, то лучше написать на content@2gis.ru.

Ответить
–2

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

Ответить

Мирный инструмент

–3

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

Ответить
0

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

Ответить

Мирный инструмент

Sergey
0

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

Ответить
0

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

Ответить

Комментарии

null