Mapbox GL JS против Mapbox.js

Из глоссария Mapbox, Mapbox.js

Mapbox.js - это библиотека JavaScript, которая позволяет добавить интерактивную карту на свой веб-сайт. Это плагин для Leaflet и бесплатная библиотека с открытым исходным кодом.

и Mapbox GL JS

Mapbox GL JS - это библиотека JavaScript, которая использует Mapbox GL для визуализации интерактивных карт. Это бесплатная библиотека с открытым исходным кодом. Вы можете добавить стиль Mapbox или собственный стиль, созданный с помощью Mapbox Studio, в свое приложение Mapbox GL JS.

и из этого ответа

Стили Mapbox предназначены для использования с Mapbox GL и встроенными SDK для iOS и Android. Вы не можете использовать их с классическим Mapbox JS. Mapbox JS поддерживает растровые плитки, вы не можете стилизовать их. Это просто изображения. Mapbox GL и собственный SDK (могут) использовать векторные плитки, и они стилизованы.

Я считаю, что могу использовать mapbox.js как замену источникам leaflet css и js, но могу ли я сделать то же самое с mapbox-gl.js?
Какие еще различия существуют между двумя библиотеками?


person raphael    schedule 28.01.2016    source источник


Ответы (8)


Насколько мне известно, Mapbox GL JS станет заменой текущей версии Mapbox JS, которая использует Leaflet в фоновом режиме. Leaflet делает многое, GL может делать и многое другое. Но не все. То же самое и наоборот. GL может делать то, чего не может Leaflet. Главное в GL заключается в том, что он построен на основе векторных плиток с использованием WebGL. Из вводной статьи:

Представляем Mapbox GL JS - новую быструю и мощную систему для веб-карт. Mapbox GL JS - это средство визуализации на стороне клиента, поэтому оно использует JavaScript и WebGL для динамического рисования данных со скоростью и плавностью видеоигры. Вместо того, чтобы фиксировать стили и уровни масштабирования на уровне сервера, Mapbox GL использует возможности JavaScript, позволяя создавать динамические стили и интерактивность произвольной формы. Векторные карты - это следующая эволюция, и мы очень рады видеть, что разработчики создают с помощью этого фреймворка.

Если вы действительно хотите сравнить эти два варианта, мне очень жаль, что его нет, насколько мне известно. Слишком много вещей, которые нужно упомянуть / учитывать при сравнении, поэтому лучше всего сделать это самостоятельно, исходя из собственных требований. Хорошим началом было бы сравнение примеров для каждого фреймворка, потому что это дает хорошее представление о том, на что способны оба:

После этого вы можете сравнить их API:

Следует иметь в виду, что GL - это новинка бренда, и, как все мы, разработчики, знаем, это имеет свою цену. Некоторые изломы не устранены. Что касается Leaflet, он очень зрелый, широко используется и очень хорошо протестирован / зарекомендовал себя. Если вы хотите узнать, какие проблемы существуют в настоящее время с GL, вы можете взглянуть на них на Github, в репозитории:

Надеюсь, что это поможет, удачи!

person iH8    schedule 28.01.2016
comment
Немного поигравшись, я бы выделил, что две библиотеки несовместимы друг с другом. Например, я не могу использовать mapbox.js, чтобы добавить GeoJSON на карту, созданную с помощью mapbox-gl.js - person raphael; 28.01.2016
comment
Оба совместимы со спецификацией GeoJSON? Mapbox.js с использованием GeoJSON: mapbox.com/mapbox.js /example/v1.0.0/load-geojson Mapbox.GL.js с использованием GeoJSON: mapbox.com/mapbox-gl-js/example/geojson-markers Я не понимаю, что вы имеете в виду, используя mapbox.js на карте, созданной gl. Конечно, вы не можете смешивать две платформы, их API совершенно разные. - person iH8; 28.01.2016
comment
Leaflet 1.0 может дать Mapbox GL возможность заработать деньги: leafletjs. ru / 2015/07/15 / leaflet-1.0-beta1-Release.html - person Tony Laidig; 29.01.2016
comment
@ iH8, смешение фреймворков было для меня интуитивно неочевидным из документации mapbox. Я должен был упомянуть в своем вопросе, что я работаю с существующим проектом листовки, но пытался включить настраиваемую базовую карту, поэтому можно было использовать либо Mapbox Studio Classic, либо онлайн-приложение, что привело к необходимости их соответствующих фреймворков. . - person raphael; 29.01.2016

