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


目录
打赏
0
0
0
0
43
分享
相关文章
如何保证分布式文件系统的数据一致性
分布式文件系统需要向上层应用提供透明的客户端缓存,从而缓解网络延时现象,更好地支持客户端性能水平扩展,同时也降低对文件服务器的访问压力。当考虑客户端缓存的时候,由于在客户端上引入了多个本地数据副本(Replica),就相应地需要提供客户端对数据访问的全局数据一致性。
31853 78
如何保证分布式文件系统的数据一致性
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第8章FlexBox布局(上)
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第8章FlexBox布局
17655 18
灵骏可预期网络:Built for AI Infrastructure
通用人工智能离我们越来越近,全世界的关注和投入正在带来日新“周”异的变化。回顾人工智能的诞生和发展历程,人类计算能力的进步几乎牵动了每一次的重大技术突破,当前的大模型热潮更是如此,只是动辄千万亿参数级的模型体量,所需计算资源远超单颗芯片的上限,超大规模的计算集群成为支撑技术发展和应用创新的关键基础设施。面向智能:云基础设施网络技术面临新挑战如何突破单个芯片、单个服务器节点的算力上限,在超大规模情况
31193 10
灵骏可预期网络:Built for AI Infrastructure
设计模式(C++版)
看懂UML类图和时序图30分钟学会UML类图设计原则单一职责原则定义:单一职责原则,所谓职责是指类变化的原因。如果一个类有多于一个的动机被改变,那么这个类就具有多于一个的职责。而单一职责原则就是指一个类或者模块应该有且只有一个改变的原因。bad case:IPhone类承担了协议管理(Dial、HangUp)、数据传送(Chat)。good case:里式替换原则定义:里氏代换原则(Liskov 
36193 19
设计模式(C++版)
带你简单了解Chatgpt背后的秘密:大语言模型所需要条件(数据算法算力)以及其当前阶段的缺点局限性
带你简单了解Chatgpt背后的秘密:大语言模型所需要条件(数据算法算力)以及其当前阶段的缺点局限性
24469 14
重生之---我测阿里云U1实例(通用算力型)
阿里云产品全线降价的一力作,2023年4月阿里云推出新款通用算力型ECS云服务器Universal实例,该款服务器的真实表现如何?让我先测为敬!
36515 15
重生之---我测阿里云U1实例(通用算力型)
为笔记本更换固态硬盘的方法
本文介绍为笔记本电脑拆机、更换固态硬盘的具体方法~
18011 41
为笔记本更换固态硬盘的方法
Redis性能高30%,阿里云倚天ECS性能摸底和迁移实践
Redis在倚天ECS环境下与同规格的基于 x86 的 ECS 实例相比,Redis 部署在基于 Yitian 710 的 ECS 上可获得高达 30% 的吞吐量优势。成本方面基于倚天710的G8y实例售价比G7实例低23%,总性价比提高50%;按照相同算法,相对G8a,性价比为1.4倍左右。
【分布式技术专题】「分布式技术架构」手把手教你如何开发一个属于自己的限流器RateLimiter功能服务
随着互联网的快速发展,越来越多的应用程序需要处理大量的请求。如果没有限制,这些请求可能会导致应用程序崩溃或变得不可用。因此,限流器是一种非常重要的技术,可以帮助应用程序控制请求的数量和速率,以保持稳定和可靠的运行。
29747 52
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问