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渲染到地球上,所以数据量大的时候,非常占性能,需要等待地图数据加载完成,地球缩放的时候非常影响观看效果。- 验证的时候全国只显示行政区域和边界,效果理想,加上行政名称,就非常卡顿了,若是城市级或全国级,不要求高精度的数据展示,可以考虑此方案。