Cesium加载Mapbox自定义地图

简介: Cesium加载Mapbox自定义地图

image.png

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

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

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

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

MapBox Studio 自定义地图样式

image.png

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

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

注意:

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

image.png

Cesium.MapboxStyleImageryProvider接口

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

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

方式一:

image.png

其中 url , username , token 都为固定,可以从 MapBoxShare 页面上获得

方式二:

image.png

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

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

总结分析:

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

Cesium.MapboxImageryProvider接口

使用 mapbox-gl.jsMVTImageryProvider.js

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

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

优缺点分析

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


相关文章
Cesium系列:加载单个模型
Cesium如何加载单个三维模型数据
529 0
|
定位技术 API 网络架构
地图图层接入:从mapbox转向cesium
由于地图坐标系的不统一,地图图商提供的图层服务也各有特色,在图层对接的开发过程中常会遇到许多坑,从二维图层到三维图层,地图引擎mapbox再到cesium,本文将分享笔者在近期地图图层接入过程中总结的一些经验。
3629 10
|
6月前
|
JavaScript 搜索推荐 定位技术
【百度地图2.5D、3D在Vue项目中的使用】嵌入二维百度地图、三维百度地图、多种显示模式风格样式颜色的百度地图
【百度地图2.5D、3D在Vue项目中的使用】嵌入二维百度地图、三维百度地图、多种显示模式风格样式颜色的百度地图
|
定位技术 API
Cesium开发:限制地图浏览范围
Cesium开发:限制地图浏览范围
742 1
|
定位技术
GIS开发:mapbox gl几种底图的加载
GIS开发:mapbox gl几种底图的加载
310 0
|
定位技术 API
Cesium开发:常用地图事件
Cesium开发:常用地图事件
342 0
|
定位技术 API 容器
百度地图覆盖物加载svg图片的实战案例分析
百度地图覆盖物加载svg图片的实战案例分析
575 0
|
存储 资源调度 JavaScript
2.Vue3中Cesium地图初始化及地图控件配置
本文中,我们主要介绍 Cesium 在 Vue 3运行环境的配置,以及 Cesium 实例中控件的显隐设置,本文是后续文章内容的基础,项目代码在此查看;通过本文,我们可以得到一个纯净的 cesium 项目,后续的操作我们就可以在此基础上进行;
658 0
|
API 定位技术 网络架构
leaflet地图介绍
本文将介绍有关于leaflet地图组件在web中的应用 什么是leaflet? leaflet是一个轻量级的开源js地图组件,适用于移动设备,用法简单性能优越,如果你曾经使用过高德或者百度的地图api的话,相信你可以很轻易的上手更加简单的leaflet leaflet是怎么运作的? leaflet的工作方法和高德百度之类的并不一样,由于leaflet是个开源项目,所以它本身只有地图组件并不提供地图内容,也就是说,我们不需要为了使用leaflet而去注册key。
2373 0
|
定位技术
openlayers控制地图显示范围
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gisdoer/article/details/83108903 openlaye...
2874 0