logo标签列表

Mapbox GL JS与Mapbox.js的比较

javascriptmapboxmapbox-gl-js
70

来自Mapbox词汇表的定义，Mapbox.js

Mapbox.js是一个JavaScript库，允许您将交互式地图添加到网站中。它是Leaflet的插件，是一个开源库，可以免费使用。

以及Mapbox GL JS

Mapbox GL JS是一个JavaScript库，使用Mapbox GL来渲染交互式地图。这是一个开源库，可免费使用。您可以将Mapbox风格或使用Mapbox Studio创建的自定义样式添加到Mapbox GL JS应用程序中。

还有来自此答案

Mapbox Styles适用于Mapbox GL和原生iOS和Android SDK。您无法将其与经典Mapbox JS一起使用。 Mapbox JS支持栅格瓦片，您无法对其进行样式设置。它们只是图像。Mapbox GL和原生SDK（可以）使用矢量瓦片，这些瓦片可以进行样式设置。

我相信我可以使用mapbox.js替代leaflet的css和js源，但我能否用同样的方式替换mapbox-gl.js？
这两个库还有哪些其他差异？

8个回答
64
据我所知，Mapbox GL JS将成为当前使用Leaflet作为背景的Mapbox JS的替代品。很多Leaflet可以做到的事情，GL也可以做到并且更多。但不是所有事情都是如此。同样反过来也是如此。GL可以做到Leaflet无法做到的事情。GL的重要之处在于它围绕着使用WebGL的矢量切片构建而成。根据介绍文章：

宣布推出Mapbox GL JS - 一种快速、强大的新的Web地图系统。 Mapbox GL JS是一个客户端渲染器，因此它使用JavaScript和WebGL以视频游戏的速度和平稳性动态绘制数据。 Mapbox GL不是在服务器级别上固定样式和缩放级别，而是将JavaScript的功能置于其中，允许动态样式和自由互动性。矢量地图是下一个阶段的发展方向，我们很高兴看到开发人员使用这个框架构建的内容。

如果您真的想要对比这两者，很抱歉，据我所知没有这样的比较。当进行比较时，有太多的事情需要考虑/提及，因此最好根据自己的需求自行完成此操作。一个好的开始是比较每个框架的示例，因为它可以很好地了解它们都可以做什么：之后，您可以比较它们的API：

需要注意的一点是GL是崭新的，正如我们开发者所知道的那样，这带来了代价。一些问题还没有得到解决。至于Leaflet，它非常成熟，被广泛使用并经过了充分的测试和验证。如果您想看看目前GL存在哪些问题，可以在Github上查看相关的问题，网址为：

1
玩了一下之后，我想强调这两个库彼此不兼容。例如，我不能使用 mapbox.js 将 GeoJSON 添加到使用 mapbox-gl.js 创建的地图中。 - raphael
两者都与GeoJSON规范兼容吗？Mapbox.js使用GeoJSON：https://www.mapbox.com/mapbox.js/example/v1.0.0/load-geojson/ Mapbox.GL.js使用GeoJSON：https://www.mapbox.com/mapbox-gl-js/example/geojson-markers/我不明白您所说的在由gl创建的地图上使用mapbox.js的意思。当然，您不能混合使用这两个框架，它们的API完全不同。 - iH8
Leaflet 1.0可能会对Mapbox GL构成一定的竞争：http://leafletjs.com/2015/07/15/leaflet-1.0-beta1-released.html - Tony Laidig
@iH8，从Mapbox文档中并不直观地了解到框架的混合使用方式。我应该在问题中提到我正在使用现有的leaflet项目，但是尝试将自定义底图纳入其中，因此可以选择使用Mapbox Studio Classic或在线应用程序，从而需要它们各自的框架。 - raphael
33

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样式。

从 Leaflet 1.0-beta1（2015 年 7 月 14 日）开始，支持非整数缩放。详情请见 官方更新日志。 - Jieter
19

我目前正在将一个基于复杂Leaflet地图系统切换到Mapbox GL，我发现一个显着的区别在于绘图工具和处理GeoJSON层。Leaflet拥有一套绘图工具，其中包括非标准的GeoJSON，如标记、矩形和圆形。Mapbox GL的开发人员决定专注于本地GeoJSON，这意味着没有针对绘制/渲染圆形和矩形的开箱即用支持（例如，在Mapbox GL中没有像L.Circle这样的东西）; 有一个标记，但需要创建自己的精灵或使用SVG来使其看起来像传统的Leaflet标记样式。所有这些仍然是可能的，但需要开发人员比在Leaflet中更多的设置。

此外，大多数Mapbox GL层都以画布元素呈现。这意味着，与Leaflet不同，您的各个图层没有关联的HTML元素。如果需要，这使得使用CSS定位元素更加困难。我在这里发现的一个例外是标记，它们呈现为单独的HTML元素。

话虽如此，我已经能够几乎完全复制现有的绘图工具和渲染样式，只有一些小差异。如果您需要高度定制的绘图工具，则Mapbox GL可能会令您感到沮丧。

浏览器支持也被提到可能是一个问题。任何支持WebGL的主要浏览器都可以运行Mapbox GL。唯一不支持Mapbox GL的重要浏览器集是IE10或更早版本，但我们的分析表明，几乎没有用户仍在使用这些浏览器，因此我们正式停止了对它们的支持。显然，您的情况可能有所不同。

总的来说，我很满意转换，因为我认为Mapbox GL更易于使用，提供更好的用户体验。

1
补充这个答案，如果你想为一个图层设置边框样式，是没有直接的选项可以实现的。你需要再创建一个图层来表示边框。 - Pankaj
15

