地图图层接入:从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,所以在图层转换时需要再额外进行处理, 最后附上纠偏后的效果图🌸


相关文章
|
20天前
|
JavaScript 搜索推荐 定位技术
【百度地图2.5D、3D在Vue项目中的使用】嵌入二维百度地图、三维百度地图、多种显示模式风格样式颜色的百度地图
【百度地图2.5D、3D在Vue项目中的使用】嵌入二维百度地图、三维百度地图、多种显示模式风格样式颜色的百度地图
|
9月前
|
定位技术
高德地图进阶开发实战案例(6):添加自定义图片覆盖物图层获取可视范围经纬度的解决方案
高德地图进阶开发实战案例(6):添加自定义图片覆盖物图层获取可视范围经纬度的解决方案
179 0
|
9月前
|
数据可视化 定位技术
漏刻有时数据可视化解决方案:geo坐标地图、svg地图和图片热点地图的使用比较方案
漏刻有时数据可视化解决方案:geo坐标地图、svg地图和图片热点地图的使用比较方案
75 0
|
6月前
|
前端开发 数据可视化 定位技术
GIS前端-地图标绘与动画
GIS前端-地图标绘与动画
77 0
|
9月前
|
定位技术 API
Cesium开发:常用地图事件
Cesium开发:常用地图事件
218 0
|
9月前
|
定位技术
GIS开发:mapbox gl几种底图的加载
GIS开发:mapbox gl几种底图的加载
168 0
|
9月前
|
定位技术 API
Cesium开发:限制地图浏览范围
Cesium开发:限制地图浏览范围
400 1
|
10月前
|
定位技术
Cesium开发:二三维联动
Cesium开发:二三维联动
1143 0
|
定位技术 API
Leaflet中如何限制地图的拖动范围
本文讲解了在Leaflet中如何进行地图范围的控制,并通过代码的方式进行示例,并展示了最终效果。
571 0
Leaflet中如何限制地图的拖动范围