前言

SuperMap iClient3D for Cesium提供了淹没分析的方法——FloodAnalysis3D，但是本文主要是采用DrawHandler绘制方法类结合setInterval定时器实现淹没动画，为了显示效果更加美观，代码还采用了HypsometricSetting分层设色类，实现根据地理高程实现不同颜色的过度渲染效果。

一、主要功能

效果图:

通过设置淹没分析的起始高度、最大淹没高度、淹没速度三个参数，然后绘制淹没区域即可实现淹没分析的动画效果。

二、具体实现

1.HTML主要结构

<div class="btnBox"><span><p>起始高度(米):</p><el-input size="small" v-model="minHeight"/></span><span><p>最大高度(米):</p><el-input size="small" v-model="maxHeight"/></span><span><p>淹没速度(米/秒):</p><el-input size="small" v-model="speed"/></span><el-button type="primary" @click="begin">开 始</el-button><el-button type="primary" @click="clear">清 除</el-button>
</div>

2.javascript

代码如下：

<script setup>
import { ref, onBeforeUnmount } from "vue";
import { useStore } from "vuex";const store = useStore();
let minHeight = ref(300);
let maxHeight = ref(9000);
let speed = ref(500);
// 初始化数据
var interval = null; //定时器
var scene = viewer.scene;
let hypFlood;function init() {hypFlood = new Cesium.HypsometricSetting(); //分层设色类。let floodColorTable = new Cesium.ColorTable();colorTableInit(floodColorTable);hypFlood.DisplayMode = Cesium.HypsometricSettingEnum.DisplayMode.FACE; //获取或设置显示模式hypFlood._lineColor = new Cesium.Color(1.0, 0.0, 0.0, 1.0);hypFlood.MinVisibleValue = 0; //获取或设置最小可见值hypFlood.MaxVisibleValue = 0;hypFlood.ColorTableMinKey = 1; //获取颜色表的最小key值。hypFlood.ColorTableMaxKey = 9000;hypFlood.ColorTable = floodColorTable; //获取或设置颜色表。hypFlood.Opacity = 0.8; //获取或设置不透明度hypFlood.LineInterval = 200.0; //获取或设置等值线的间隔。
}
init();// 默认设置淹没分析颜色
function colorTableInit(floodColorTable) {floodColorTable.insert(//颜色表插入新的项。9000,new Cesium.Color(210 / 255, 15 / 255, 15 / 255));floodColorTable.insert(6000, new Cesium.Color(221 / 255, 224 / 255, 7 / 255));floodColorTable.insert(5000, new Cesium.Color(20 / 255, 187 / 255, 18 / 255));floodColorTable.insert(4000, new Cesium.Color(0, 161 / 255, 1));floodColorTable.insert(0, new Cesium.Color(9 / 255, 9 / 255, 212 / 255));
}//绘制多边形
var polygonHandler = new Cesium.DrawHandler(viewer, Cesium.DrawMode.Polygon);polygonHandler.drawEvt.addEventListener(function (polygon) {polygonHandler.polygon.show = false;polygonHandler.polyline.show = false;var array = [].concat(polygon.object.positions);let positions = [];for (var i = 0, len = array.length; i < len; i++) {var cartographic = Cesium.Cartographic.fromCartesian(array[i]);var longitude = Cesium.Math.toDegrees(cartographic.longitude);var latitude = Cesium.Math.toDegrees(cartographic.latitude);var h = cartographic.height;if (positions.indexOf(longitude) == -1 &&positions.indexOf(latitude) == -1) {positions.push(longitude);positions.push(latitude);positions.push(h);}}floodUpdate(positions);polygonHandler.deactivate();
});// 更新淹没分析
function floodUpdate(positions) {hypFlood.CoverageArea = positions; //获取或设置分层设色的区域。let maxValue = parseInt(maxHeight.value);let minValue = parseInt(minHeight.value);let currentHeight = minValue;hypFlood.MinVisibleValue = minValue;interval = self.setInterval("flood()", 100);currentHeight = minValue;window.flood = () => {if (currentHeight > maxValue) {self.clearInterval(interval);return;}hypFlood.MaxVisibleValue = currentHeight;viewer.scene.globe.HypsometricSetting = {hypsometricSetting: hypFlood,analysisMode: Cesium.HypsometricSettingEnum.AnalysisRegionMode.ARM_REGION,};currentHeight += parseInt(speed.value) / 10;};
}// 激活绘制
function begin() {clear();polygonHandler.activate();
}// 清除
function clear() {self.clearInterval(interval);polygonHandler.deactivate();polygonHandler.clear();viewer.scene.globe.HypsometricSetting = undefined;
}
onBeforeUnmount(() => {clear();
});
if (!scene.pickPositionSupported) {alert("不支持深度拾取,淹没分析功能无法使用（无法交互绘制面）！");
}
</script>

vue3+SuperMap iClient3D for Cesium实现淹没分析功能相关推荐

vue3+SuperMap iClient3D for Cesium实现可视域分析功能
本人小白一枚,文章如有问题还请各位大神评论区指出.整体实现是参考SuperMap iClient3D for Cesium的可视域分析功能源码~ 文章目录前言一.主要功能二.使用步骤 1.HTM ...
SuperMap iClient3D for WebGL教程- 淹没分析
作者:桔子本文同步更新于:https://www.jianshu.com/p/328fb79eec5e 淹没分析是指根据指定的最大.最小高程值及淹没速度,动态模拟某区域水位由最小高程涨到最大高程的淹 ...
cesium 水位模拟_SuperMap iClient3D for WebGL教程- 淹没分析
淹没分析是指根据指定的最大.最小高程值及淹没速度,动态模拟某区域水位由最小高程涨到最大高程的淹没过程,是GIS分析中常用的功能,常用于模拟洪涝灾害过程.在SuperMap的三维产品中淹没分析是通过分层 ...
SuperMap iClient3D for Cesium视频投放
1 概述把监控视频投放到三维实景中,可以将静态的三维数据实现动态的显示效果,可以极大方便一些区域的查看和监管,该文章记录该投放的实现过程,以供入门参考. 效果如下: 2 具体步骤: 2.1 软件安装 ...
cesium开发淹没分析_淹没在Web开发行业的工具中
cesium开发淹没分析 Every once in a while in this industry we need a reminder that our trade as front-end d ...
Cesium(六)淹没分析（polygon版本）
淹没分析是三维分析常用的的其中一种分析,本文借鉴已有资料通过在地形图上动态拉伸polygon达到淹没分析的效果,下面给出淹没分析的主要代码: 效果: 一.容器创建&添加地形服务. var cu ...
cesium添加淹没分析测量面积
var viewer=ysc.createNormalCesium("cesiumContainer",{ //添加cesium中的基础属性 inf ...
vue + cesium 洪水淹没分析完整示例
目录一.洪水淹没分析效果二.部分核心代码 1.绘制多边形范围 2.处理多边形区域的最大和最小高程三.JS完整代码一.洪水淹没分析效果二.部分核心代码 1.绘制多边形范围 /*** @auth ...
cesium实现淹没分析（基于polygon）并解决屏闪
文章目录 1.实现效果 2.实现方法 Cesium实战系列文章总目录: 传送门 1.实现效果 2.实现方法基于面状entity的extrudedHeight高度来拉伸面,实现简单的淹没分析效果. 但 ...

vue3+SuperMap iClient3D for Cesium实现淹没分析功能

文章目录

前言

一、主要功能

二、具体实现

1.HTML主要结构

2.javascript

vue3+SuperMap iClient3D for Cesium实现淹没分析功能相关推荐

最新文章

热门文章