Ответ iH8 отличный, добавлю немного подробностей:

Для базовых карт Mapbox.js отображает файлы растровых листов (PNG и JPEG) и отображает их с помощью HTML и CSS. Mapbox GL JS отображает векторные плитки (модные буферы протоколов) и отображает их с помощью WebGL. Он также может отображать растровые плитки, но это не главное.

И Mapbox.js, и Mapbox GL JS поддерживают наложения, такие как слои и маркеры GeoJSON. Оба имеют открытый исходный код, с похожими лицензиями и несколькими участниками.

Стили слоев Mapbox.js хранятся на серверах и обрабатываются с помощью серверной технологии. Стили для Mapbox GL JS динамически отображаются в браузере, поэтому их можно изменять в реальном времени.

Leaflet имеет более широкую поддержку браузера за счет некоторых вещей, которые некоторые браузеры не могут поддерживать, например, наклона и поворота карты. Mapbox GL поддерживает браузеры, поддерживающие WebGL, и лучше всего работает на новых компьютерах. У него есть собственная версия под названием Mapbox GL Native, которая действительно хорошо работает на всех мобильных телефонах.

Несмотря на названия, вы можете использовать Leaflet с Mapbox и Mapbox.js и Mapbox GL со стилями, отличными от Mapbox.

person tmcw    schedule 29.01.2016
comment
Из Leaflet 1.0-beta1 (14 июля 2015 г.), поддерживается нецелочисленное масштабирование - person Jieter; 01.06.2016

В настоящее время я работаю над переключением сложной системы карт на основе Leaflet на Mapbox GL, и я бы сказал, что одно заметное отличие, которое я обнаружил, заключается в инструментах рисования и обработке слоев GeoJSON. Leaflet имеет набор инструментов рисования, которые включают нестандартные GeoJSON, такие как маркеры, прямоугольники и круги. Разработчики Mapbox GL приняли решение сосредоточиться на собственном GeoJSON, что означает, что нет готовой поддержки рисования / рендеринга кругов и прямоугольников (например, в Mapbox GL нет ничего похожего на L.Circle); есть маркер, но чтобы он выглядел как традиционный маркер Leaflet, необходимо создать свои собственные спрайты или использовать SVG. Все это по-прежнему возможно, но со стороны разработчика требуется немного больше настроек, чем в Leaflet.

Кроме того, большинство слоев GL Mapbox визуализируются как элементы холста. Это означает, что, в отличие от Leaflet, нет HTML-элементов, связанных с вашими различными слоями. Это усложняет нацеливание на элементы с помощью CSS, если это необходимо. Единственное исключение, которое я нашел здесь, - это маркеры, которые отображаются как отдельные элементы HTML.

При этом я смог почти полностью воспроизвести существующие инструменты рисования и стили визуализации с некоторыми небольшими отличиями. Если вам нужны настраиваемые инструменты рисования, Mapbox GL может вас разочаровать.

Поддержка браузера также упоминалась как потенциальная проблема. Mapbox GL может запускаться в любом браузере, поддерживающем WebGL. Сюда входят все основные браузеры. Единственным значительным набором браузеров, который не поддерживал Mapbox GL, был IE10 или более ранний, но наша аналитика показала, что почти никто из наших пользователей до сих пор не использовал эти браузеры, поэтому мы официально отказались от их поддержки. Очевидно, ваш пробег может отличаться.

