javascript - react - Mapbox GL JS vs. Mapbox.js
mapbox setfilter (7)
Actualmente estoy trabajando para cambiar un complejo sistema de mapas basado en Leaflet a Mapbox GL y diría que una diferencia notable que he encontrado es en las herramientas de dibujo y el manejo de las capas GeoJSON. Leaflet tiene un conjunto de herramientas de dibujo que incluyen GeoJSON no estándar como marcadores, rectángulos y círculos. Los desarrolladores de Mapbox GL tomaron la decisión de centrarse en GeoJSON nativo, lo que significa que no hay compatibilidad inmediata para dibujar / representar círculos y rectángulos (por ejemplo, no hay nada como L.Circle en Mapbox GL); hay un marcador, pero diseñarlo para que se vea como un marcador de folleto tradicional requiere crear tus propios sprites o usar un SVG. Todas estas cosas aún son posibles, pero requieren un poco más de configuración por parte del desarrollador que en Leaflet.
Además, la mayoría de las capas de Mapbox GL se representan como elementos de lienzo. Esto significa que, a diferencia de Leaflet, no hay elementos HTML asociados con sus diversas capas. Esto hace que sea más difícil apuntar a los elementos con CSS si es necesario. Una excepción que he encontrado aquí son los marcadores que se representan como elementos HTML separados.
Dicho todo esto, he podido replicar casi por completo las herramientas de dibujo y los estilos de representación existentes con algunas pequeñas diferencias. Si necesita herramientas de dibujo altamente personalizadas, Mapbox GL puede ser frustrante para usted.
El soporte del navegador también se ha mencionado como un problema potencial. Cualquier navegador que admita WebGL puede ejecutar Mapbox GL. Esto incluye todos los principales navegadores. El único conjunto de navegadores significativo que vimos que no era compatible con Mapbox GL era IE10 o anterior, pero nuestros análisis indicaron que casi ninguno de nuestros usuarios todavía usaba estos navegadores, por lo que oficialmente dejamos de admitirlos. Su kilometraje puede variar obviamente.
En general, estoy contento con el cambio porque creo que Mapbox GL es más fácil de trabajar y proporciona una mejor experiencia de usuario.
Del glosario de Mapbox.js , Mapbox.js
Mapbox.js es una biblioteca de JavaScript que le permite agregar un mapa interactivo a su sitio web. Es un complemento para Leaflet, y es una biblioteca de código abierto que es de uso gratuito.
Mapbox GL JS es una biblioteca de JavaScript que utiliza Mapbox GL para representar mapas interactivos. Es una biblioteca de código abierto que es de uso gratuito. Puede agregar un estilo Mapbox o un estilo personalizado creado con Mapbox Studio a su aplicación Mapbox GL JS.
y de esta respuesta
Los estilos de Mapbox se usan con Mapbox GL y los SDK nativos de iOS y Android. No puedes usarlos con Mapbox JS clásico. Mapbox JS admite mosaicos de trama, no puede diseñarlos. Son solo imágenes. Mapbox GL y los SDK nativos (pueden) usan mosaicos vectoriales y esos son estilizables.
Creo que puedo usar
mapbox.js
como reemplazo del
leaflet
css
y
js
sources, pero ¿puedo hacer lo mismo con
mapbox-gl.js
?
¿Qué otras diferencias existen entre las dos bibliotecas?
Hasta donde yo sé, Mapbox GL JS será el reemplazo del Mapbox JS actual que usa Leaflet en segundo plano. Muchas cosas que hace Leaflet, GL también puede hacer y más. Pero no todo. Lo mismo ocurre al revés. GL puede hacer cosas que Leaflet no puede hacer. Lo más importante en GL es que está construido alrededor de mosaicos vectoriales usando WebGL. Del artículo de introducción:
Anunciamos Mapbox GL JS: un nuevo sistema rápido y potente para mapas web. Mapbox GL JS es un renderizador del lado del cliente, por lo que utiliza JavaScript y WebGL para dibujar datos dinámicamente con la velocidad y suavidad de un videojuego. En lugar de arreglar estilos y niveles de zoom en el nivel del servidor, Mapbox GL pone poder en JavaScript, lo que permite un estilo dinámico y una interactividad de forma libre. Los mapas vectoriales son la próxima evolución, y estamos entusiasmados de ver qué construyen los desarrolladores con este marco.
Si realmente quieres una comparación lado a lado de los dos, lamento que no haya ninguno hasta donde yo sé. Hay muchas cosas que mencionar / considerar al hacer una comparación, por lo que es mejor que lo haga usted mismo según sus propios requisitos. Un buen comienzo sería comparar los ejemplos para cada marco porque da una buena idea de lo que ambos pueden hacer:
Después de eso, puede comparar sus API:
Una cosa a tener en cuenta es que GL es completamente nuevo y, como todos los desarrolladores sabemos, eso tiene un precio. Algunos problemas no se han solucionado. En cuanto a Leaflet, es muy maduro, ampliamente utilizado y muy bien probado / probado. Si desea echar un vistazo a los problemas que hay actualmente con GL, puede echar un vistazo a los problemas en Github, en el repositorio:
Espero que ayude, buena suerte!
La respuesta de iH8 es excelente, para agregar un poco más de detalle:
Para los mapas base , Mapbox.js muestra archivos de mosaicos de trama (PNG y JPEG) y los muestra usando HTML y CSS. Mapbox GL JS muestra mosaicos vectoriales (buffers de protocolo sofisticados) y los muestra usando WebGL. También puede mostrar mosaicos de trama, pero ese no es el foco.
Tanto Mapbox.js como Mapbox GL JS admiten superposiciones como capas y marcadores GeoJSON. Ambos son de código abierto, con licencias similares y algunos contribuyentes compartidos.
Los estilos para las capas Mapbox.js se almacenan en servidores y se representan con tecnología de servidor. Los estilos para Mapbox GL JS se representan dinámicamente en un navegador, por lo que se pueden cambiar en tiempo real.
Leaflet tiene un soporte de navegador más amplio, a costa de algunas cosas que algunos navegadores no pueden soportar, como la inclinación y rotación del mapa. Mapbox GL admite navegadores que admiten WebGL y funciona mejor en computadoras más nuevas. Tiene una versión nativa, llamada Mapbox GL Native, que funciona muy bien en todos los teléfonos móviles.
A pesar de los nombres, puede usar Leaflet con Mapbox y Mapbox.js y Mapbox GL con estilos que no sean Mapbox.
Para los desarrolladores que tienen experiencia en la construcción de mapas web con Mapbox.js o Leaflet, cambiar proyectos antiguos para usar Mapbox GL JS puede mejorar drásticamente el rendimiento de sus aplicaciones existentes. Mapbox GL JS utiliza la representación del lado del cliente WebGL para mostrar sus mapas, lo que resulta en una carga más rápida, transiciones más suaves al hacer zoom o paneo, y una mayor flexibilidad para cambiar los datos y estilos de mapas sobre la marcha. Estas mejoras hacen que el cambio a Mapbox GL JS valga la pena, así que recientemente convertí la demostración de Peter''s Courier de Mapbox.js a GL
Si planea renderizar más de 10 mapas por página, le recomiendo que no use mapbox-gl. Mapbox-gl usa WebGl para dibujar mapas dinámicamente. Aunque todos los navegadores modernos tienen soporte para WebGl, hemos tenido problemas al abrir demasiados contextos de WebGl. Demasiado es subjetivo y depende exactamente de qué navegador está usando su cliente. El número de contextos también parece ser independiente de las pestañas, por lo que si su cliente tiene una pestaña abierta que ya está usando "demasiados" contextos, sus mapas podrían no representarse como consecuencia.
Vea a continuación algunos problemas relacionados:
https://github.com/mapbox/mapbox-gl-js/issues/6312
https://github.com/mapbox/mapbox-gl-js/issues/7332
Nunca he usado mapbox.js o un folleto, pero para las páginas que requieren 10 o más mapas definitivamente puedo recomendar no usar mapbox-gl.
En general, Leafletjs y Mapbox.js son iguales , pero Mapbox.js tiene complementos y extensiones que envuelven Leaflet y se unen a los servicios de Mapbox (por ejemplo, instrucciones). Existen complementos y características similares de otras compañías o productos, y Leaflet puede usarlos además de Mapbox o en lugar de ellos. Las bibliotecas basadas en folletos generalmente tienen un mejor soporte de navegador heredado, usan mosaicos ráster, etc. Dichas características se están agregando que incorporan características modernas como mosaicos vectoriales (pbf, mvt, etc.) y varios renderizadores (incluido webgl).
Mapbox-gl-js y la variante nativa mapbox-gl son bibliotecas de código abierto que son de alto rendimiento, altamente optimizadas en torno a mosaicos vectoriales (pbf, mvt) y webgl para renderizar en un elemento de lienzo (para la variante -js). Es relativamente nuevo, por lo que algunas cosas que son fáciles con Leaflet pueden ser diferentes o desafiantes (a partir de abril de 2016), que dicen que son muy similares y funcionan bastante bien, incluso en dispositivos móviles (de los últimos años, por ejemplo, iphone 5s ) Un ejemplo de un capricho aleatorio es que las etiquetas hebreas en Israel, que se leen de derecha a izquierda, están al revés y parecen absurdas (es un problema abierto que se está abordando).
Si dejar de usar el soporte de navegador anterior está bien, la ruta Mapbox-gl (-js) puede ser una buena opción. En mi experiencia limitada (trabajando con él unos meses), tiene la mejor experiencia de usuario + desarrollador en general y Mapbox ha sido consistente en su ingeniería / salida. Tengo menos experiencia con sus servicios pagos y no está claro qué tan estrechamente acopladas estarán sus bibliotecas a estos servicios. Para un proyecto móvil, me mudé a mapbox-gl-js después de mirar Google Maps, Leaflet v0.7 y v1 y parece que fue una buena decisión.
Comencé a usar Mapbox-gl-js con experiencia previa en Leaflet y competencia en HTML / CSS / JS y encontré que el manual y los https://www.mapbox.com/mapbox-gl-js/examples/ útiles para comprender los detalles técnicos. Incluyendo cómo se diseña el mapa con JSON (no CSS). También observe de cerca los términos de servicio, este fue un diferenciador positivo importante especialmente en comparación con Google. Los servicios de Mapbox no tienen la cobertura más sólida fuera de los EE. UU., Así que asegúrese de darles también esta revisión (en mi experiencia, normalmente hay otro proveedor disponible, por lo que esto no necesariamente afecta la decisión de adoptar las bibliotecas, son solo muy estrechamente acoplado a las características o estándares de Mapbox).
Mapbox.js está en desuso, use Mapbox GL JS como se indica en su sitio web :
Mapbox.js
- Ya no en desarrollo activo
- Admite mosaicos de trama
- Las fichas son generadas por el servidor
- Los estilos de mapa no se pueden cambiar en el navegador, pero las superposiciones de mapa se pueden diseñar dinámicamente
Mapbox GL JS
- En desarrollo activo : estamos agregando nuevas funciones, mejorando las funciones existentes y corrigiendo errores
- Admite mosaicos vectoriales
- El navegador representa los mapas en el lado del cliente
- Los datos y estilos de mapas se pueden cambiar dinámicamente
El artículo también contiene ejemplos de diferencias y similitudes entre los dos.