mapgis-3d-analysis-flood
# 属性
# vueKey
- 类型:
String
- 可选
- 非侦听属性
- 默认值:
default
- 描述: mapgis-web-scene 组件的 ID,当使用多个 mapgis-web-scene 组件时,需要指定该值,来唯一标识 mapgis-web-scene 组件,同时 mapgis-web-scene 插槽中的组件也需要传入相同的 vueKey,让组件知道应该作用于哪一个 mapgis-web-scene。
# vueIndex
- 类型:
Number
- 可选
- 非侦听属性
- 默认值:
(Math.random() * 100000000).toFixed(0)
随机计算值 - 描述: 当 mapgis-web-scene 插槽中使用了多个相同组件时,例如多个 mapgis-3d-igs-doc-layer 组件,用来区分组件的标识符。
# startHeight
- 类型:
Number
- 可选
- 默认值:
0
- 侦听属性
- 描述: 洪水淹没水体起始高度
# minHeight
- 类型:
Number
- 可选
- 默认值:
0
- 非侦听属性
- 描述: 淹没动画高度起始点
# maxHeight
- 类型:
Number
- 可选
- 默认值:
2000
- 侦听属性
- 描述: 最大淹没高度,淹没动画高度终止点
# floodColor
- 类型:
String
- 可选
- 默认值:
rgba(149,232,249,0.5)
- 侦听属性
- 描述: 洪水颜色
# floodSpeed
- 类型:
Number
- 可选
- 默认值:
500
- 侦听属性
- 描述: 洪水淹没速度,单位 米/秒
# specularIntensity
- 类型:
Number
- 可选
- 默认值:
2
- 非侦听属性
- 描述: 反射光线强度
# amplitude
- 类型:
Number
- 可选
- 默认值:
10
- 非侦听属性
- 描述: 水波高度
# animationSpeed
- 类型:
Number
- 可选
- 默认值:
0.01
- 非侦听属性
- 描述: 水纹速度
# frequency
- 类型:
Number
- 可选
- 默认值:
500
- 非侦听属性
- 描述: 水纹频率
# 方法
# analysis
- Description: 洪水淹没分析
# remove
- Description: 移除洪水淹没分析对象,移除洪水淹没分析结果。
# refresh
- Description: 重新计算,分析区域不变,修改设置参数后,重新进行分析。
# 事件
# @load
- Description: 在 Flood 加载完毕后发送该事件
- Payload 洪水淹没分析对象
# 示例
# 非插槽方式
<template>
<mapgis-web-scene style="{height: '100vh'}" v-on:load="handleLoad">
<mapgis-3d-ogc-wmts-layer
:baseUrl="url"
:wmtsLayer="layer"
:tileMatrixSet="tileMatrixSet"
:format="format"
:tilingScheme="tilingScheme"
:token="token"
></mapgis-3d-ogc-wmts-layer>
<mapgis-3d-igs-terrain :url="terrainUrl" :requestVertexNormals="true" />
<mapgis-ui-card class="storybook-ui-card">
<mapgis-3d-analysis-flood
:startHeight="startHeight"
:minHeight="minHeight"
:maxHeight="maxHeight"
:floodColor="floodColor"
:floodSpeed="floodSpeed"
:specularIntensity="specularIntensity"
:amplitude="amplitude"
:animationSpeed="animationSpeed"
:frequency="frequency"
/>
</mapgis-ui-card>
</mapgis-web-scene>
</template>
<script>
export default {
data() {
return {
url: "http://t0.tianditu.gov.cn/img_c/wmts",
//地形url TODO这里地址打包的时候改一下
terrainUrl: "http://192.168.21.191:6163/igs/rest/g3d/terrain",
tileMatrixSet: "c",
tilingScheme: "EPSG:4326",
layer: "img",
format: "tiles",
token: {
key: "tk",
value: "2ddaabf906d4b5418aed0078e1657029"
},
startHeight: 0,
minHeight: 0,
maxHeight: 2000,
floodColor: "rgba(149,232,249,0.5)",
floodSpeed: 500,
specularIntensity: 2,
amplitude: 10,
animationSpeed: 0.01,
frequency: 500
};
},
methods: {
handleLoad(e) {
const { component, Cesium } = e;
Cesium.Ion.defaultAccessToken =
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJiM2Q0ZGMxYy1iZGZkLTQ4OWItODlhMy1iOWNkMDE0M2U3YWEiLCJpZCI6NTEzNSwiaWF0IjoxNjA2MjE0OTkyfQ.2aktNrUASlLsPwSFtkgKBTQLJTAnOTyjgKDRQmnafiE";
const { webGlobe } = component;
webGlobe.viewer.camera.setView({
direction: {
x: 0.4680575394156845,
y: -0.8267033643312148,
z: 0.31222377744109403
},
position: {
x: -674271.5790185562,
y: 5530042.656916835,
z: 3232882.3357299212
}
});
//构造视图功能管理对象(视图)
var sceneManager = new CesiumZondy.Manager.SceneManager({
viewer: webGlobe.viewer
});
//视点跳转(经度,纬度,视角高度,方位角,俯仰角,翻滚角)
sceneManager.flyToEx(121, 24, {
height: 5900,
heading: 60,
pitch: -16,
roll: 0
});
}
}
};
</script>
# 自定义界面-插槽方式
<template>
<mapgis-web-scene style="{height: '100vh'}" v-on:load="handleLoad">
<mapgis-3d-ogc-wmts-layer
:baseUrl="url"
:wmtsLayer="layer"
:tileMatrixSet="tileMatrixSet"
:format="format"
:tilingScheme="tilingScheme"
:token="token"
></mapgis-3d-ogc-wmts-layer>
<mapgis-3d-igs-terrain :url="terrainUrl" :requestVertexNormals="true" />
<mapgis-ui-card class="storybook-ui-card">
<mapgis-3d-analysis-flood
:startHeight="startHeight"
:minHeight="minHeight"
:maxHeight="maxHeight"
:floodColor="floodColor"
:floodSpeed="floodSpeed"
:specularIntensity="specularIntensity"
:amplitude="amplitude"
:animationSpeed="animationSpeed"
:frequency="frequency"
@load="load"
>
<!-- 这里是自定义的界面-->
<div>
<button @click="analysis">分析</button>
<button @click="remove">清除</button>
</div>
</mapgis-3d-analysis-flood>
</mapgis-ui-card>
</mapgis-web-scene>
</template>
<script>
export default {
data() {
return {
url: "http://t0.tianditu.gov.cn/img_c/wmts",
//地形url TODO这里地址打包的时候改一下
terrainUrl: "http://192.168.21.191:6163/igs/rest/g3d/terrain",
tileMatrixSet: "c",
tilingScheme: "EPSG:4326",
layer: "img",
format: "tiles",
token: {
key: "tk",
value: "2ddaabf906d4b5418aed0078e1657029"
},
startHeight: 0,
minHeight: 0,
maxHeight: 2000,
floodColor: "rgba(149,232,249,0.5)",
floodSpeed: 500,
specularIntensity: 2,
amplitude: 10,
animationSpeed: 0.01,
frequency: 500,
floodAnalysis: null
};
},
methods: {
handleLoad(e) {
const { component, Cesium } = e;
Cesium.Ion.defaultAccessToken =
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJiM2Q0ZGMxYy1iZGZkLTQ4OWItODlhMy1iOWNkMDE0M2U3YWEiLCJpZCI6NTEzNSwiaWF0IjoxNjA2MjE0OTkyfQ.2aktNrUASlLsPwSFtkgKBTQLJTAnOTyjgKDRQmnafiE";
const { webGlobe } = component;
webGlobe.viewer.camera.setView({
direction: {
x: 0.4680575394156845,
y: -0.8267033643312148,
z: 0.31222377744109403
},
position: {
x: -674271.5790185562,
y: 5530042.656916835,
z: 3232882.3357299212
}
});
//构造视图功能管理对象(视图)
var sceneManager = new CesiumZondy.Manager.SceneManager({
viewer: webGlobe.viewer
});
//视点跳转(经度,纬度,视角高度,方位角,俯仰角,翻滚角)
sceneManager.flyToEx(121, 24, {
height: 5900,
heading: 60,
pitch: -16,
roll: 0
});
},
//洪水分析组件加载完毕事件
load(floodAnalysis) {
this.floodAnalysis = floodAnalysis;
},
//开始洪水淹没分析
analysis() {
this.floodAnalysis.analysis();
},
//移除洪水淹没分析
remove() {
this.floodAnalysis.remove();
}
}
};
</script>