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


相关文章
|
JSON 数据可视化 定位技术
GIS开发:Maputnik地图样式编辑器
GIS开发:Maputnik地图样式编辑器
849 0
|
JavaScript 前端开发 大数据
GIS开发:推荐Mapbox gl解决方案
GIS开发:推荐Mapbox gl解决方案
355 0
|
6月前
|
缓存 前端开发 定位技术
Cesium加载Mapbox自定义地图
Cesium加载Mapbox自定义地图
171 0
|
前端开发 API
智慧城市中城市级建筑白膜的加载与动态调色
本文以cesium为例,重点了阐述了在智慧城市场景中,如何基于cesium进行城市级建筑模拟渲染,以及点击展示模型数据的属性信息,支持根据建筑的不同高度来渲染不同的颜色。 cesium支持将城市建筑信息转换成b3dm数据,通过api可进行展示。
2202 0
智慧城市中城市级建筑白膜的加载与动态调色
|
数据可视化 前端开发 JavaScript
3分钟,教你搭建一个三维城市建筑可视化系统 ( Cesium 加载 shp 数据 )
3分钟,教你搭建一个三维城市建筑可视化系统 ( Cesium 加载 shp 数据 )
3731 0
3分钟,教你搭建一个三维城市建筑可视化系统 ( Cesium 加载 shp 数据 )
|
定位技术
GIS开发:mapbox gl几种底图的加载
GIS开发:mapbox gl几种底图的加载
394 0
|
定位技术
Cesium开发:二三维联动
Cesium开发:二三维联动
1339 0
分享:mapbox-gl的CGCS2000修改版
分享:mapbox-gl的CGCS2000修改版
239 0
|
存储 JSON 定位技术
4.Cesium中实体Entity的增删改查及性能优化(超详细)
Cesium 作为一个功能强大的 WebGL 三维地球仪库,内置了丰富的三维地图展示能力。在 Cesium 中,我们可以通过 Entity(实体)在三维场景中添加和控制各种三维对象,如点、线、面、模型等。本文将介绍 Cesium 中实体的增删改查操作。
3139 0
|
定位技术 API
Cesium开发:限制地图浏览范围
Cesium开发:限制地图浏览范围
791 1

热门文章

最新文章