68

来自 Mapbox 词汇表，Mapbox.js

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

和Mapbox GL JS

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

从这个答案

Mapbox 样式用于 Mapbox GL 以及原生 iOS 和 Android SDK。您不能将它们与经典的 Mapbox JS 一起使用。Mapbox JS 支持光栅图块，你不能设置它们的样式。它们只是图像。Mapbox GL 和本机 SDK 的（可以）使用矢量图块，这些是可设置样式的。

我相信我可以用作和来源mapbox.js的替代品，但我可以用 做同样的事情吗？这两个库之间还存在哪些其他差异？leaflet cssjsmapbox-gl.js

4

8 回答 8

63

据我所知，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 上的问题：

希望对你有帮助，祝你好运！

于 2016-01-28T19:35:19.433 回答
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 样式的 Mapbox GL 一起使用。

于 2016-01-29T23:08:12.897 回答
19

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

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

综上所述，我已经能够几乎完全复制现有的绘图工具和渲染样式，但有一些小的差异。如果您需要高度自定义的绘图工具，Mapbox GL 可能会让您感到沮丧。

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

不过总的来说，我对这个开关很满意，因为我认为 Mapbox GL 更容易使用并提供更好的用户体验。

于 2018-01-18T21:40:43.410 回答
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 地图、Leaflet v0.7 和 v1 之后，我转向了 mapbox-gl-js，这似乎是一个不错的决定。

我开始使用 Mapbox-gl-js 之前的 Leaflet 经验和 HTML/CSS/JS 熟练程度，发现入门和示例都有助于理解技术细节。包括如何使用 JSON（不是 CSS）设置地图样式。还要仔细看看服务条款，这是一个重要的积极差异化因素，尤其是与谷歌相比。Mapbox 的服务在美国以外没有最强大的覆盖范围，因此请务必对此进行一些评论（根据我的经验，通常可以使用其他提供商，因此这不一定会影响采用图书馆的决定，它们是与 Mapbox 功能或标准非常紧密地耦合）。

于 2016-04-19T15:11:21.160 回答
3

从 Leafletjs 过渡后，我们已经使用 Mapbox-gl-js 一年多了。我们切换是因为我们想利用矢量图块功能。总的来说，我们喜欢 Mapbox-gl-js，尽管我们遇到了一些问题。

我们在 Mapbox-gl-js 中遇到了一些内存问题（因为 WebGL 是个猪），尤其是我们的一些矢量图块。您绝对必须小心在图块本身中存储了多少数据。

我们遇到的另一个问题是与政府机构合作，他们将 PC 锁定到第 n 级，例如关闭操作系统级别的 WebGL 支持（他们无论如何都喜欢锁定一切）。这是一个杀手，因为 Mapbox-gl-js 在没有 WebGL 的情况下无法工作，并且让政府机构更改安全策略并不是一件容易或快速的事情。不幸的是，如果用户没有 WebGL，似乎没有任何简单的回退。我们仍在寻找解决此问题的最佳方案。

于 2019-12-20T15:45:08.250 回答
2

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

于 2019-03-01T06:59:41.693 回答
1

Mapbox.js 已弃用，请按照其网站上的说明使用 Mapbox GL JS ：

Mapbox.js

  • 不再处于积极开发中
  • 支持光栅图块
  • 瓦片由服务器生成
  • 地图样式无法在浏览器中更改，但地图叠加层可以动态设置样式

Mapbox GL JS

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

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

于 2018-12-22T15:13:47.390 回答
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 或传单，但对于需要 10 个或更多地图的页面，我绝对建议不要使用 mapbox-gl。

于 2018-12-17T09:55:26.950 回答