Mapbox GL JS 对比 Mapbox.js
Mapbox GL JS vs. Mapbox.js
来自 Mapbox 词汇表，Mapbox.js
Mapbox.js is a JavaScript library that allows you to add an your interactive map to your website. It is a plugin for Leaflet, and it is an open source library that’s free to use.
Mapbox GL JS is a JavaScript library that uses Mapbox GL to render interactive maps. It’s an open source library that’s free to use. You can add a Mapbox style or a custom style created with Mapbox Studio to your Mapbox GL JS application.
来自
Mapbox Styles are for use with Mapbox GL and the native iOS and Android SDK's. You can't use them with classic Mapbox JS. Mapbox JS supports raster tiles, you can't style those. They're just images. Mapbox GL and the native SDK's (can) use vector tiles and those are stylable.
我相信我可以使用 mapbox.js 来替代 leaflet css 和 js 来源，但我可以用 mapbox-gl.js 做同样的事情吗？
这两个库之间还有哪些区别？
据我所知，Mapbox GL JS 将取代当前在后台使用 Leaflet 的 Mapbox JS。 Leaflet 可以做的很多事情，GL 也可以做，甚至更多。但不是一切。反之亦然。 GL 可以做 Leaflet 做不到的事情。 GL 的重要之处在于它是使用 WebGL 围绕矢量图块构建的。来自介绍文章：
Announcing Mapbox GL JS — a fast and powerful new system for web maps. Mapbox GL JS is a client-side renderer, so it uses JavaScript and WebGL to dynamically draw data with the speed and smoothness of a video game. Instead of fixing styles and zoom levels at the server level, Mapbox GL puts power in JavaScript, allowing for dynamic styling and freeform interactivity. Vector maps are the next evolution, and we're excited to see what developers build with this framework.
如果您真的想对两者进行并排比较，很抱歉，据我所知有 none。比较的时候mention/consider太多了，最好根据自己的需要自己做。一个好的开始是比较每个框架的示例，因为它很好地说明了两者可以做什么：
之后你可以比较他们的API：
要记住的一件事是 GL 是全新的品牌，我们开发人员都知道这是有代价的。有些问题还没有解决。至于Leaflet，已经很成熟了，应用广泛，很好tested/proven。如果您想了解 GL 当前存在的问题，您可以查看 Github 上的问题，在存储库中：
希望对你有所帮助，祝你好运！
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 样式一起使用。
一般来说，Leafletjs 和 Mapbox.js 是相同的，但是 Mapbox.js 有插件和扩展来包装 Leaflet 并绑定到 Mapbox 的服务（例如方向） .其他公司或产品也有类似的插件和功能，Leaflet 可以使用它们来补充或代替 Mapbox。基于 Leaflet 的库通常具有更好的旧版浏览器支持，使用光栅图块等。也就是说，正在添加的功能包括现代功能，如矢量图块（pbf、mvt 等）和各种渲染器（包括 webgl）。
Mapbox-gl-js 和本地变体 mapbox-gl 是开源库， 是高性能的，围绕矢量切片高度优化 (pbf , mvt) 和 webgl 将 渲染成 canvas 元素（对于 -js 变体）。它相对较新，因此一些使用 Leaflet 很容易的事情可能会有所不同或具有挑战性（截至 2016 年 4 月），据说它们非常相似并且工作得很好，包括在移动设备上 （从过去几年开始，例如iphone 5s）。随机怪癖的一个例子是以色列的希伯来语标签，从右到左阅读，是倒退的，看起来像胡说八道（这是一个正在解决的悬而未决的问题）。
如果可以放弃对旧浏览器的支持，那么 Mapbox-gl(-js) 路线可能是一个不错的选择。根据我有限的经验（使用它几个月），它具有最好的用户+开发人员整体体验，并且 Mapbox 在他们的 engineering/output 方面一直保持一致。我对他们的付费服务经验较少，也不清楚他们的图书馆与这些服务的耦合程度。对于一个移动项目，我在查看 Google 地图、Leaflet v0.7 和 v1 后转向了 mapbox-gl-js，这似乎是一个不错的决定。
我开始使用 Mapbox-gl-js 之前的 Leaflet 经验和对 HTML/CSS/JS 的熟练程度，发现 the primer and examples 两者都有助于理解技术细节。包括如何使用 JSON（而不是 CSS）设置地图样式。还要仔细查看服务条款，这是一个重要的积极差异化因素 ，尤其是 与 Google 相比。 Mapbox 的服务在美国以外的地区没有最强大的覆盖范围，因此请务必对此进行一些审查（根据我的经验，通常可以使用另一家提供商，因此这不一定会影响采用图书馆的决定，他们是只是与 Mapbox 功能或标准紧密结合。
我目前正在将一个复杂的基于 Leaflet 的地图系统切换到 Mapbox GL，我想说的是我发现的一个显着差异是绘图工具和 GeoJSON 层的处理。 Leaflet 有一套绘图工具，包括非标准的 GeoJSON，如标记、矩形和圆形。 Mapbox GL 的开发人员决定专注于原生 GeoJSON，这意味着没有对 drawing/rendering 圆形和矩形的开箱即用支持（例如，在 Mapbox GL 中没有像 L.Circle 这样的东西）；有一个标记，但将其样式设置为看起来像传统的 Leaflet 标记需要创建您自己的精灵或使用 SVG。所有这些仍然是可能的，但与在 Leaflet 中相比，它们需要开发人员进行更多设置。
此外，大多数 Mapbox GL 图层都呈现为 canvas 元素。这意味着，与 Leaflet 不同，没有 HTML 元素与您的各个层相关联。如果需要，这使得使用 CSS 定位元素变得更加困难。我在这里发现的一个例外是标记，它们呈现为单独的 HTML 元素。
综上所述，我已经能够几乎完全复制现有的绘图工具和渲染样式，但有一些细微差别。如果您需要高度自定义的绘图工具，Mapbox GL 可能会让您感到沮丧。
浏览器支持也被认为是一个潜在问题。 supports WebGL 可以 运行 Mapbox GL 的任何浏览器。这包括所有主要浏览器。我们看到唯一不支持 Mapbox GL 的重要浏览器集是 IE10 或更早版本，但我们的分析表明几乎 none 的用户仍在使用这些浏览器，因此我们正式放弃了对它们的支持。您的里程可能会有明显差异。
总的来说，我对这种转变很满意，因为我认为 Mapbox GL 更易于使用并提供更好的用户体验。
如果您计划每页渲染超过 10 张地图，我建议您不要使用 mapbox-gl。 Mapbox-gl 使用 WebGl 动态绘制地图。尽管所有现代浏览器都支持 WebGl，但我们 运行 在打开太多 WebGl 上下文时遇到了问题。太多是主观的，具体取决于您的客户使用的浏览器。上下文的数量似乎也与选项卡无关，因此如果您的客户打开了一个已经在使用 "too many" 上下文的选项卡，您的地图可能不会因此呈现。
请参阅下面的几个相关问题：
https://github.com/mapbox/mapbox-gl-js/issues/6312
https://github.com/mapbox/mapbox-gl-js/issues/7332
我从来没有用过 mapbox.js 或传单，但对于需要 10 张或更多地图的页面，我绝对建议不要使用 mapbox-gl。
Mapbox.js 已弃用，请按照说明使用 Mapbox GL JS on their website :
Mapbox.js
- No longer in active development
- Supports raster tiles
- Tiles are generated by the server
- Map styles can’t be changed in the browser, but map overlays can be styled dynamically
Mapbox GL JS
- In active development — we are adding new features, improving existing features, and fixing bugs
- Supports vector tiles
- Maps are rendered client-side by the browser
- Map data and styles can be changed dynamically
本文还包含了两者之间异同的示例。
对于有使用 Mapbox.js 或 Leaflet 构建 web 地图经验的开发人员，将旧项目切换为使用 Mapbox GL JS 可以显着提高现有应用程序的性能。 Mapbox GL JS 使用 WebGL 客户端渲染来显示您的地图，这导致加载速度更快，缩放或平移时过渡更平滑，并且可以更灵活地动态更改地图数据和样式。这些改进使得切换到 Mapbox GL JS 非常值得，所以我最近将 Peter 的 Courier 演示从 Mapbox.js 转换为 GL
从 Leafletjs 转换后，我们已经使用 Mapbox-gl-js 一年多了。我们切换是因为我们想利用矢量图块功能。总的来说，我们喜欢 Mapbox-gl-js，尽管我们 运行 遇到了一些问题。
我们 运行 遇到了 Mapbox-gl-js 的一些内存问题（由于 WebGL 是个猪），尤其是我们的一些矢量图块。您一定要注意磁贴本身存储了多少数据。
我们 运行 正在处理的另一个问题是与政府机构合作，他们将 PC 锁定到 n 级安全，例如在 OS 水平（他们喜欢无论如何都锁定一切）。这是一个杀手，因为 Mapbox-gl-js 在没有 WebGL 的情况下无法工作，并且让政府机构更改安全策略并不是一件容易或快速的事情。不幸的是，如果用户没有 WebGL，似乎没有任何简单的回退。我们仍在寻找解决此问题的最佳方案。
来自 Mapbox 词汇表，Mapbox.js
Mapbox.js is a JavaScript library that allows you to add an your interactive map to your website. It is a plugin for Leaflet, and it is an open source library that’s free to use.
Mapbox GL JS is a JavaScript library that uses Mapbox GL to render interactive maps. It’s an open source library that’s free to use. You can add a Mapbox style or a custom style created with Mapbox Studio to your Mapbox GL JS application.
来自
Mapbox Styles are for use with Mapbox GL and the native iOS and Android SDK's. You can't use them with classic Mapbox JS. Mapbox JS supports raster tiles, you can't style those. They're just images. Mapbox GL and the native SDK's (can) use vector tiles and those are stylable.
我相信我可以使用 mapbox.js 来替代 leaflet css 和 js 来源，但我可以用 mapbox-gl.js 做同样的事情吗？
这两个库之间还有哪些区别？
据我所知，Mapbox GL JS 将取代当前在后台使用 Leaflet 的 Mapbox JS。 Leaflet 可以做的很多事情，GL 也可以做，甚至更多。但不是一切。反之亦然。 GL 可以做 Leaflet 做不到的事情。 GL 的重要之处在于它是使用 WebGL 围绕矢量图块构建的。来自介绍文章：
Announcing Mapbox GL JS — a fast and powerful new system for web maps. Mapbox GL JS is a client-side renderer, so it uses JavaScript and WebGL to dynamically draw data with the speed and smoothness of a video game. Instead of fixing styles and zoom levels at the server level, Mapbox GL puts power in JavaScript, allowing for dynamic styling and freeform interactivity. Vector maps are the next evolution, and we're excited to see what developers build with this framework.
如果您真的想对两者进行并排比较，很抱歉，据我所知有 none。比较的时候mention/consider太多了，最好根据自己的需要自己做。一个好的开始是比较每个框架的示例，因为它很好地说明了两者可以做什么：
之后你可以比较他们的API：
要记住的一件事是 GL 是全新的品牌，我们开发人员都知道这是有代价的。有些问题还没有解决。至于Leaflet，已经很成熟了，应用广泛，很好tested/proven。如果您想了解 GL 当前存在的问题，您可以查看 Github 上的问题，在存储库中：
希望对你有所帮助，祝你好运！
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 样式一起使用。
一般来说，Leafletjs 和 Mapbox.js 是相同的，但是 Mapbox.js 有插件和扩展来包装 Leaflet 并绑定到 Mapbox 的服务（例如方向） .其他公司或产品也有类似的插件和功能，Leaflet 可以使用它们来补充或代替 Mapbox。基于 Leaflet 的库通常具有更好的旧版浏览器支持，使用光栅图块等。也就是说，正在添加的功能包括现代功能，如矢量图块（pbf、mvt 等）和各种渲染器（包括 webgl）。
Mapbox-gl-js 和本地变体 mapbox-gl 是开源库， 是高性能的，围绕矢量切片高度优化 (pbf , mvt) 和 webgl 将 渲染成 canvas 元素（对于 -js 变体）。它相对较新，因此一些使用 Leaflet 很容易的事情可能会有所不同或具有挑战性（截至 2016 年 4 月），据说它们非常相似并且工作得很好，包括在移动设备上 （从过去几年开始，例如iphone 5s）。随机怪癖的一个例子是以色列的希伯来语标签，从右到左阅读，是倒退的，看起来像胡说八道（这是一个正在解决的悬而未决的问题）。
如果可以放弃对旧浏览器的支持，那么 Mapbox-gl(-js) 路线可能是一个不错的选择。根据我有限的经验（使用它几个月），它具有最好的用户+开发人员整体体验，并且 Mapbox 在他们的 engineering/output 方面一直保持一致。我对他们的付费服务经验较少，也不清楚他们的图书馆与这些服务的耦合程度。对于一个移动项目，我在查看 Google 地图、Leaflet v0.7 和 v1 后转向了 mapbox-gl-js，这似乎是一个不错的决定。
我开始使用 Mapbox-gl-js 之前的 Leaflet 经验和对 HTML/CSS/JS 的熟练程度，发现 the primer and examples 两者都有助于理解技术细节。包括如何使用 JSON（而不是 CSS）设置地图样式。还要仔细查看服务条款，这是一个重要的积极差异化因素 ，尤其是 与 Google 相比。 Mapbox 的服务在美国以外的地区没有最强大的覆盖范围，因此请务必对此进行一些审查（根据我的经验，通常可以使用另一家提供商，因此这不一定会影响采用图书馆的决定，他们是只是与 Mapbox 功能或标准紧密结合。
我目前正在将一个复杂的基于 Leaflet 的地图系统切换到 Mapbox GL，我想说的是我发现的一个显着差异是绘图工具和 GeoJSON 层的处理。 Leaflet 有一套绘图工具，包括非标准的 GeoJSON，如标记、矩形和圆形。 Mapbox GL 的开发人员决定专注于原生 GeoJSON，这意味着没有对 drawing/rendering 圆形和矩形的开箱即用支持（例如，在 Mapbox GL 中没有像 L.Circle 这样的东西）；有一个标记，但将其样式设置为看起来像传统的 Leaflet 标记需要创建您自己的精灵或使用 SVG。所有这些仍然是可能的，但与在 Leaflet 中相比，它们需要开发人员进行更多设置。
此外，大多数 Mapbox GL 图层都呈现为 canvas 元素。这意味着，与 Leaflet 不同，没有 HTML 元素与您的各个层相关联。如果需要，这使得使用 CSS 定位元素变得更加困难。我在这里发现的一个例外是标记，它们呈现为单独的 HTML 元素。
综上所述，我已经能够几乎完全复制现有的绘图工具和渲染样式，但有一些细微差别。如果您需要高度自定义的绘图工具，Mapbox GL 可能会让您感到沮丧。
浏览器支持也被认为是一个潜在问题。 supports WebGL 可以 运行 Mapbox GL 的任何浏览器。这包括所有主要浏览器。我们看到唯一不支持 Mapbox GL 的重要浏览器集是 IE10 或更早版本，但我们的分析表明几乎 none 的用户仍在使用这些浏览器，因此我们正式放弃了对它们的支持。您的里程可能会有明显差异。
总的来说，我对这种转变很满意，因为我认为 Mapbox GL 更易于使用并提供更好的用户体验。
如果您计划每页渲染超过 10 张地图，我建议您不要使用 mapbox-gl。 Mapbox-gl 使用 WebGl 动态绘制地图。尽管所有现代浏览器都支持 WebGl，但我们 运行 在打开太多 WebGl 上下文时遇到了问题。太多是主观的，具体取决于您的客户使用的浏览器。上下文的数量似乎也与选项卡无关，因此如果您的客户打开了一个已经在使用 "too many" 上下文的选项卡，您的地图可能不会因此呈现。
请参阅下面的几个相关问题：
https://github.com/mapbox/mapbox-gl-js/issues/6312
https://github.com/mapbox/mapbox-gl-js/issues/7332
我从来没有用过 mapbox.js 或传单，但对于需要 10 张或更多地图的页面，我绝对建议不要使用 mapbox-gl。
Mapbox.js 已弃用，请按照说明使用 Mapbox GL JS on their website :
Mapbox.js
- No longer in active development
- Supports raster tiles
- Tiles are generated by the server
- Map styles can’t be changed in the browser, but map overlays can be styled dynamically
Mapbox GL JS
- In active development — we are adding new features, improving existing features, and fixing bugs
- Supports vector tiles
- Maps are rendered client-side by the browser
- Map data and styles can be changed dynamically
本文还包含了两者之间异同的示例。
对于有使用 Mapbox.js 或 Leaflet 构建 web 地图经验的开发人员，将旧项目切换为使用 Mapbox GL JS 可以显着提高现有应用程序的性能。 Mapbox GL JS 使用 WebGL 客户端渲染来显示您的地图，这导致加载速度更快，缩放或平移时过渡更平滑，并且可以更灵活地动态更改地图数据和样式。这些改进使得切换到 Mapbox GL JS 非常值得，所以我最近将 Peter 的 Courier 演示从 Mapbox.js 转换为 GL
从 Leafletjs 转换后，我们已经使用 Mapbox-gl-js 一年多了。我们切换是因为我们想利用矢量图块功能。总的来说，我们喜欢 Mapbox-gl-js，尽管我们 运行 遇到了一些问题。
我们 运行 遇到了 Mapbox-gl-js 的一些内存问题（由于 WebGL 是个猪），尤其是我们的一些矢量图块。您一定要注意磁贴本身存储了多少数据。
我们 运行 正在处理的另一个问题是与政府机构合作，他们将 PC 锁定到 n 级安全，例如在 OS 水平（他们喜欢无论如何都锁定一切）。这是一个杀手，因为 Mapbox-gl-js 在没有 WebGL 的情况下无法工作，并且让政府机构更改安全策略并不是一件容易或快速的事情。不幸的是，如果用户没有 WebGL，似乎没有任何简单的回退。我们仍在寻找解决此问题的最佳方案。