项目地图基于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在原点请求示例
在项目地图组件中更换选中的地图底图服务,加载后和现有组件的边界发现,图层和边界不太贴合, 南北有偏差, 移动中心后偏差减少,东西方向贴合。(原因:图层服务投影方式不同)
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的外部和内部,点云数据,并支持样式配置和用户交互操作。
在对接过程中可能存在由于图层数据格式转换等原因,动态单体化效果不灵敏,需要在点击时扩大点击区域面来获取相应单体信息;同时三维图层的叠加顺序还可能会对其图层造成遮挡,导致图层“消失”,需要手动调整加载的图层高度。
s3m格式请求示例
cesium同时还支持多种资源的图像图层,包括WMS,TMS,WMTS以及时序图像。但是其他加载不同的图层加载方式各有不同,cesium提供的api的种类繁多,比如加载mapbox (MapboxStyleImageryProvider), 高德(UrlTemplateImageryProvider), Bing (BingMapsImageryProvider) ,天地图(TiandituImageryProvider) , iserver影像切片(SuperMapImageryProvider) ,并且可能由于坐标系的不同,在调用时需进行单个图层坐标系的转换处理。
cesium加载mapbox底图
cesium加载高德底图
可以发现,3D模型与高德底图有一定的偏差,这是因为cesium的坐标系为wgs84坐标,高德地图坐标gcj02,所以在图层转换时需要再额外进行处理, 最后附上纠偏后的效果图🌸