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如何加载单个三维模型数据
533 0
|
定位技术 API 网络架构
地图图层接入:从mapbox转向cesium
由于地图坐标系的不统一,地图图商提供的图层服务也各有特色,在图层对接的开发过程中常会遇到许多坑,从二维图层到三维图层,地图引擎mapbox再到cesium,本文将分享笔者在近期地图图层接入过程中总结的一些经验。
3637 10
|
JavaScript 定位技术
echars 3D地图为区域自定义颜色
echars 3D地图为区域自定义颜色
echars 3D地图为区域自定义颜色
|
2月前
|
前端开发 JavaScript 定位技术
一、前端高德地图注册、项目中引入、渲染标记(Marker)and覆盖物(Circle)
文章介绍了如何在前端项目中注册并使用高德地图API,包括注册高德开放平台账号、引入高德地图到项目、以及如何在地图上渲染标记(Marker)和覆盖物(Circle)。
91 1
|
1月前
|
定位技术
腾讯地图自定义瓦片地图实现
腾讯地图自定义瓦片地图实现
38 1
|
2月前
|
前端开发 定位技术 API
二、前端高德地图、渲染标记(Marker)引入自定义icon,手动设置zoom
文章介绍了如何在前端使用高德地图API渲染标记(Marker),并引入自定义图标,同时展示了如何手动设置地图的缩放级别。
262 1
|
6月前
|
数据可视化 JavaScript 定位技术
Cesium第1篇,CesiumJS第1篇,CesiumJS使用详细,在vue中使用Cesium.js(WebGIS中的Cesium地图可视化应用)
Cesium是一种基于WebGL开源的虚拟地球技术,可以用于构建高性能、跨平台的三维地球应用程序,它支持多种数据格式和地图服务,可以实现地球表面的高精度渲染、地形分析、数据可视化等功能。Cesium还提供了丰富的API和插件,方便开发者进行二次开发和定制化,且可免费商用,在航空航天、国防、城市规划、教育等领域得到了广泛应用。
336 0
Cesium第1篇,CesiumJS第1篇,CesiumJS使用详细,在vue中使用Cesium.js(WebGIS中的Cesium地图可视化应用)
|
定位技术 API
Cesium开发:限制地图浏览范围
Cesium开发:限制地图浏览范围
747 1
|
定位技术
GIS开发:mapbox gl几种底图的加载
GIS开发:mapbox gl几种底图的加载
318 0
|
定位技术 API
Cesium开发:常用地图事件
Cesium开发:常用地图事件
343 0