Mapbox GL JS与Mapbox.js

时间:2016-01-28 18:59:09

标签: javascript mapbox mapbox-gl-js

从Mapbox词汇表Mapbox.js

  

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

Mapbox GL JS

  

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

this answer

  

Mapbox样式适用于Mapbox GL以及原生iOS和Android SDK。您不能将它们与经典的Mapbox JS一起使用。 Mapbox JS支持光栅图块,您无法对其进行样式设置。他们只是图像。 Mapbox GL和原生SDK(可以)使用矢量切片,并且可以设置样式。

我相信我可以使用mapbox.js替代leaflet cssjs来源,但我可以对mapbox-gl.js做同样的事吗?<登记/> 两个图书馆之间还存在哪些差异?

8 个答案:

答案 0 :(得分:45)

据我所知,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 :(得分:27)

iH8的答案很棒,可以添加更多细节:

对于基本地图,Mapbox.js显示光栅图块(PNG和JPEG)文件,并使用HTML&amp; 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样式一起使用。

答案 2 :(得分:14)

一般来说,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的工程/输出一致。我对付费服务的经验较少,而且还不清楚他们的图书馆与这些服务的紧密联系。对于移动项目,我在查看Google地图,Leaflet v0.7和v1之后转移到mapbox-gl-js,这似乎是一个很好的决定。

我开始使用Mapbox-gl-js以及之前的Leaflet经验和HTML / CSS / JS的熟练程度,发现the primerexamples都有助于理解技术细节。包括如何使用JSON(而不是CSS)设置地图样式。同时仔细研究服务条款,与Google相比,这是一个重要的积极差异因素,尤其是。 Mapbox的服务在美国境外的覆盖范围最广,所以请务必给出一些评论(根据我的经验,其他提供商通常都是可用的,所以这并不一定影响决策为了采用这些库,它们与Mapbox功能或标准紧密耦合。

答案 3 :(得分:11)

我目前正致力于将复杂的基于Leaflet的地图系统切换到Mapbox GL,并且我说我发现的一个显着差异在于绘制工具和GeoJSON图层的处理。 Leaflet有一套绘图工具,包括非标准的GeoJSON,如标记,矩形和圆形。 Mapbox GL的开发人员决定专注于原生GeoJSON,这意味着没有开箱即用的绘图/渲染圆和矩形支持(例如,没有像Mapbox GL中的L.Circle那样) ;有一个标记,但造型看起来像传统的Leaflet标记需要创建自己的精灵或使用SVG。所有这些事情仍然是可能的,但是他们在开发人员方面的设置要比在Leaflet中设置的更多。

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

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

浏览器支持也被提到是一个潜在的问题。 supports WebGL可以运行Mapbox GL的任何浏览器。这包括所有主流浏览器。我们看到的唯一一个不支持Mapbox GL的重要浏览器设置是IE10或更早,但我们的分析表明我们的用户几乎都没有使用这些浏览器,所以我们正式放弃对它们的支持。您的里程可能会有很大差异。

总体而言,我对切换感到满意,因为我认为Mapbox GL更易于使用并提供更好的用户体验。

答案 4 :(得分:2)

从Leafletjs过渡后,我们已经使用Mapbox-gl-js一年多了。我们之所以进行切换是因为我们想利用矢量切片功能。总体而言,尽管遇到了一些麻烦,但我们还是喜欢Mapbox-gl-js。

我们已经遇到了Mapbox-gl-js的一些内存问题(由于WebGL是猪),尤其是某些矢量切片。您绝对必须注意磁贴本身中存储了多少数据。

我们遇到的另一个问题是与政府机构合作,他们将PC锁定到第n级的安全性,例如在操作系统级别关闭WebGL支持(无论如何,它们都将锁定一切)什么)。这是一个杀手because,因为没有WebGL,Mapbox-gl-js就无法工作,而要让政府机构更改安全策略也不是一件容易或快捷的事情。不幸的是,如果用户没有WebGL,似乎没有任何容易的后备方法。我们仍在寻找针对此问题的最佳解决方案。

答案 5 :(得分:1)

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

答案 6 :(得分: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。

答案 7 :(得分:0)

不推荐使用Mapbox.js,请按照on their website的说明使用Mapbox GL JS

  

Mapbox.js

     
      
  • 不再进行积极开发
  •   
  • 支持栅格图块
  •   
  • 标题是由服务器生成的
  •   
  • 无法在浏览器中更改地图样式,但可以动态设置地图叠加层
  •   
     

Mapbox GL JS

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

本文还包含了两者之间异同的示例。