文档说明****
本文为制作cesium或者superMap的地形数据的文档,可以为单独某一地区单独实现地形3D效果。如图1:
如果项目中集成了SuperMap,那么包括地形服务在内的很多api,都被SuperMap改造以至于不能像Cesium那样调用。特别是地形服务这块,如果用了SuperMap,几乎就不能用Cesium在内的其它加载地形服务的方式了。
上图外层的灰色边缘为一个实例墙。
准备材料
-
目标区域的GeoJson数据
-
包含目标区域的地形数据,我用的是tif格式的文件
-
QGIS软件
-
把tif格式转化为小文件的工具:cesiumlab或SuperMap Desktop。根据需求不同采用不同的文件
材料获取
- 目标区域的GeoJson数据可以在阿里云数据化可视平台处获取(如图2)。特别说明的一点是:下载好的json文件,需要在编辑器中,删除parent字段。不然QGIS软件处理会报错。
-
包含目标区域的地形数据,我用的是tif格式的文件。此处渠道较多,且比较复杂。我是通过微信搜索的文章,获取的榆林市DEM的百度云的下载链接。本文章不做过多介绍。
-
QGIS软件是一款开源的地理信息系统(GIS)软件,用于查看、编辑、创建、分析和发布地理空间数据。
-
cesiumlab是一款专为 Cesium 开源三维地球平台设计的数据处理工具集。可以用它把tif地形数据切割为cesium和superMap都支持的.terrain格式文件。但有个问题,可能是我代码写的不对,也可能是分割的太细了,结果是页面请求.terrain过于频繁导致卡顿。SuperMap Desktop是国产软件SuperMap的桌面端编辑器,它也兼备一些文件处理功能,但主要是还是把文件导出为SuperMap能识别的文件格式,如果自己项目没有用到SuperMap可以不用下载这个软件。如果下载这个软件,需要同时下载SuperMap iServer以启动文件服务。SuperMap iServer下载地址和SuperMap Desktop在一个网页里。
制作地形文件
依次导入tif地形文件到QGIS软件(如图3、图4、图5)。
然后在栅格-提取-按掩膜图层裁剪栅格(如图6、图7)。一般而言,可以在图7中直接导出tif文件,也可以先不选,导出一个新图层,然后右键该图层点击导出。
但实际操作中发现,如果把行政区边界扩大一点裁切会更好,因为有可能后续在cesium或SuperMap上添加行政区划边界,而地形边缘的颜色会随着周围的颜色而改变,所以会导致地形边缘的颜色很奇怪。把行政区边界扩大的方式为在QGIS中选择矢量-地形处理工具-缓存区菜单中,添加缓冲地带(如图8、图9)。然后以缓冲区为切割。
实际操作中还发现另外一件事情是:如果把目标地形整体拔高,可以对于整体地图来说,产生特别强烈的3D效果(如图1)
地形拔高操作为:栅格->栅格计算器(如图10)
把地形文件转转化为Cesium或SuperMap能用的格式文件
使用CesiumLab转化
打开CesiumLab后,选中地形切片,输入文件选中QGIS生成导出的tif文件,储存类型选择散列,输出路径选择一个空文件夹,点击提交处理(如图11)。
注意,生成的文件会特别多,所以:
-
点击处理时,最好关闭本机window的实时防护,不然电脑风扇会一直叫。
-
文件夹最好不要在前端项目里,不然无论是webpack还是vite,在启动时都会很慢,除非在配置文件中排除该文件夹的编译。建议存放到一个非前端的项目的普通文件夹里,然后前端使用anywhere或者nginx启动服务。
使用SuperMap Desktop转化
在SuperMap Desktop中,右键数据源->新增文件形数据源->选中要缓存的地址。然后右键新增文件形数据源->导出数据集->选中QGIS导出的新的tif地形数据(如图12)。
然后可以预览效果,不过此处的预览很粗略,只能看一下是不是真的导入进去了(如图13)。
右键导入的数据集,点击生成缓存,即可生成切片(如图14,图15)。
使用SuperMapIServer发布SuperMap服务
如果项目中用的是SuperMap,那么就需要使用SuperMapIServer把上边生成的切片发布地形服务。
SuperMapIServer的安装及激活步骤,请在互联网查阅其它文档。
启动/bin/startup.bat,启动成功后访问http://localhost:8090/iserver/admin-ui/home。此处需要登陆,所以安装该软件时,请在其它地方保存好自己设置的账号密码。
点击快速发布(如图16)->选中三维切片缓存(如图17)->选中自己保存的切片目录中的.sct文件(如图18)->选中三维服务(如图19)->点击发布->发布成功(如图20)
点击图20中的地址,依次进入realspace / scenes得到图21。点击 以WebGL3D(支持s3m格式模型缓存) 即可预览。并且,当前地址栏去除最后的/scenes,就是下文SuperMap预览demo的服务地址。如:
http://localhost:8090/iserver/services/3D-local3DCache-yulin001_7000yulin0017000/rest/realspace
/scenes