当前位置：首页 > article >正文

3维地图的尝试

article 2025/7/4 17:39:21

近期有个项目在展示上希望在三维地图上做展示，于是需要尝试三维地图的一些内容，在网上查找了一些内容后，一下一篇博客满足了我的需求。
资料：https://blog.csdn.net/u013821237/article/details/82999006
地形下载：http://srtm.csi.cgiar.org/SELECTION/inputCoord.asp

1. 利用cesiumlab.com

网站：https://www.cesiumlab.com/

1.1 处理地形数据

数据处理 – 地形切片
在这里插入图片描述

1.2 发布服务

发布服务 – 地形服务中可以看到刚才处理的数据发布的路径和地址
在这里插入图片描述

1.3 三维可视

地形 – leb服务 – 选择刚才的地形服务，添加即可
在这里插入图片描述
效果如下

如果需要水面效果，可以通过
分析 – 水面标绘需要展示水面效果的区域

在水面上右键 – 查看源代码，貌似可以看到水面效果的代码，不知道能不能在软件外的js中叠加使用，这个等后面测试。
在这里插入图片描述

2.利用ctb生成terrain文件

2.1 根据边界裁剪文件

如下图一个是下载的地形地图文件，一个是行政区划边界数据。
在这里插入图片描述
Data Management Tools – Raster – Raster Processing – Clip

2.2 处理空值

2.2.1 多个地形文件合并

如果不存在多个地形文件要合并的，直接忽略这一步
Data Management Tools – Raster – Raster Dataset – Mosaic
在这里插入图片描述
看到一下图片表示合并成功

2.2.2 空值处理

spatial Analyst Tool – Map Algebra – Raster Calculator

Con(IsNull("xxxx.tif"),0,"xxxx.tif")//xxxx.tif对应你的合并后的文件

在这里插入图片描述
处理完成效果

2.3 利用ctb生成地形文件

进入ctb文件所在目录，执行以下命令

ctb-tile -o 文件输出的目录 -s 14 -e 0 -r nearest -c 4 你处理过的tif文件

在这里插入图片描述

在这里插入图片描述
处理完成。启动tomcat即可访问三维地图路径

2.4 可能出现的错误

2.4.1 layer.js 不存在

新建一个json文件，复制以下内容到json文件中

{"format": "heightmap-1.0","version": "1.0.0","scheme": "tms","tiles": ["{z}/{x}/{y}.terrain"]
}

2.4.2 0/0/0.terrain 不存在

在这里插入图片描述
猜测这个生成的时候没有数据，貌似不影响数据的使用，先放着，后续想想怎么补救。

2.4.3 tomcat 跨域问题

在 tomcat 的conf 文件夹下，修改 web.xml文件，添加一下的代码，具体标签的含义参考tomcat的相关配置说明文档。

<filter><filter-name>CorsFilter</filter-name><filter-class>org.apache.catalina.filters.CorsFilter</filter-class><init-param><param-name>cors.allowed.origins</param-name><param-value>*</param-value></init-param><init-param><param-name>cors.allowed.methods</param-name><param-value>GET,POST,HEAD,OPTIONS,PUT</param-value></init-param><init-param><param-name>cors.allowed.headers</param-name><param-value>Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers</param-value></init-param><init-param><param-name>cors.exposed.headers</param-name><param-value>Access-Control-Allow-Origin,Access-Control-Allow-Credentials</param-value></init-param><init-param><param-name>cors.support.credentials</param-name><param-value>true</param-value></init-param><init-param><param-name>cors.preflight.maxage</param-name><param-value>1800</param-value></init-param>
</filter>
<filter-mapping><filter-name>CorsFilter</filter-name><url-pattern>/*</url-pattern>
</filter-mapping>

2.5 查看效果代码

需要引入cesium.js文件，这个后续再工作中在仔细学习，现在就粗略的用一下展示的效果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="Cesium/Cesium.js"></script>
</head>
<body>
<div id="cesium"></div>
</body>
<script>var viewer = new Cesium.Viewer('cesium', {terrainProvider: new Cesium.CesiumTerrainProvider({url: "http://localhost:6068/tzz", // 默认立体地表})});</script>
</html>