地图图层接入:从mapbox转向cesium

简介: 由于地图坐标系的不统一,地图图商提供的图层服务也各有特色,在图层对接的开发过程中常会遇到许多坑,从二维图层到三维图层,地图引擎mapbox再到cesium,本文将分享笔者在近期地图图层接入过程中总结的一些经验。

项目地图基于mapbox开发,支持基于osm 标准的栅格地图服务,以及EPSG:3857(web墨卡托)投影的矢量切片数据。在近期地图对接过程中,遇到了比较特别的地图图层格式,图层坐标系是EPSG:4490,回顾过之前对接gis的4490坐标系的wms图层格式,尝试接入后发现图层并没有按预期的显示出来。分析请求发现是 xyscale底图的ur模板组合,于是开始了xyscale底图图层及后续倾斜摄影图层的接入研究。

查阅一翻资料后,找到基于超图官方提供的能够支持多坐标系的mapbox扩展 mapbox-gl-enhance.js,支持对接EPSG:4326、EPSG:4490、EPSG:4214、EPSG:4610、EPSG:3857这几种坐标系的地图。在现有项目mapbox地图组件基础上,开始对接新图层格式。

mapbox加载4490坐标系的tileimage 图层

tileimage图层,supermap iserver扩展支持的图层服务, 类似于谷歌XYZ(图像通过REST API提供,URL为http://.../Z/X/Y.png,其中Z为缩放级别,X和Y标识图块,XY的原点在左上角,X从左向右,Y从上向下),tileimage的XY的原点也在左上角,X从左向右,Y从上向下),scale为缩放级别,但不同于Z(0-22)层级。

简单写了个示例后

注意其新增的rasterSource: 'iserver'crs: 'EPSG:4490',  加上后,mapbox的坐标系将更改为4490,其原来的mapbox的底层图将显示异常。

zoom为0时,整体加载效果:

xy在原点请求示例

https://iserver.supermap.io/iserver/services/map-china400/rest/maps/China_4490/tileimage.png?scale=1.3521308572821239e-8&x=0&y=0&width=256&height=256&transparent=true&redirect=false&cacheEnabled=true&origin=%7B%22x%22%3A-180%2C%22y%22%3A90%7D

在项目地图组件中更换选中的地图底图服务,加载后和现有组件的边界发现,图层和边界不太贴合, 南北有偏差, 移动中心后偏差减少,东西方向贴合。(原因:图层服务投影方式不同)

mapbox-gl + deck.gl + loader.gl加载3D Tiles

mapbox-gl使用three.js结合mapbox-gl中custom layer来加载gltf格式的3D模型,结合loaders.gl+deck.gl加载倾斜摄像3D Tiles格式数据,示例如下:


到此,mapbox已经成功加载xyscale 组合的图层,加载常见不同坐标系的图层服务,加载3D-Tiles模型。但转变mapbox坐标系,会对原来的地图组件带来比较大的影响,在重地图三维交互场景,且资源平台提供的倾斜摄影格式为s3mb(supermap提供的倾斜摄影模型的数据格式),在未能转为3D Tiles格式的情况下,选择cesium这个主打3D Tiles图层的地图引擎,是一个较好的选择。

cesium加载倾斜摄影(S3MTilesLayer)

cesium使用3D Tiles格式流式加载各种不同的3D数据,包含倾斜摄影模型、三维建筑物、CAD和BIM的外部和内部,点云数据,并支持样式配置和用户交互操作。

在对接过程中可能存在由于图层数据格式转换等原因,动态单体化效果不灵敏,需要在点击时扩大点击区域面来获取相应单体信息;同时三维图层的叠加顺序还可能会对其图层造成遮挡,导致图层“消失”,需要手动调整加载的图层高度。

image.png

s3m格式请求示例

http://www.supermapol.com/realspace/services/3D-CBDCache20200416/rest/realspace/datas/Building%40CBD/data/path/Tile_-14623_42663_0000/Tile_-14623_42663_0000_0002_0000.s3m

cesium同时还支持多种资源的图像图层,包括WMS,TMS,WMTS以及时序图像。但是其他加载不同的图层加载方式各有不同,cesium提供的api的种类繁多,比如加载mapbox (MapboxStyleImageryProvider), 高德(UrlTemplateImageryProvider), Bing (BingMapsImageryProvider)  ,天地图(TiandituImageryProvider)  , iserver影像切片(SuperMapImageryProvider) ,并且可能由于坐标系的不同,在调用时需进行单个图层坐标系的转换处理。

cesium加载mapbox底图


cesium加载高德底图

可以发现,3D模型与高德底图有一定的偏差,这是因为cesium的坐标系为wgs84坐标,高德地图坐标gcj02,所以在图层转换时需要再额外进行处理, 最后附上纠偏后的效果图🌸


目录
打赏
0
8
10
2
7
分享
相关文章
Cesium系列:加载单个模型
Cesium如何加载单个三维模型数据
823 0
干货!解决Cesium中Entity移动漂移的问题
案例场景:在Cesium开发三维场景展示中,肯定会碰到加载Entity的需求,如果在你的gis应用中,带了地形的展示。那么在旋转切换画面时,Entity是否跟着一起动了起来,感觉像漂移一样呢?
3914 0
干货!解决Cesium中Entity移动漂移的问题
Cesium加载Mapbox自定义地图
Cesium加载Mapbox自定义地图
340 0
地图可视化的艺术:深入比较Mapbox、OpenLayers、Leaflet和Cesium,不同场景下应如何选择地图库
选择合适的地图库取决于项目的需求、团队的技术栈以及预算等因素。简单来说,新手可以从leaflet入手;GIS开发使用openlayers会更顺手一些;mapbox适应大多数2D和2.5D场景,可视化效果好,但是不开源;cesium更侧重于3D场景。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出
Mapbox添加行政区矢量图层,Mapbox添加分级设色图层,Mapbox添加文本标记图层,Mapbox给行政区矢量数据添加名称,Mapbox自定义鼠标悬浮框,Mapbox添加天地图底图
Mapbox的中国分部好像在2021年左右就退出中国了,官方文档的汉化工作也戛然而止,相关的社区建设也相当欠缺,内容比较混乱,最离谱的是mapbox官方底图库中的中国地图基本都是错的,天地图引入又麻烦...... 恰好我最近有一个基础的mapbox应用需求,就做了一些整理和探索,分享给大家。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来
|
9月前
|
Cesium导入geojson数据
这篇文章详细描述了如何在Cesium中导入GeoJSON数据来绘制地理矢量数据,并提供了实现的具体方法和示例代码。
317 2
Cesium导入geojson数据
惊呆了!这些前端技巧竟然能让你的网站支持AR/VR体验!
【10月更文挑战第31天】在数字化时代,用户对网页交互体验的要求日益提高,传统二维网页已难以满足需求。本文介绍如何利用前端技术,特别是Three.js,实现AR/VR体验,提升用户满意度和网站价值。通过示例代码,展示如何创建简单的3D场景,并探讨AR/VR技术的基本原理和常用工具,帮助开发者打造沉浸式体验。
473 6
在Mars3d实现cesium的ImageryLayer自定义瓦片的层级与原点
通过上述步骤,您可以成功在Mars3D平台上集成Cesium,并实现自定义瓦片图层的层级与原点配置。这一过程不仅提升了地图应用的定制化程度,也为处理特定数据集和优化用户体验提供了灵活的解决方案。在实际开发过程中,不断测试和微调是确保图层展示效果与性能的关键。
460 0
Cesium渲染一帧中用到的图形技术
Cesium渲染一帧中用到的图形技术
267 0
Cesium渲染一帧中用到的图形技术
国内77个城市建筑物轮廓(带高度)数据分享(附百度网盘)
国内77个城市建筑物轮廓(带高度)数据分享(附百度网盘)
1581 1
登录插画

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

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