洪水淹没

IT技术2年前 (2022)更新 IT大王

0 24

Cesium-01：Vue 中基础使用

Cesium-02：飞机模型简单点对点飞行

Cesium-03：洪水淹没

前言

最开始想做洪水淹没的话，查了一些资料。又基于不同的实现的，如 ArcScene 实现，有基于 Cesium 实现。

对比分析了下，ArcGIS 下的实现主要是软件中，如果想自己代码实现的话，还要借助 Arc Engine。加上自己前面也使用过 Cesium ，这里就选择了 Cesium 去做。

这里特别说明下，所做的洪水淹没，是简单的水面的抬升，没有降水、水流等算法分析在里面（了解过一些算法，要对接的话还有很多工作要做）。

一、数据准备

准备数据

　　1、底图卫星数据，这里选用天地图卫星切片；

　　2、DEM 数据，直接下载的哨兵数据（数据下载地址 ASF Data Search (alaska.edu)，可以参考这里）

　　3、DEM 切片，并发布服务

处理过程中注意点

　　1、哨兵数据下载网站，需要注册；

　　2、没有选择自己下载卫星数据，是因为分辨率、处理等问题，不如直接使用在线的天地图卫星；

　　3、DEM 切片使用的是 CesiumLab，但发布的 DEM 服务，可以使用 CesiumLab 也可以自己发布

如果自己发布 DEM 服务的话，在 DEM 切片时，选择“散列”，如下图：

Nginx 发布 DEM 切片，和一般的 Web 站点的配置一样，如下：

server {
    listen 9001;
    root ./www/hzDEMcache;
    # Add index.php to the list if you are using PHP
    index index.html index.htm;
    server_name _;
    location / {
        # First attempt to serve request as file, then
        # as directory, then fall back to displaying a 404.
        try_files $uri $uri/ =404;
        add_header Access-Control-Allow-Origin *;    # 跨域设置
    }
    add_header Cache-Control "no-cache,must-revalidate";    # 跨域设置
}

在配置完成后，浏览器中打开http://localhost:9001/layer.json，没有问题的话，证明发布成功！

数据都完成后，可以进行开发啦！

二、效果实现

下面两个问题时间：21年11月时没有问题，22年11月出现下面两个问题。

1、Cesium 版本问题

　　前几篇文章中，使用的 Cesium 是1.89版本。这个项目在初始化时，直接安装 Cesium 包，安装的是 1.99 版本。启动后项目报错，”.?” 运算符不能识别。

　　经过分析，新版的 Cesium 对 TS 的支持更好，其中一些使用到了 TS 的新语法。这个对于使用 Vue3 + TS 会更友好。

　　因当前使用的还是 Vue2 ，切没有 TS，所以版本回退到了 1.89 ，再次运行正常！

2、token

　　在使用 Cesium 自带的底图、高程时，直接报错，没有显示。看了官网的文档，发现现在需要 token。

　　所以要先在官网注册，并申请 token。在使用地图前赋值 token：

Cesium.Ion.defaultAccessToken = 'token'

实现

底图代码：

    this.cesiumViewer = new Cesium.Viewer('cesiumContainer', {
      infoBox: false,
      // terrainProvider: Cesium.createWorldTerrain(), // Cesium 自带地形数据
      // terrainProvider: new Cesium.CesiumTerrainProvider({ url: 'http://localhost:9003/terrain/LktyW4LU' }), // cesiumLab 切的地形数据服务
      terrainProvider: new Cesium.CesiumTerrainProvider({ url: 'http://localhost:9001/' }), // nginx 代理切片，最后要带上"/"
      baseLayerPicker: true, // 图层选择器
      // 不设置，默认使用自带底图，需要 token
      imageryProvider: new Cesium.UrlTemplateImageryProvider({
        // url 和 openlayer 使用区别，t{0-7}.tianditu  ，这里需要指定数值
        url: 'http://t1.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=07d4e04324b413cb0582fa99fe833cd3'
      })
    })

洪水淹没代码：这里使用的是Cesium.CallbackProperty，直接修改extrudedHeight 会出现闪烁的情况

    drawWater() {
      this.showWater = true
      this.waterEntity && this.cesiumViewer.entities.remove(this.waterEntity)
      const waterCoord = [119.642769, 30.361905, 100, 119.591604, 30.448757, 100, 119.695767, 30.488232, 100, 119.748406, 30.395983, 100]
      let startHeight = 100
      const targetHeight = 500
      this.waterEntity = this.cesiumViewer.entities.add({
        polygon: {
          hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights(waterCoord),
          material: Cesium.Color.fromBytes(64, 157, 253, 200),
          perPositionHeight: true,
          extrudedHeight: new Cesium.CallbackProperty(() => { return startHeight }, false)
        }
      })
      const waterInterval = setInterval(() => {
        if (startHeight < targetHeight) {
          startHeight += 10
          if (startHeight >= targetHeight) {
            startHeight = targetHeight
            clearInterval(waterInterval)
            this.showWater = false
          }
          // 使用该方式会闪烁，改用 Cesium.CallbackProperty 平滑
          // this.waterEntity.polygon.extrudedHeight.setValue(startHeight)
        }
      }, 100)
    }

效果动图：

# IT技术

文章版权归作者所有，未经允许请勿转载。

版权声明：
1、IT大王遵守相关法律法规，由于本站资源全部来源于网络程序/投稿，故资源量太大无法一一准确核实资源侵权的真实性；
2、出于传递信息之目的，故IT大王可能会误刊发损害或影响您的合法权益，请您积极与我们联系处理(所有内容不代表本站观点与立场)；
3、因时间、精力有限，我们无法一一核实每一条消息的真实性，但我们会在发布之前尽最大努力来核实这些信息；
4、无论出于何种目的要求本站删除内容，您均需要提供根据国家版权局发布的示范格式
《要求删除或断开链接侵权网络内容的通知》：https://itdw.cn/ziliao/sfgs.pdf，
国家知识产权局《要求删除或断开链接侵权网络内容的通知》填写说明： http://www.ncac.gov.cn/chinacopyright/contents/12227/342400.shtml
未按照国家知识产权局格式通知一律不予处理；请按照此通知格式填写发至本站的邮箱 wl6@163.com