В целом, я доволен переключением, потому что считаю, что с Mapbox GL проще работать и он обеспечивает лучший пользовательский интерфейс.

person Ryan Hamley    schedule 18.01.2018
comment
Добавляя к этому ответу, если вы хотите стилизовать границу для слоя, нет возможности сделать это. Вам нужно создать еще один слой только для границы. - person Pankaj; 26.02.2020

Обычно Leafletjs и Mapbox.js одинаковы, но у Mapbox.js есть плагины и расширения, которые обертывают Leaflet и связываются со службами Mapbox (например, с указаниями). Подобные плагины и функции существуют от других компаний или продуктов, и Leaflet может использовать их в дополнение или вместо Mapbox. Библиотеки на основе Leaflet обычно лучше поддерживают устаревшие браузеры, используют растровые плитки и т. Д. При этом добавляются упомянутые функции, которые включают современные функции, такие как векторные плитки (pbf, mvt и т. Д.) И различные средства визуализации (включая webgl).

Mapbox-gl-js и собственный вариант mapbox-gl - это библиотеки с открытым исходным кодом, которые высокопроизводительны, оптимизированы для работы с векторными фрагментами (pbf, mvt) и webgl для рендеринга в элемент холста (для варианта -js). Он относительно новый, поэтому некоторые вещи, которые легко сделать с помощью Leaflet, могут быть другими или сложными (по состоянию на апрель 2016 г.), которые говорят о том, что они очень похожи и работают достаточно хорошо, в том числе на мобильных устройствах (из последние несколько лет, например iphone 5s). Примером случайной причуды является то, что надписи на иврите в Израиле, которые читаются справа налево, перевернуты и выглядят как ерунда (это открытый вопрос, который решается).

Если отказ от поддержки старых браузеров - это нормально, хорошим выбором может стать Mapbox-gl (-js). Судя по моему ограниченному опыту (проработав с ним несколько месяцев), у него лучший опыт взаимодействия с пользователем и разработчиком в целом, и Mapbox был последовательным в своей разработке / выводе. У меня меньше опыта работы с их платными услугами, и неясно, насколько тесно их библиотеки будут связаны с этими услугами. Для мобильного проекта я перешел на mapbox-gl-js после просмотра Google Maps, Leaflet v0.7 и v1, и, похоже, это было хорошее решение.

Я начал использовать Mapbox-gl-js с предыдущим опытом работы с Leaflet и знанием HTML / CSS / JS и обнаружил учебник и примеры, полезные для понимания Технические подробности. Включая стиль карты с помощью JSON (не CSS). Также внимательно ознакомьтесь с условиями обслуживания, это было важным положительным отличием, особенно по сравнению с Google. Сервисы Mapbox не имеют наиболее надежного покрытия за пределами США, поэтому обязательно дайте и этот обзор (по моему опыту, обычно доступен другой поставщик, поэтому это не обязательно влияет на решение о внедрении библиотек, они просто очень тесно связаны с функциями или стандартами Mapbox).

person jimmont    schedule 19.04.2016

Для разработчиков, которые имеют опыт создания веб-карт с помощью Mapbox.js или Leaflet, переключение старых проектов на использование Mapbox GL JS может значительно улучшить производительность существующих приложений. Mapbox GL JS использует рендеринг на стороне клиента WebGL для отображения ваших карт, что приводит к более быстрой загрузке, более плавным переходам при масштабировании или панорамировании и большей гибкости для изменения данных и стилей карты на лету. Благодаря этим улучшениям переход на Mapbox GL JS стоит затраченных усилий, поэтому недавно я преобразовал демонстрацию Peter’s Courier из Mapbox.js в GL.

person sagar    schedule 01.03.2019

Мы использовали Mapbox-gl-js более года после перехода с Leafletjs. Мы перешли, потому что хотели воспользоваться функцией векторных плиток. В целом нам понравился Mapbox-gl-js, хотя мы столкнулись с парой ошибок.

