为某一地区制作cesium地形数据

文档说明****

本文为制作cesium或者superMap的地形数据的文档,可以为单独某一地区单独实现地形3D效果。如图1:

如果项目中集成了SuperMap,那么包括地形服务在内的很多api,都被SuperMap改造以至于不能像Cesium那样调用。特别是地形服务这块,如果用了SuperMap,几乎就不能用Cesium在内的其它加载地形服务的方式了。

上图外层的灰色边缘为一个实例墙。

准备材料

  1. 目标区域的GeoJson数据

  2. 包含目标区域的地形数据,我用的是tif格式的文件

  3. QGIS软件

  4. 把tif格式转化为小文件的工具:cesiumlab或SuperMap Desktop。根据需求不同采用不同的文件

材料获取

  1. 目标区域的GeoJson数据可以在阿里云数据化可视平台处获取(如图2)。特别说明的一点是:下载好的json文件,需要在编辑器中,删除parent字段。不然QGIS软件处理会报错。
  1. 包含目标区域的地形数据,我用的是tif格式的文件。此处渠道较多,且比较复杂。我是通过微信搜索的文章,获取的榆林市DEM的百度云的下载链接。本文章不做过多介绍。

  2. QGIS软件是一款开源的地理信息系统(GIS)软件,用于查看、编辑、创建、分析和发布地理空间数据。

  3. 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)。

注意,生成的文件会特别多,所以:

  1. 点击处理时,最好关闭本机window的实时防护,不然电脑风扇会一直叫。

  2. 文件夹最好不要在前端项目里,不然无论是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

项目代码引用地形服务demo

Cesium模式(图22)

SuperMap模式(图23)

相关推荐
Modify_QmQ2 天前
leaflet【十一】地图瓦片路径可视化
gis·vue3·leaflet·leafletmapblock
杨超越luckly2 天前
ArcGISPro应用指南:ArcGISPro制图全流程详解
arcgis·信息可视化·gis·制图·arcgispro
一个有理想的摸鱼选手4 天前
CesiumLite-开箱即用的轻量化三维地图包(持续更新中...)
gis·cesium
不浪brown13 天前
重磅开源!Cesium实现高度雾仿真,谁再说Cesium做不出好效果?
cesium
青山Coding14 天前
Cesium基础(五)实体创建与拖拽
前端·cesium
小艳加油17 天前
生态环评GIS/遥感制图:土地利用+植被覆盖+土壤侵蚀+水系提取,ArcGIS+ENVI实战
gis·遥感解译·环境影响评价
Mapmost17 天前
全新升级!3DTiles加载速度Mapmost完胜Cesium
性能优化·webgl·cesium
不浪brown17 天前
告别静态水面的平庸!Cesium中实现水面倒影+动态流向的逼真水特效
cesium
汪洪墩18 天前
使用Mars3d加载热力图的时候,出现阴影碎片
开发语言·前端·javascript·vue.js·cesium
springfe010119 天前
Cesium 3D地图 图元 圆柱 图片实现
前端·cesium