Javascript Mapbox GL JS 与 Mapbox.js

Mapbox GL JS vs. Mapbox.js

提问by raphael

From the Mapbox glossary, 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.js 是一个 JavaScript 库，允许您将交互式地图添加到您的网站。它是 Leaflet 的一个插件，它是一个免费使用的开源库。

and Mapbox GL JS

和Mapbox GL JS

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 GL JS 是一个 JavaScript 库，它使用 Mapbox GL 来渲染交互式地图。这是一个免费使用的开源库。您可以将 Mapbox 样式或使用 Mapbox Studio 创建的自定义样式添加到您的 Mapbox GL JS 应用程序。

and from this answer

从这个答案

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 样式用于 Mapbox GL 和原生 iOS 和 Android SDK。您不能将它们与经典的 Mapbox JS 一起使用。Mapbox JS 支持光栅图块，你不能设置它们的样式。它们只是图像。Mapbox GL 和本机 SDK（可以）使用矢量切片，并且这些都是可样式化的。

I believe I can use mapbox.jsas a replacement to the leafletcssand jssources, but can I do the same with mapbox-gl.js?
What other differences exist between the two libraries?

我相信我可以mapbox.js代替leafletcss和js来源，但我可以用mapbox-gl.js?
两个库之间还存在哪些其他差异？

采纳答案by iH8

As far as i know, Mapbox GL JS is going to be the replacement for the current Mapbox JS which uses Leaflet in the background. A lot of things Leaflet does, GL can do too and more. But not everything. The same goes vice versa. GL can do things Leaflet can't do. The big thing in GL is that it's built around vector tiles using WebGL. From the introduction article:

据我所知，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.

发布 Mapbox GL JS — 一个快速且强大的网络地图新系统。Mapbox GL JS 是一个客户端渲染器，因此它使用 JavaScript 和 WebGL 以视频游戏的速度和流畅度动态绘制数据。Mapbox GL 不是在服务器级别固定样式和缩放级别，而是将强大的功能放在 JavaScript 中，允许动态样式和自由格式交互。矢量地图是下一个演变，我们很高兴看到开发人员使用这个框架构建了什么。

If you really want a side by side comparison of the two, I'm sorry there is none as far as I know. There are too many things to mention/consider when making a comparison so it's best you do such a thing by yourself based upon your own requirements. A good start would be comparing the examples for each framework because it gives a good idea of what both can do:

如果你真的想要并排比较两者，对不起，据我所知没有。进行比较时要提及/考虑的事情太多，因此最好根据自己的要求自己做这样的事情。比较每个框架的示例是一个好的开始，因为它可以很好地了解两者都可以做什么：

• https://www.mapbox.com/mapbox-gl-js/examples/
• https://www.mapbox.com/mapbox.js/example/v1.0.0/

• https://www.mapbox.com/mapbox-gl-js/examples/
• https://www.mapbox.com/mapbox.js/example/v1.0.0/

After that you could compare their API's:

之后，您可以比较他们的 API：

• https://www.mapbox.com/mapbox-gl-js/api/
• https://www.mapbox.com/mapbox.js/api/v2.2.4/

• https://www.mapbox.com/mapbox-gl-js/api/
• https://www.mapbox.com/mapbox.js/api/v2.2.4/

One thing to keep in mind is that GL is brand spanking new and as we developers all know that comes with a price. Some kinks haven't been ironed out. As for Leaflet, it's very mature, widely used and very well tested/proven. If you'd like to take a peek at what problems there are currently with GL you could take a look at the issues over at Github, in the repository:

要记住的一件事是 GL 是全新的品牌，正如我们开发人员都知道的那样，这是有代价的。有些问题还没有解决。至于 Leaflet，它非常成熟、广泛使用并且经过很好的测试/证明。如果您想了解 GL 当前存在哪些问题，您可以查看 Github 上存储库中的问题：

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

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

Hope that helps, good luck!

希望能帮到你，祝你好运！

回答by tmcw

iH8's answer is great, to add a bit more detail:

iH8 的回答很棒，补充一点细节：

For base maps, Mapbox.js displays raster tiles (PNG & JPEG) files, and displays them using HTML & CSS. Mapbox GL JS displays vector tiles (fancy protocol buffers) and displays them using WebGL. It can also display raster tiles, but that's not the focus.

对于基本地图，Mapbox.js 显示光栅图块（PNG 和 JPEG）文件，并使用 HTML 和 CSS 显示它们。Mapbox GL JS 显示矢量切片（花式协议缓冲区）并使用 WebGL 显示它们。它还可以显示光栅图块，但这不是重点。

Both Mapbox.js and Mapbox GL JS support overlays like GeoJSON layers and markers. Both are open source, with similar licenses and a few shared contributors.

