# 洪水淹没分析

mapgis-3d-flood

# 属性

# startHeight

  • 类型: Number
  • 默认值: 0
  • 侦听属性
  • 描述: 洪水淹没水体起始高度,如果设置了起始高度 startHeight,并且设置了当前淹没高度 currentHeight,则真实淹没高度为(currentHeight - startHeight - minHeight)

# minHeight

  • 类型: Number
  • 默认值: 0
  • 侦听属性
  • 描述: 淹没动画高度起始点,如果设置了起始高度 startHeight,并且设置了当前淹没高度 currentHeight,则真实淹没高度为(currentHeight - startHeight - minHeight)

# currentHeight

  • 类型: Number
  • 默认值: 0
  • 侦听属性
  • 描述: 当前洪水淹没高度

# maxHeight

  • 类型: Number
  • 默认值: 200
  • 侦听属性
  • 描述: 最大淹没高度

# floodColor

  • 类型: String
  • 默认值: #4e81bb
  • 侦听属性
  • 描述: 淹没颜色,十六进制颜色,例如:"#4e81bb"

# floodSpeed

  • 类型: Number
  • 默认值: 30
  • 侦听属性
  • 描述: 淹没速度

# specularIntensity

  • 类型: Number
  • 默认值: 1
  • 侦听属性
  • 描述: 反射光线强度

# amplitude

  • 类型: Number
  • 默认值: 10
  • 侦听属性
  • 描述: 水波高度

# animationSpeed

  • 类型: Number
  • 默认值: 0.01
  • 侦听属性
  • 描述: 水纹速度

# frequency

  • 类型: Number
  • 默认值: 1000
  • 侦听属性
  • 描述: 水纹频率

# vueKey

  • 类型: String
  • 可选
  • 非侦听属性
  • 默认值: default
  • 描述:
mapgis-web-scene组件的ID,当使用多个mapgis-web-scene组件时,需要指定该值,来唯一标识mapgis-web-scene组件,
同时mapgis-web-scene插槽中的组件也需要传入相同的vueKey,让组件知道应该作用于哪一个mapgis-web-scene。

# vueIndex

  • 类型: Number
  • 可选
  • 非侦听属性
  • 描述:
当mapgis-web-scene插槽中使用了多个相同组件时,例如多个mapgis-3d-igs-doc-layer组件,用来区分组件的标识符。

# 方法

# startAnalyse

  • Description: 开始洪水淹没分析

# stopAnalyse

  • Description: 停止洪水淹没分析

# up

  • Description: 上升洪水水平面,最高为 maxHeight

# down

  • Description: 下降洪水水平面,最低为 minHeight

# pause

  • Description: 暂停降洪水水平面的上升或下降

# playAnalyse(start,end,forward,rate,timeDiff)

  • Description: 自定义水平面上升或下降
  • param:

    start: 上升或下降的起始位置,即最高点的位置 end: 上升或下降的结束位置,即最低点的位置 forward: 升降的方向,上升为数字 1,下降为数字-1 rate: 刷新频率,默认不用传 timeDiff: Cesium 与浏览器时间倍数,默认不用传

# 事件

# @load

  • Description: 在 Flood 加载完毕后发送该事件
  • Payload { Flood }
  • Flood Flood 对象

# 洪水分析使用方法

<template>
  <mapgis-web-scene
    libPath="cesium/Cesium.js"
    pluginPath="cesium/webclient-cesium-plugin.min.js"
  >
    <mapgis-3d-ogc-wmts-layer
      :baseUrl="urlT"
      :wmtsLayer="layer"
      :tileMatrixSet="tileMatrixSetID"
      :format="format"
      :tilingScheme="srs"
      :token="token"
    />
    <mapgis-3d-igs-terrain :url="url"></mapgis-3d-igs-terrain>
    <mapgis-3d-flood
      :startHeight="startHeight"
      :minHeight="minHeight"
      :currentHeight="currentHeight"
      :maxHeight="maxHeight"
      :floodColor="floodColor"
      :floodSpeed="floodSpeed"
      :specularIntensity="specularIntensity"
      :amplitude="amplitude"
      :animationSpeed="animationSpeed"
      :frequency="frequency"
    >
    </mapgis-3d-flood>
  </mapgis-web-scene>
</template>