通常情况下，Leafletjs和Mapbox.js是相同的，但Mapbox.js具有插件和扩展，这些插件和扩展包装了Leaflet并连接到Mapbox的服务（例如方向）。类似的插件和功能也存在于其他公司或产品中，Leaflet可以将它们与Mapbox一起使用或者选择其中之一。基于Leaflet的库通常具有更好的旧版浏览器支持，使用光栅瓦片等。尽管如此，新的功能正在添加中，包括现代功能，如矢量瓦片（pbf、mvt等）和各种渲染器（包括webgl）。

Mapbox-gl-js和本地变体mapbox-gl都是开源库，在矢量瓦片（pbf、mvt）和webgl的渲染方面进行高度优化，具有出色的性能，可以将其渲染成画布元素（对于-js变体）。它相对较新，因此某些在Leaflet中易于实现的功能可能会有所不同或有挑战（截至2016年4月），尽管如此，它们非常相似并且工作得很好，甚至在移动设备上（例如过去几年中的iPhone 5S）。一个随机的问题是，在以阅读从右到左的方式显示希伯来文标签的以色列中，这些标签会倒置并且看起来像无意义的字符（这是正在解决的一个公开问题）。

如果可以放弃旧版浏览器支持并采用Mapbox-gl（-js）路线，则可能是一个不错的选择。在我的有限经验（几个月的工作中），它具有最佳的用户和开发人员体验，而Mapbox在其工程/输出方面一直保持一致。我对他们的付费服务的经验较少，并且他们的库与这些服务紧密耦合尚不清楚。对于移动项目，我在查看了Google Maps、Leaflet v0.7和v1之后转向了mapbox-gl-js，并且似乎是一个不错的决定。

我之前有使用过Leaflet，对HTML/CSS/JS也很熟练。开始学习Mapbox-gl-js后，在入门指南和示例中了解到了技术细节，包括地图如何通过JSON进行样式设置（而非CSS）。此外，请特别注意服务条款，这是与Google相比的一个重要的积极因素。Mapbox的服务在美国以外的地区覆盖不太全面，因此请务必仔细评估（根据我的经验，通常会有其他提供商可用，因此这并不一定影响是否采用该库，只是它们与Mapbox的功能或标准非常紧密相关）。

3

我们在从LeafletJS转换后已经使用Mapbox-gl-js一年多了。我们转换的原因是想利用矢量切片功能。总体来说，我们喜欢Mapbox-gl-js，但我们也遇到了一些问题。

我们在使用Mapbox-gl-js时遇到了一些内存问题（由于WebGL很耗资源），特别是在处理某些矢量切片时。因此你必须小心控制切片本身所存储的数据量。

另一个问题是我们与政府机构合作时，他们的PC安全级别非常高，会在操作系统级别关闭WebGL支持（无论什么情况他们都喜欢严格限制）。这是个大问题，因为没有WebGL Mapbox-gl-js就不能工作，并且让政府机构改变安全策略并不容易或快速。不幸的是，如果用户没有WebGL，似乎没有任何容易的替代方案。我们仍在寻找解决这个问题的最佳方案。

关闭WebGL支持的结果是什么？只会显示一个空白屏幕而不是地图吗？我尝试在Chrome上关闭硬件加速，但由于似乎没有标志，因此无法模拟没有WebGL的情况。 - Greg Holst
@GregHolst 好久没见了，但如果我没记错的话，那是一个黑盒子，地图上有很多控制台错误抱怨 WebGL。 - Chris Casad
1
Chris，我也在政府工作。我猜你指的是美国联邦政府。我也曾遇到过可怕的“不允许使用WebGL”的问题。我在国防部工作，Google积极推动取消这一规定，并已经成功地在Chrome上实现了这一点。现在我们只需要等待它在冠状病毒时期被推出。至于备选方案，除了使用Leaflet或者如果必须使用ESRI js api，则回退到4.10之前的版本或选择3.x版本外，真的没有其他选择。Mapbox GL、ThinkGeo和最新的ESRI js API都依赖于WebGL。 - user1757494
并不是很久以前，我曾经与一个政府机构的IT部门打交道，尽管IE6的支持早已停止并且存在着许多漏洞，他们仍然将人们锁定在IE6上。问题的一部分是一堆Oracle ActiveX应用程序，需要支付大量费用才能获得升级许可证。这是一个可怕的情况。我们IT安全团队试图禁止使用IE6，而业务应用程序人员则试图强制使用它。于是就发生了争吵。 - Shayne
2

对于有使用Mapbox.js或Leaflet构建Web地图经验的开发人员来说，将旧项目切换到使用Mapbox GL JS可以极大地提高现有应用程序的性能。 Mapbox GL JS使用WebGL客户端渲染来显示您的地图，这导致更快的加载速度，在缩放或平移时转换更加平滑，并具有更大的灵活性，以实时更改地图数据和样式。这些改进使得切换到Mapbox GL JS的努力非常值得，因此我最近将Peter的Courier演示从Mapbox.js转换为GL。

“Original Answer”翻译成中文是“最初的回答”。

1

Mapbox.js已被弃用，请使用Mapbox GL JS，如官网所述：

Mapbox.js

  • 不再进行主动开发
  • 支持栅格瓦片
  • 瓦片由服务器生成
  • 地图样式无法在浏览器中更改，但可以动态地为地图覆盖物设置样式

Mapbox GL JS

  • 正在积极开发中 - 我们正在添加新功能，改进现有功能并修复错误
  • 支持矢量瓦片
  • 地图由浏览器在客户端呈现
  • 地图数据和样式可以动态更改

该文章还包含了两者之间的差异和相似之处的示例。

注意，Leaflet.js仍在积极开发中(Mapbox.js扩展了它)。 - Titan
0
如果您计划在一页上渲染超过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或leaflet，但对于需要10个或更多地图的页面，我绝对建议不要使用mapbox-gl。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接