Mapbox.js 和 Mapbox GL JS 都支持 GeoJSON 图层和标记等叠加层。两者都是开源的，具有相似的许可证和一些共享的贡献者。

The styles for Mapbox.js layers are stored on servers and rendered with server technology. The styles for Mapbox GL JS are rendered dynamically in a browser, so they can be changed in realtime.

Mapbox.js 图层的样式存储在服务器上并使用服务器技术进行渲染。Mapbox GL JS 的样式在浏览器中动态呈现，因此可以实时更改。

Leaflet has more broad browser support, at the cost of a few things that some browsers can't support, like map tilt and rotation. Mapbox GL supports browsers that support WebGL and performs best on newer computers. It has a native version, called Mapbox GL Native, that performs really well on all mobile phones.

Leaflet 有更广泛的浏览器支持，代价是一些浏览器不能支持的东西，比如地图倾斜和旋转。Mapbox GL 支持支持 WebGL 的浏览器，并在较新的计算机上表现最佳。它有一个原生版本，称为 Mapbox GL Native，在所有手机上都表现得非常好。

Despite the names, you can use Leaflet with Mapbox and Mapbox.js and Mapbox GL with non-Mapbox styles.

尽管名称不同，但您可以将 Leaflet 与 Mapbox 和 Mapbox.js 以及 Mapbox GL 与非 Mapbox 样式一起使用。

回答by Ryan Hamley

I'm currently working on switching a complex Leaflet based map system over to Mapbox GL and I'd say that one notable difference I've found is in the draw tools and handling of GeoJSON layers. Leaflet has a suite of draw tools that include non-standard GeoJSON like markers, rectangles and circles. The developers of Mapbox GL made a decision to focus on native GeoJSON, which means there's no out of the box support for drawing/rendering circles and rectangles (e.g. there's nothing like L.Circle in Mapbox GL); there is a marker but styling it to look like a traditional Leaflet marker requires creating your own sprites or using an SVG. All of these things are still possible, but they take a little more set up on the part of the developer than they did in Leaflet.

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

Additionally, most of the Mapbox GL layers are rendered as canvas elements. This means that, unlike Leaflet, there are no HTML elements associated with your various layers. This makes it harder to target the elements with CSS if needed. One exception I've found here is markers which are rendered as separate HTML elements.

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

All of that being said, I've been able to almost fully replicate the existing draw tools and rendering styles with some small differences. If you need highly customized draw tools, Mapbox GL may be frustrating for you.

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

Browser support has been mentioned as a potential issue as well. Any browser that supports WebGLcan run Mapbox GL. This includes all major browsers. The only significant browser set we saw that didn't support Mapbox GL was IE10 or older, but our analytics indicated that almost none of our users still used these browsers so we officially dropped support for them. Your mileage may vary obviously.

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

Overall though, I'm happy with the switch because I think Mapbox GL is easier to work with and provides a better user experience.

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

回答by jimmont

Generally Leafletjs and Mapbox.js are the same, but with Mapbox.js having plugins and extensions which wrap Leaflet and tie into Mapbox's services (eg directions). Similar plugins and features exist from other companies or products and Leaflet can use them in addition to, or instead of Mapbox. The Leaflet-based libraries typically have better legacy browser support, use raster tiles, etc. That said features are being added that incorporate modern features like vector tiles (pbf, mvt, etc) and various renderers (including webgl).

通常 Leafletjs 和 Mapbox.js 是相同的，但 Mapbox.js 具有插件和扩展，这些插件和扩展包装 Leaflet 并绑定到 Mapbox 的服务（例如方向）。其他公司或产品也有类似的插件和功能，Leaflet 可以使用它们来补充或代替 Mapbox。基于 Leaflet 的库通常具有更好的旧浏览器支持、使用光栅图块等。这些特性正在被添加，其中包含现代功能，如矢量图块（pbf、mvt 等）和各种渲染器（包括 webgl）。

Mapbox-gl-js and the native variant mapbox-glare open-source libraries that are high-performance, highly optimized around vector tiles (pbf, mvt) and webgl for renderinginto a canvas element (for the -js variant). It is relatively new so some things that are easy with Leaflet might be different or challenging (as of April 2016), that said they're very similar and work quite well, including on mobile devices(from the past few years, eg iphone 5s). An example of a random quirk is that Hebrew labels in Israel, which read right-to-left, are backward and look like nonsense (it's an open issue being addressed).