Мы столкнулись с некоторыми проблемами с памятью при использовании Mapbox-gl-js (из-за того, что WebGL сильно мешает работе), особенно с некоторыми из наших векторных листов. Вы определенно должны быть осторожны с тем, сколько данных хранится внутри самих плиток.

Другая проблема, с которой мы сталкиваемся, - это работа с государственными учреждениями, и у них есть ПК, заблокированные для обеспечения безопасности до энной степени, например, отключение поддержки WebGL на уровне ОС (им нравится блокировать все, что бы ни случилось). Это убийца, потому что Mapbox-gl-js не работает без WebGL, а заставить правительственное учреждение изменить политику безопасности - непростая задача. К сожалению, не существует простого выхода, если у пользователя нет WebGL. Мы все еще ищем лучшее решение этой проблемы.

person Chris Casad    schedule 20.12.2019
comment
Каков результат отключенной поддержки WebGL. Просто пустой экран вместо карты? Я попытался отключить аппаратное ускорение в Chrome, но не смог смоделировать ситуацию без WebGL, поскольку, похоже, флага больше нет. - person Greg Holst; 21.12.2019
comment
@GregHolst Я давно не видел его, но если я правильно помню, это был черный ящик, где находится карта, и тонна консольных ошибок, жалующихся на WebGL. - person Chris Casad; 23.12.2019
comment
Крис, я тоже работаю на правительство. Я предполагаю, что вы имеете в виду Федеральные органы США. Я тоже столкнулся с ужасной проблемой «Нет разрешенного WebGL». Я работаю на DoD, и Google активно настаивал на отмене этого правила, и мне это удалось, по крайней мере, для Chrome. Теперь мы просто ждем, когда он будет запущен во время Times of Corona. Что касается отката, то на самом деле его нет, кроме Leaflet или, если вам нужно использовать ESRI js api, отката до 4.10 или перехода на версию 3.x. Mapbox GL, ThinkGeo, последний API-интерфейс ESRI js полагаются на WebGL. - person user1757494; 04.04.2020

Mapbox.js устарел, используйте Mapbox GL JS, как указано на своем веб-сайте:

Mapbox.js

  • Больше не в разработке
  • Поддерживает растровые плитки
  • Плитки генерируются сервером
  • Стили карты нельзя изменить в браузере, но наложения карты можно изменять динамически.

Mapbox GL JS

  • В активной разработке - мы добавляем новые функции, улучшаем существующие и исправляем ошибки.
  • Поддерживает векторные плитки
  • Карты отображаются на стороне клиента браузером
  • Данные и стили карты могут быть изменены динамически

В статье также приведены примеры различий и сходств между ними.

person flawyte    schedule 22.12.2018
comment
Обратите внимание, Leaflet.js все еще находится в активной разработке (которую расширяет Mapbox.js). - person Titan; 04.03.2019

Если вы планируете рендерить более 10 карт на страницу, я бы рекомендовал не использовать mapbox-gl. Mapbox-gl использует WebGl для динамического рисования карт. Хотя все современные браузеры поддерживают WebGl, мы столкнулись с проблемами при открытии слишком большого количества контекстов WebGl. Слишком много - субъективно и зависит от того, какой именно браузер использует ваш клиент. Количество контекстов также кажется независимым от вкладок, поэтому, если у вашего клиента открыта вкладка, которая уже использует "слишком много" контекстов, ваши карты могут не отображаться в результате.

См. Ниже пару связанных проблем:

https://github.com/mapbox/mapbox-gl-js/issues/6312

https://github.com/mapbox/mapbox-gl-js/issues/7332

Я никогда не использовал mapbox.js или листовку в этом отношении, но для страниц, требующих 10 или более карт, я определенно могу рекомендовать не использовать mapbox-gl.

person hete_pick    schedule 17.12.2018