GIS开发实战(一)--GeoServer发布DEM地形图并实现三维可视化-开发者社区

1. DEM地形图与三维可视化基础

第一次接触DEM地形图三维可视化时，我被那些起伏的山脉和逼真的地形效果震撼到了。DEM（Digital Elevation Model）数字高程模型，简单说就是用数字方式记录地表高低起伏的数据。就像我们小时候玩的橡皮泥地形模型，只不过现在是存储在电脑里的数字版本。

GeoServer作为开源地图服务器，扮演着"数据管家"的角色。它能将DEM数据转化为标准的WMS/WMTS地图服务，就像把生食材加工成标准化的外卖套餐。我常用的Cesium.js则是个强大的三维地球引擎，相当于一个专业的"3D播放器"，能把GeoServer提供的地形服务渲染成震撼的立体场景。

在实际项目中，这种技术组合特别适合需要展示真实地形的场景。比如去年做的智慧园区项目，客户需要看到园区及周边5公里范围内的真实地形，我们就是通过GeoServer发布DEM数据，再用Cesium实现三维展示。当客户第一次看到自己园区在真实地形中的位置关系时，那种惊喜的表情让我印象深刻。

2. 数据准备与GeoServer配置

2.1 获取DEM数据

找DEM数据就像收集建筑材料，质量决定最终效果。我常用NASA的SRTM数据，90米分辨率免费可用。国内可以用ASTER GDEM数据，精度能达到30米。下载时要注意覆盖区域，我曾经就遇到过下载的图幅不连续导致地形出现"断层"的尴尬情况。

对于国内项目，建议使用"图新地球"这类工具下载，它能自动拼接不同图幅。下载格式首选GeoTIFF，这种格式自带坐标信息，GeoServer能直接识别。记得检查文件是否完整，有次我急着赶进度，没验证数据就上传，结果花了两小时排查为什么图层显示异常。

2.2 GeoServer基础配置

安装GeoServer建议用Docker方式，省去环境配置的麻烦。启动后访问8080端口，默认账号admin/geoserver。第一次登录记得改密码，我有次测试环境没改密码，结果被扫描到服务器成了"肉鸡"。

创建工作区时，命名要有规律。我习惯用"项目名_数据类型"的方式，比如"smartcity_dem"。数据存储添加时，选择"栅格数据源-GeoTIFF"，路径建议用相对路径，这样迁移时不会出问题。曾经因为用了绝对路径，服务器迁移后所有图层都失效了。

3. 发布DEM地形图服务

3.1 创建并发布图层

添加数据存储后，在"图层"菜单点击"发布"。这里有个容易踩的坑：坐标参考系（CRS）设置。DEM数据常用EPSG:4326（WGS84），但如果设置错误，地形会显示在奇怪的位置。我有次把CRS设成了EPSG:3857，结果地形飘到了非洲附近。

边框计算建议点击"从数据计算"和"从本地计算"各一次，确保边界准确。发布后可以先预览，这时看到的是灰度图，高度信息用颜色深浅表示，就像黑白照片。

3.2 设计地形样式

默认的灰度图可读性差，我们需要设计色带。在"样式"菜单新建SLD样式，核心是配置ColorMap。我的经验是：

低海拔用蓝色到绿色渐变
中等海拔用黄色到橙色
高海拔用红色到白色

<ColorMap> <ColorMapEntry color="#0000FF" quantity="0"/> <ColorMapEntry color="#00FF00" quantity="500"/> <ColorMapEntry color="#FFFF00" quantity="1000"/> <ColorMapEntry color="#FFA500" quantity="1500"/> <ColorMapEntry color="#FF0000" quantity="2000"/> <ColorMapEntry color="#FFFFFF" quantity="3000"/> </ColorMap>

调试样式时，建议先用小范围数据测试。有次我直接在大区域DEM上调试样式，每次修改都要等3分钟刷新，效率极低。

3.3 创建图层组

当处理大范围区域时，需要将多个DEM切片发布为图层组。在"图层组"菜单创建新组，添加所有相关图层。关键点是设置边界和绘制顺序，我习惯按经纬度顺序排列图层，确保接边处自然过渡。

测试时发现接缝明显？可以调整图层的透明度样式，让边缘渐变融合。有个项目因为接缝问题被客户质疑专业性，后来花了半天时间精细调整样式才解决。

4. 三维可视化实现

4.1 Cesium基础集成

在HTML中引入Cesium.js后，初始化Viewer时要开启terrain属性：

const viewer = new Cesium.Viewer('cesiumContainer', { terrain: Cesium.Terrain.fromWorldTerrain() });

从GeoServer加载WMS服务的典型配置：

const layers = viewer.imageryLayers.addImageryProvider( new Cesium.WebMapServiceImageryProvider({ url: 'http://your-geoserver/ows', layers: 'your_workspace:dem_layer_group', parameters: { transparent: true, format: 'image/png' } }) );

4.2 地形增强效果

单纯显示地形还不够，我常用这三种增强技巧：

地形夸张：通过修改heightScale让地形起伏更明显
```
viewer.scene.globe.terrainExaggeration = 2.0;
```

光照效果：开启阴影和光照

viewer.scene.globe.enableLighting = true; viewer.shadows = true;

等高线叠加：在GeoServer发布等高线WMS服务，半透明叠加显示

调试时要注意性能平衡。有次我把exaggeration设为5，结果浏览器直接卡死，后来发现3以内比较安全。

4.3 性能优化技巧

大范围地形加载容易卡顿，我总结的优化方法：

在GeoServer启用WMTS缓存

使用Cesium的细节层级控制：

viewer.imageryLayers.get(0).maximumLevel = 15;

动态加载：根据视角范围请求数据
简化样式：减少ColorMapEntry数量

曾经有个项目加载全省地形，初始方案要20秒才能完全显示，优化后降到3秒内。关键是把DEM数据按行政区划切片，实现按需加载。

5. 常见问题排查

5.1 图层显示异常

遇到空白或错位时，按这个顺序检查：

GeoServer日志看是否有错误
浏览器开发者工具看请求是否成功
确认CRS设置一致
检查数据范围是否在视图内

有次客户报障说地形显示不全，最后发现是他缩放到了非常小的区域，而我们的服务设置了最小显示比例。

5.2 性能问题

如果场景很卡，可以：

降低地形夸张系数
减少同时显示的图层数量
检查网络请求，合并细碎请求
使用Cesium的调试面板查看帧率

我电脑配置一般，开发时习惯先关掉抗锯齿和阴影，等调试完再开启。

5.3 跨域问题

前端调用GeoServer常遇到CORS限制。解决方法：

在GeoServer的web.xml中配置CORS过滤器
使用Nginx反向代理
开发时可以用浏览器禁用安全模式临时解决（仅限测试）

记得有次演示前发现所有请求被拦截，紧急联系运维配置CORS才没耽误汇报。现在我的checklist里一定会提前确认这项。

GIS开发实战(一)--GeoServer发布DEM地形图并实现三维可视化