Cesium-03:洪水淹没

时间:2022-11-25 15:07:17

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 切片时,选择“散列”,如下图:

Cesium-03:洪水淹没

 

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)
    }

效果动图:

Cesium-03:洪水淹没