Mapbox-gl-js 和本机变体 mapbox-gl是高性能、围绕矢量切片（pbf、mvt）和 webgl 高度优化的开源库，用于渲染到画布元素（对于 -js 变体）。它相对较新，因此使用 Leaflet 容易的一些事情可能会有所不同或具有挑战性（截至 2016 年 4 月），也就是说它们非常相似并且运行良好，包括在移动设备上（从过去几年开始，例如 iphone 5s ）。随机怪癖的一个例子是以色列的希伯来语标签，从右到左阅读，向后看，看起来像胡说八道（这是一个悬而未决的问题，正在解决）。

If dropping older browser support is okay going the Mapbox-gl(-js) route can be a fine choice. In my limited experience (working with it a few months) it has the best user+developer experience overall and Mapbox has been consistent in their engineering/output. I have less experience with their paid services and it's unclear how tightly coupled their libraries will be to these services. For a mobile project I moved to mapbox-gl-js after looking at Google Maps, Leaflet v0.7 and v1 and it seems to have been a good decision.

如果放弃旧浏览器支持可以，那么 Mapbox-gl(-js) 路线可能是一个不错的选择。在我有限的经验中（使用它几个月），它总体上拥有最佳的用户+开发人员体验，并且 Mapbox 在他们的工程/输出方面一直保持一致。我对他们的付费服务的经验较少，目前还不清楚他们的图书馆与这些服务的耦合程度如何。对于一个移动项目，我在查看了 Google Maps、Leaflet v0.7 和 v1 后转移到了 mapbox-gl-js，这似乎是一个不错的决定。

I started using Mapbox-gl-js with prior Leaflet experience and proficiency in HTML/CSS/JS and found the primerand examplesboth helpful in understanding technical details. Including how the map is styled with JSON (not CSS). Also take a close look at the terms of service, this was an important positive differentiator especiallycompared with Google. Mapbox's services don't have the most robust coverage outside the USA so be sure to give this some review as well (in my experience another provider is typically available, so this doesn't necessarily affect the decision to adopt the libraries, they're just very tightly coupled to Mapbox features or standards).

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

回答by sagar

For developers who have experience building web maps with Mapbox.js or Leaflet, switching old projects to use Mapbox GL JS can drastically improve the performance of your existing applications. Mapbox GL JS uses WebGL client-side rendering to display your maps, which results in faster loading, smoother transitions when zooming or panning, and greater flexibility to change map data and styles on the fly. These improvements make switching to Mapbox GL JS well worth the effort, so I recently converted Peter's Courier demo from Mapbox.js to GL

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

回答by Chris Casad

We've been using Mapbox-gl-js for over a year after transitioning from Leafletjs. We switched because we wanted to take advantage of the vector tiles feature. Overall we've liked Mapbox-gl-js though we've have run into a couple of gotchas.

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

We've run into some memory issues with Mapbox-gl-js (due to the fact WebGL is a hog), especially with some of our vector tiles. You definitely have to be careful about how much data is stored within the tiles themselves.

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

The other issue we're running into is working with government agencies and them having PCs that are locked down for security to the nth degree, such as turning off WebGL support at the OS level (they like to lock everything down no matter what). This is a killer because Mapbox-gl-js doesn't work without WebGL and getting a government agency to change a security policy is not an easy or quick thing to do. Unfortunately there doesn't seem to be any sort of easy fallback if a user doesn't have WebGL. We're still looking into the best solution for this problem.

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

回答by flawyte

Mapbox.js is deprecated, use Mapbox GL JSas stated on their website:

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

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

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

Mapbox GL JS

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

The article also contains examples of differences and similarities between the two.

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

回答by hete_pick

If you're planning on rendering more than 10 maps per page I'd recommend not using mapbox-gl. Mapbox-gl uses WebGl to dynamically draw maps. Although all modern browsers have support for WebGl we've ran into problems when opening too many WebGl contexts. Too many is subjective and dependent on exactly which browser your client is using. The number of contexts also seems to be tab independent so if your client has a tab open that is already using "too many" contexts your maps might not render as a consequence.

如果您计划每页渲染 10 张以上的地图，我建议您不要使用 mapbox-gl。Mapbox-gl 使用 WebGl 动态绘制地图。尽管所有现代浏览器都支持 WebGl，但我们在打开过多 WebGl 上下文时遇到了问题。太多是主观的，具体取决于您的客户端使用的浏览器。上下文的数量似乎也与选项卡无关，因此如果您的客户端打开的选项卡已经在使用“太多”上下文，您的地图可能因此无法呈现。

See below for a couple of linked issues:

请参阅下面的几个链接问题：

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

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

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

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

I've never used mapbox.js or leaflet for that matter, but for pages that require 10 or more maps I can definitely recommend not using mapbox-gl.

我从来没有使用过 mapbox.js 或传单，但是对于需要 10 个或更多地图的页面，我绝对建议不要使用 mapbox-gl。