MapBoxGL资料及技术优势
一、介绍
Mapbox GL JS 是一个 JavaScript 库,它使用 WebGL,以 vector tiles 和 Mapbox styles 为来源,将它们渲染成互动式地图。它是 Mapbox GL 生态系统的一部分,其中还包括 Mapbox Mobile,它是一个用 C++ 编写的兼容桌面和移动平台的渲染引擎。
Mapbox GL JS 的核心特点是客户端渲染。在 Mapbox GL JS 中创建 Web 应用时,通过 JavaScript 和 WebGL 把地图作为 vector tiles 进行渲染。 相比将服务器的一系列切片图片组合起来后再显示,通过Mapbox GL JS渲染可以快速改变样式,使得地图的呈现更加多样化。Mapbox地图数据来源于Open Street Map(OSM)等其他地图数据供应商。
二、资源
API文档:https://www.mapbox.cn/mapbox-gl-js/examples/
API教程:https://www.mapbox.cn/tutorials/gljs/
API类参:https://www.mapbox.cn/mapbox-gl-js/api/
API插件:https://www.mapbox.cn/mapbox-gl-js/plugins/
Github地址:https://github.com/mapbox/mapbox-gl-js
API Style规范:https://www.mapbox.cn/mapbox-gl-js/style-spec/
三、示例代码
mapboxgl.accessToken = ‘undefined’;
var map = new mapboxgl.Map({
container: ‘map’,
style: ‘mapbox://styles/mapbox/streets-v9’
});
四、优势劣势
MapBox优势:
1、 能够依靠矢量瓦片渲染大量的数据
2、 地图浏览平滑流畅,可视化效果丰富
3、 可在支持WebGL的移动端浏览器上运行
4、 使用方便,良好的可扩展性、拥有众多的插件
5、 支持3D效果:可以倾斜、旋转地图、透视图
6、 结合矢量瓦片自定义设置地图风格(https://studio.mapbox.com/styles/ 需要注册)
MapBox劣势:
1、 国内生态不是很成熟,单独使用mapbox-gl的项目较少;
2、 地图付费,且仅支持3857的坐标系;
3、 样式表达式比较复杂,学习成本较高;
4、 部署本地的矢量瓦片服务器(tileserver-gl-light、geoserver、Mapnik和PostGIS、Tippecanoe)较复杂;
5、 图层、数据源的添加删除操作不友好;
6、 结合ThreeJS实现gltf模型加载,需要在ThreeJS中设置光照,比较复杂;
五、浏览器支持
只要支持webgl的浏览器都可以使用Mapbox的矢量切片地图;对于栅格切片地图,就不需要考虑webgl了。 您的问题应该就是webgl的问题,目前mapbox加载的矢量切片地图,渲染时使用的是webgl技术,所以你的浏览器要支持,并且开启了webgl的功能。(官方回复)
https://docs.mapbox.com/help/troubleshooting/mapbox-browser-support/