Comments 16
Эх, а могли бы взять $mol и получить куда более шустрые бесплатные карты на SVG, по которым можно даже рисовать.
Ну, может, у автора есть какая-то причина использовать именно такой стек. У меня вон недавно тоже возникла задача прикрутить карты к реакт-приложению. Взять по привычке Leaflet, прикрутил — возникла следующая задача: сделать карты трёхмерными. Вот тут-то и пришлось с мапбоксом связываться. Так что статья всё равно полезная — спасибо автору.
Спасибо за комментарий! Не слышал раньше про Leaflet. Кроме трехмерных карт, есть еще ограничения?
Тоже неделю назад прикручивал Mapbox, но к Vue. И тоже сначала взял Leaflet, но посмотрел, что именно при таком стеке и подложке от Mapbox, проще сразу взять их библиотеку. У каждого свои задачи, и иногда легче исходить из уже существующих инструментов.
Спасибо большое за комментарий! Изначально выбрали React для проекта по причине его популярности и имеющегося опыта у первых членов команды. $mol сейчас востребован у разработчиков? Не слышал про него уже несколько лет.
На mapbox выбор пал опять же из-за наличия опыта работы с ним, правда уже со стороны мобильной и бекенд команд. Очень привлекло, что есть собственный геокодер, но мы с ним настрадались, когда начали масштабировать проект на весь мир. Например, он никак не хотел работать в Грузии и Армении. Сейчас используем TomTom.
Mapbox шустрый, у нас возникают проблемы с производительностью, когда используем множество маркеров на карте. Но в документации приведены примеры как можно улучшить перформанс. Например, рисовать картинки напрямую в canvas, а не создавать для каждого маркера отдельный DOM элемент. В следующих статьях покажу примеры подобных проблем и возможные решения.
У $mol философия другая - прикладной разработчик не должен думать о перфомансе. Вот, пример со слоем с кучей кривых. А сам $mol живее всех живых.
Звучит привлекательно, а на деле в сравнении с Mapbox сырые.
Открываю. Приближаюсь, жду загрузки… Перемещаю карту — еле двигается. Немного поприближал — карта вообще развалилась. Может рисовалка хорошо работает? Также лагает. Если карту отключить, то ± рисовалка начинает работать лучше. С телефона вообще приближение сломано. Что будет если что-то своё на карту добавить, даже пробовать не хочется.
В общем Mapbox понадёжнее будет выбрать.
Что значит "развалилась"? Что значит "приближение сломано"?
Если приближать карту быстрее чем она отрисовывается — в какой-то момент наступает белый экран. Видимо, под "развалилась" понимается именно это.
развалилась
Медленно приблизил колёсиком и карта стала нечитаемой из-за белых полос(не квадратов, которые при загрузке новых областей бывают) и как будто случайных обрывков карты(т.е. не просто размытые части с малых зумов). По итогу оно починилось лишь перезагрузкой страницы
приближение сломано
Приближение двуми пальцами вообще не работало. Приближение одним — бешеными непредсказуемыми рывками приближало карту
Mapbox берёт данные из OSM
tiles бывают не только растровые, но векторные
Про системы координат вообще не слово, хотя бы сказали что используется epsg4326 и в чём отличие от epsg3857
Спасибо большое за комментарий!
Да, вы правы, статью было бы полезно дополнить информацией про разные системы координат. Судя документации, mapbox использует для отрисовки карты EPSG3857.
В статье была ссылка, где указаны источники данных. Да, данные в том числе OSM.
Да, возможно, стоит уделить больше внимания видам tiles(векторные и растровые).
Да, про это можно целую статью писать. Рисуют все в EPSG3857, а вот данные (GeoJson) в 4326. Из-за чего теоретически достаточно длинная линия из GeoJson должна быть кривой на карте. Но на это, конечно, практически все забивают. У полюсов тоже проблемы. Но это совсем другие вопросы, статья вполне хорошо рассказывает про JavaScript часть, а про картографию можно отдельно.
Советую использовать https://www.npmjs.com/package/react-map-gl вместо оригинального mapbox. Сокращает и делает читабельнее код для карт в реакт. Убер тоже использует этот пакет.
У нас на проекте сложные карты с кучей логики и этот подход помог нам сделать нашу жизнь легче :)
Прикладная архитектура карт в вебе на React и Mapbox. 1 часть — технологический стек