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如何加载单个三维模型数据
483 0
|
定位技术 API 网络架构
地图图层接入:从mapbox转向cesium
由于地图坐标系的不统一,地图图商提供的图层服务也各有特色,在图层对接的开发过程中常会遇到许多坑,从二维图层到三维图层,地图引擎mapbox再到cesium,本文将分享笔者在近期地图图层接入过程中总结的一些经验。
3567 10
|
5月前
|
数据可视化 JavaScript 定位技术
Cesium第1篇,CesiumJS第1篇,CesiumJS使用详细,在vue中使用Cesium.js(WebGIS中的Cesium地图可视化应用)
Cesium是一种基于WebGL开源的虚拟地球技术,可以用于构建高性能、跨平台的三维地球应用程序,它支持多种数据格式和地图服务,可以实现地球表面的高精度渲染、地形分析、数据可视化等功能。Cesium还提供了丰富的API和插件,方便开发者进行二次开发和定制化,且可免费商用,在航空航天、国防、城市规划、教育等领域得到了广泛应用。
158 0
Cesium第1篇,CesiumJS第1篇,CesiumJS使用详细,在vue中使用Cesium.js(WebGIS中的Cesium地图可视化应用)
|
5月前
|
JavaScript 搜索推荐 定位技术
【百度地图2.5D、3D在Vue项目中的使用】嵌入二维百度地图、三维百度地图、多种显示模式风格样式颜色的百度地图
【百度地图2.5D、3D在Vue项目中的使用】嵌入二维百度地图、三维百度地图、多种显示模式风格样式颜色的百度地图
|
定位技术 API
Cesium开发:限制地图浏览范围
Cesium开发:限制地图浏览范围
672 1
|
定位技术
GIS开发:mapbox gl几种底图的加载
GIS开发:mapbox gl几种底图的加载
276 0
|
定位技术 API
Cesium开发:常用地图事件
Cesium开发:常用地图事件
319 0
|
定位技术 API 容器
百度地图覆盖物加载svg图片的实战案例分析
百度地图覆盖物加载svg图片的实战案例分析
547 0
|
存储 资源调度 JavaScript
2.Vue3中Cesium地图初始化及地图控件配置
本文中,我们主要介绍 Cesium 在 Vue 3运行环境的配置,以及 Cesium 实例中控件的显隐设置,本文是后续文章内容的基础,项目代码在此查看;通过本文,我们可以得到一个纯净的 cesium 项目,后续的操作我们就可以在此基础上进行;
611 0
|
前端开发 定位技术 数据格式
GeoServer使用CSS渲染地图
CSS Style是GeoServer的一个扩展插件,使用CSS写起来的地图渲染策略文件相比较SLD而言,非常的简洁,本文根据GeoServer用户手册,稍微改写,便于该知识点的推广。
1339 0