Немного о красоте векторных карт
Если после прочтения заголовка вы подумали о контурных картах или новых банковских карточках, то разочарую вас. Пост о возможностях и плюсах векторных карт городов.
Растр, «псевдо 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].
Комментарий недоступен
Комментарий недоступен
Ору
Ах, GTA 6...
О, прям как в Mapbox :) Молодцы
Вопрос к фронтэнд-господам: webgl и html 5 canvas это разные вещи? Чем отличаются, в чем плюсы минусы.
Наверное, тут самое правильное — не пытаться всё уместить в один ответ, а поделиться ссылкой.
Здание похоже на общагу "Парус" в Томске от ТГУ
Наверное, это первый случай в истории, когда Burj Al Arab сравнили с общежитием «Парус» в Томске 🙂
Уважаемые! Поправьте уже баг в Firefox под Windows, которому не первый год. Если изменять масштаб карты колесом мыши, то всё ломается. Если менять масштаб при помощи интерфейсных кнопок +/−, всё работает. Если пользоваться другими браузерами — всё в порядке с колёсиком. А вот если пользоваться колёсиком в Firefox — проблема.
Не смогли поймать такую багу. Можете в личку скинуть сборку FF?
Скажите пожалуйста вы делаете такие же карты для любой страны и города под заказ индивидуально ?
Если вы хотите открыть 2ГИС в вашем городе, то напишите на [email protected] — ребята расскажут о возможностях. Если же карты нужны прям для индивидуального использования, то лучше написать на [email protected].
Я чего-то не знаю про webgl, или это такая маркетинговая условность мол то был растр, но и это растр, но другой растр, пускай будет "вектор".
До этого же тоже был в сыром виде вектор, потом растр, теперь ведь ничего в этом плане не изменилось, просто растр происходит позже, на клиенте. Я без претензий, просто хочу разобраться.
Почему в Крыму ничего нет ?? Испугались санкций ?? Гугл, БукингКом, там работают - В топку Ваш Сервис...
Забавно, что все гифки про места и здания, которые большинству сравнить с реальностью будет заведомо затруднительно (не все там были) 🤔
Вы имеете в виду, что «возможно, автор немного привирает, что Дубай так выглядит» или «а так ли красив любой другой город?» 🙂
Нет, всё гораздо прозаичнее: серые российские реалии, очевидно, автора уже так достали, что он предпочёл рисовать яркие арабские 🙂
🙂
В России тоже много красивых достопримечательностей, но мы их и так постоянно видим на 2gis.ru. Вот и решил показать что-то другое.