Cesium加载影像地图，一般都是天地图，高德地图，必应地图，谷歌地图等。

如果真实项目中想要自定义地图的风格样式，为了配合相应的页面UI风格，这些公共免费的影像地图就满足不了需求。

但是MapBox可以支持自定义风格样式，并且有公共的一些地理数据支持；如果公共地理数据满足不了需求，还可以自己上传矢量和栅格数据；

Cesium中也有相应的接口支持加载渲染。

MapBox Studio 自定义地图样式

MapBox个人工作台有三个Tab选项

• Styles：地图自定义样式
• Tilesets：自定义上传的矢量或栅格数据，能上传 300MB 以内的 GeoJSON 文件，不能修改
• Datasets：自定义上传的矢量或栅格数据，只能上传 20MB 以内的 GeoJSON 文件，支持修改

注意：

• Tilesets 上传数据后已经设置好了显示缩放范围，比如全国省市行政区划就被默认设成了5-22，就比较麻烦
• Styles 里面的图层，可以根据以前的地图风格复制一份，这样图层数据就不需要重新添加了
• Styles 自定义地图风格完成后，点击 Publish 进行发布，默认为私人的，记录 share 中的 styleId

Cesium.MapboxStyleImageryProvider接口

在 MapBox Studio 制作好地图风格后，可以将此地图数据 Share 和 Publish，并在 Share 界面记录下此地图的唯一标识值 styleId

此时，自定义地图已经完成，只剩下在 Cesium 场景页面中加载渲染了

方式一：

其中url,username,token都为固定，可以从MapBox的Share页面上获得

方式二：

注意：为了优化渲染效果，Cesium场景可以设置以下参数：

• 场景模式：设为 2D模式 或者 哥伦布2.5D模式
• 地图投影方式：设为墨卡托投影方式，球面默认投影方式为地理投影
• 最大缩放高度限制 在 9392000米，因为层级再缩小，此层级北京附近 label 显示有缺失的小bug

总结分析：

• MapBox地图风格自定义，自由化定制
• Cesium有专门的接口去对接地图风格，方便快捷
• 请求 MapBox 的免费瓦片接口，很慢，会有些延迟卡顿的加载，浏览体验不佳，如果将瓦片数据加入缓存后，再次请求就会好一些

Cesium.MapboxImageryProvider接口

使用 mapbox-gl.js 和 MVTImageryProvider.js

在 Mapbox Studio 的 Share 页面下载样式文件 style.json，将样式文件引入，赋值给 style ，mapbox-gl 将样式文件的数据解析后，生成 canvas ，渲染到场景中

注意：引入 MVTImageryProvider.js 后，调用 style 文件，需要提前设置 mapbox.accessToken

优缺点分析

• 对非开发人员友好，当新建项目，需要配置一个新风格的地图时，实施人员可以直接在 Mapbox Studio 编辑器中编辑地图样式，不需要写代码。当编辑好后，直接下载样式文件引入到 Cesium 相应页面，就可以使用了
• mapbox-gl 加载地图数据，不是瓦片数据，全是矢量数据，然后全部用主题样式渲染一遍，生成canvas渲染到地球上，所以数据量大的时候，非常占性能，需要等待地图数据加载完成，地球缩放的时候非常影响观看效果。
• 验证的时候全国只显示行政区域和边界，效果理想，加上行政名称，就非常卡顿了，若是城市级或全国级，不要求高精度的数据展示，可以考虑此方案。

– 欢迎点赞、关注、转发、收藏【我码玄黄】，gonghao同名