IT-инфраструктура для бизнеса и творчества

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

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

Растр, «псевдо 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": 20, "likes": 64, "favorites": 41, "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 }
(function () { let cdnUrl = `https://specialsf378ef5-a.akamaihd.net/SelectelBranding/images/` let previousArticleNumber = null let currentArticleNumber = 0 let platform = 'Desktop' let articles = [ // { // name: 'camera', // url: `${cdnUrl}CameraCat`, // text: 'умную камеру для\u00A0наблюдения за\u00A0котиками', // link: '1', // num: 3 // }, { name: 'chill', url: `${cdnUrl}ChillCat`, text: 'трекер, который подскажет, когда пора отдохнуть', link: 'https://vc.ru/promo/288561-eye-tracker', num: 1 }, { name: 'cloud', url: `${cdnUrl}CloudCat`, text: 'котика: даёшь ему «пять», а\u00A0он делает бэкап в облако', link: 'https://vc.ru/dev/294799-maneki-neko', num: 2 } ] let buttonCycle = document.querySelector('.button--cycle') let buttonChoose = document.querySelector('.button--choose') let buttonMobile = document.querySelector('.button--mobile') let textField = document.querySelector('.selectel-footer-subtitle') let imageAgent = document.querySelector('.image--agent') let banner = document.querySelector('.selectel-footer') buttonCycle.addEventListener('click', cycleClick) buttonChoose.addEventListener('click', () => sendEvent(`Promo ${articles[currentArticleNumber].num} Left`, 'Click')) buttonMobile.addEventListener('click', () => sendEvent(`Promo ${articles[currentArticleNumber].num} Left`, 'Click')) let media = window.matchMedia("(max-width: 570px)") media.addEventListener('change', matchMedia) function matchMedia() { if (media.matches) { platform = 'Mobile' } else { platform = 'Desktop' } update() } matchMedia() function cycleClick(event) { sendEvent(`Promo ${articles[currentArticleNumber].num} Right`, 'Click') if (event) { event.preventDefault() event.stopPropagation() } window.open('https://vc.ru/tag/selectelDIY', '_blank') //cycle(event) } function cycle(event) { // incrementArticleNumber() textField.innerHTML = generatedText() imageAgent.src = articles[currentArticleNumber].url + platform + '.svg?3' imageAgent.setAttribute("class", "") imageAgent.classList.add('image--agent', articles[currentArticleNumber].name) banner.href = articles[currentArticleNumber].link } function update() { banner.href = articles[currentArticleNumber].link imageAgent.src = articles[currentArticleNumber].url + platform + '.svg' textField.innerHTML = generatedText() } function incrementArticleNumber() { previousArticleNumber = currentArticleNumber if (currentArticleNumber >= articles.length - 1) { currentArticleNumber = 0 } else { currentArticleNumber++ } } const sendEvent = (label, action = 'Click') => { const value = `SelectelDIY — loc: Footer — ${label} — ${action}`; if (window.dataLayer !== undefined) { window.dataLayer.push({ event: 'data_event', data_description: value, }); } }; function generatedText() { let defaultText if (platform === 'Desktop') { defaultText = `Мы тут собрали %text%. Хотите научим?` } else { defaultText = `Мы тут собрали %text%.` } return defaultText.replace('%text%', articles[currentArticleNumber].text) } function getRandom(min, max) { min = Math.ceil(min) max = Math.floor(max) return Math.floor(Math.random() * (max - min + 1)) + min } (function create() { currentArticleNumber = getRandom(0, articles.length - 1) cycle() let page = document.querySelector('.page--entry') if (page) { function insertAfter() { let parents = page.querySelectorAll('[data-id="7"]') let referenceNode = parents[0] referenceNode.parentNode.insertBefore(banner, referenceNode.nextSibling); loaded() } setTimeout(() => insertAfter(), 0) } }()) function loaded() { banner.classList.add('loaded') } loadImages([ `${cdnUrl}CameraCatDesktop.svg`, `${cdnUrl}ChillCatDesktop.svg`, `${cdnUrl}CloudCatDesktop.svg`, `${cdnUrl}CameraCatMobile.svg`, `${cdnUrl}ChillCatMobile.svg`, `${cdnUrl}CloudCatMobile.svg?3`, ]) function loadImages(urls) { return Promise.all(urls.map(function (url) { return new Promise(function (resolve) { var img = document.createElement('img'); img.onload = resolve; img.onerror = resolve; img.src = url; }); })); } }())
0
20 комментариев
Популярные
По порядку
Написать комментарий...
Дежурный Артем

Комментарий удален по просьбе пользователя

5
Дежурный Артем

Комментарий удален по просьбе пользователя

5

Ах, GTA 6...

0

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

3

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

0

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

2

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

0

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

1

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

0

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

0

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

0

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

0

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

0

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

–2
Участковый корабль

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

–3

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

0
Участковый корабль

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

0

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

0
Читать все 20 комментариев
Спонсорство конкурса по международному коммерческому арбитражу под эгидой ВАВТ

Юридическая фирма «Надмитов, Иванов и Партнёры» выступила спонсором VIII Студенческого конкурса по международному коммерческому арбитражу ВАВТ 2021 «Международная купля-продажа», который прошёл под эгидой Всероссийской академии внешней торговли Министерства экономического развития РФ (ВАВТ МЭР РФ) с 14 по 15 октября 2021 года.

В Москве обязали компании перевести на удалёнку 30% сотрудников с 25 октября по 25 февраля Статьи редакции

И всех сотрудников старше 60 лет и страдающих хроническими заболеваниями.

Кейс: ROI 1700% на перепродаже дроп-домена

Хочу поделиться кейсом по поиску и перепродаже дроп-домена с ROI 1700%. Идея была следующая: можно покупать жирные дропнутые домены в бане РКН, выводить их из блеклиста и перепродавать их в разы дороже. Хочу поделиться деталями одной из успешных сделок по этой схеме.

Вице-премьер Татьяна Голикова предложила ввести нерабочие дни с 30 октября по 7 ноября Статьи редакции

В некоторых регионах — с 23 октября.

«Что вы нам предлагаете. Это всё шарлатанство. Ничего не сработает». Как УБРиР меняет подход к технологиям изнутри
Защита интеллектуальной собственности – это защита инвестиций

На «Неделях российского бизнеса» прошел Форум по креативным индустриям и интеллектуальной собственности, где представители власти, бизнеса и институтов развития обсудили проблемы защиты интеллектуальной собственности в России, введения третейских судов и регулирования оборота продуктов, созданных искусственным интеллектом.

«Я не продаю лапшу быстрого приготовления — я даю людям время» Статьи редакции

В послевоенной Японии Момофоку Андо придумал наборы из высушённой вермишели и пакетиков специй. Спустя десятилетия его компания Nissin выручает $4,2 млрд в год.

Как я умоляю Samsung уже два месяца взять мои 160 000 рублей

11 августа 2021 смотрю презентацию Samsung Galaxy Z Fold3 5G, после чего решаю что надо брать, ибо девайс интересный, а мне давно пора было поменять свой рабочий телефон. OMG, давно я так не ошибался…

1₽ на хорошее дело: как работает Добрая подписка от Альфа-Банка
До AI Journey осталось меньше месяца. Рассказываем, что будет на конференции

Совсем скоро стартует AI Journey — международная конференция по искусственному интеллекту и анализу данных. Её проводит Сбер, и в этом году она пройдёт в онлайн-формате. Зарегистрироваться можно уже сейчас, а мы пока расскажем, почему мероприятие будет интересно всем: от учёных до школьников.

null