地图图层接入：从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地图组件基础上，开始对接新图层格式。

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

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

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) ，并且可能由于坐标系的不同，在调用时需进行单个图层坐标系的转换处理。

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