2025年3维地图的尝试

大家好，我是讯享网，很高兴认识大家。

近期有个项目在展示上希望在三维地图上做展示，于是需要尝试三维地图的一些内容，在网上查找了一些内容后，一下一篇博客满足了我的需求。
资料：https://blog.csdn.net/u0/article/details/
地形下载：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>

至此三维地图有关的一些做法就这样写完了，后续再深入。