<script>
export default {
  data() {
    return {
      //地形url
      url: "http://localhost:6163/igs/rest/g3d/terrain",
      //天地图参数
      urlT: "http://t0.tianditu.gov.cn/img_c/wmts",
      tileMatrixSetID: "c",
      srs: "EPSG:4326",
      layer: "img",
      format: "tiles",
      token: {
        key: "tk",
        value: "f5347cab4b28410a6e8ba5143e3d5a35"
      },
      //初始淹没高度,淹没总高度为currentHeight - startHeight - minHeight
      startHeight: 0,
      //初始淹没点
      minHeight: 0,
      //当前淹没高度
      currentHeight: 0,
      //最大淹没高度
      maxHeight: 200,
      //淹没颜色
      floodColor: "#FFFF00",
      //洪水上涨速度
      floodSpeed: 30,
      //洪水反射光线强度
      specularIntensity: 1,
      //洪水水波高度
      amplitude: 10,
      //洪水水纹速度
      animationSpeed: 0.01,
      //洪水水纹频率
      frequency: 1000,
      //洪水分析组件对象
      floodAnalyse: undefined
    };
  },
  mounted() {
    //视点跳转
    window.CesiumZondy.getWebGlobeByInterval(function(webGlobe) {
      let sceneManager = new window.CesiumZondy.Manager.SceneManager({
        viewer: webGlobe.viewer
      });
      sceneManager.flyToEx(115, 30, {
        height: 100,
        heading: 30,
        pitch: -10,
        roll: 0
      });
    });
  }
};
</script>

# 自定义界面-插槽方式

<template>
  <mapgis-web-scene
    libPath="cesium/Cesium.js"
    pluginPath="cesium/webclient-cesium-plugin.min.js"
  >
    <mapgis-3d-ogc-wmts-layer
      :baseUrl="urlT"
      :wmtsLayer="layer"
      :tileMatrixSet="tileMatrixSetID"
      :format="format"
      :tilingScheme="srs"
      :token="token"
    />
    <mapgis-3d-igs-terrain :url="url"></mapgis-3d-igs-terrain>
    <mapgis-3d-flood
      :startHeight="startHeight"
      :minHeight="minHeight"
      :currentHeight="currentHeight"
      :maxHeight="maxHeight"
      :floodColor="floodColor"
      :floodSpeed="floodSpeed"
      :specularIntensity="specularIntensity"
      :amplitude="amplitude"
      :animationSpeed="animationSpeed"
      :frequency="frequency"
      @load="load"
    >
      <!--      这里是自定义的界面-->
      <div>
        <button @click="startAnalyse">开始分析</button>
        <button @click="stopAnalyse">停止分析</button>
      </div>
    </mapgis-3d-flood>
  </mapgis-web-scene>
</template>

<script>
export default {
  data() {
    return {
      //地形url
      url: "http://localhost:6163/igs/rest/g3d/terrain",
      //天地图参数
      urlT: "http://t0.tianditu.gov.cn/img_c/wmts",
      tileMatrixSetID: "c",
      srs: "EPSG:4326",
      layer: "img",
      format: "tiles",
      token: {
        key: "tk",
        value: "f5347cab4b28410a6e8ba5143e3d5a35"
      },
      //初始淹没高度,淹没总高度为currentHeight - startHeight - minHeight
      startHeight: 0,
      //初始淹没点
      minHeight: 0,
      //当前淹没高度
      currentHeight: 0,
      //最大淹没高度
      maxHeight: 200,
      //淹没颜色
      floodColor: "#FFFF00",
      //洪水上涨速度
      floodSpeed: 30,
      //洪水反射光线强度
      specularIntensity: 1,
      //洪水水波高度
      amplitude: 10,
      //洪水水纹速度
      animationSpeed: 0.01,
      //洪水水纹频率
      frequency: 1000,
      //洪水分析组件对象
      floodAnalyse: undefined
    };
  },
  mounted() {
    //视点跳转
    window.CesiumZondy.getWebGlobeByInterval(function(webGlobe) {
      let sceneManager = new window.CesiumZondy.Manager.SceneManager({
        viewer: webGlobe.viewer
      });
      sceneManager.flyToEx(115, 30, {
        height: 100,
        heading: 30,
        pitch: -10,
        roll: 0
      });
    });
  },
  methods: {
    //洪水分析组件加载完毕事件
    load(floodAnalyse) {
      this.floodAnalyse = floodAnalyse;
    },
    //开始洪水分析
    startAnalyse() {
      this.floodAnalyse.startAnalyse();
    },
    //停止洪水分析
    stopAnalyse() {
      this.floodAnalyse.stopAnalyse();
    }
  }
};
</script>