# 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
- 侦听属性
- 描述: 水纹频率
# 事件
# @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>