Cesium洪水淹没分析洪水淹没高度的上涨与下降

最近在基于cesium做水利项目的淹没分析因为真实的洪水情况下，对于不同的地势来说每个淹没区间的不同时刻水位高度肯定是不一样的所以要求对多河段的高度做一个动态的水位上涨与下降的效果不同河段水位高要以不一样的颜色显示以下是其中一个河段的实现的代码参考

先看看效果吧

cesium淹没分析

初始化地图

<template><div class="water-page"><div id="cesiumContainer"></div></div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import FloodAnalysis from "./FloodAnalysis.js";
const initMap = () => {CesiumMap = new Cesium.Viewer("cesiumContainer", {geocoder: false,animation: false,timeline: false,infoBox: false,baseLayerPicker: false,fullscreenButton: false,homeButton: false,sceneModePicker: false,navigationHelpButton: false,imageryProvider: new Cesium.ArcGisMapServerImageryProvider({url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",}),CreditsDisplay: false,selectionIndicator: false,scene3DOnly: true,requestRenderMode: true,terrainProvider: Cesium.createWorldTerrain({requestVertexNormals: true,requestWaterMask: true,}),terrainProvider: new Cesium.ArcGISTiledElevationTerrainProvider({url: "https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer",}),});// CesiumMap.timeline.container.style.visibility = "hidden";CesiumMap._cesiumWidget._creditContainer.style.display = "none"; //LOGO显示CesiumMap.scene.globe.depthTestAgainstTerrain = true;CesiumMap.camera.setView({destination :  Cesium.Cartesian3.fromDegrees(105.5793, 30.5305127, 1000),orientation: {heading :0, // 相机方向指向当地东向pitch : Cesium.Math.toRadians(-15),    // 再将相机方向转向地心，此时Up方向指向当地东向roll : 0.0                             }
});createWater();
};
/*** 获取数据创建水面*/
const waterColor = ref("rgba(183, 149, 75, 0.91)");
const createWater = () => {let data = require("./flood_data.json");let waterEntity = new FloodAnalysis(CesiumMap, {...data,waterColor: waterColor.value,show: true,});
};onMounted(() => {initMap();
});
</script>
<style lang="scss" scoped>
.water-page {width: 100vw;height: 100vh;#cesiumContainer {width: 100%;height: 100%;}
}
</style>

关键代码

/*** @description 淹没分析函数，通过拉伸面的高度来进行分析*/
class FloodAnalysis {constructor(viewer, options) {if (!viewer) throw new Error("no viewer object!");this.viewer = viewer;this.positions = this.CoorsFormt(options.polygon);this.times_height = options.times_height;this.currentIndex = 0;this.initialHeight = this.times_height[this.currentIndex];this.targertHeight = this.times_height[this.currentIndex + 1];this.increaseHeight = this.targertHeight - this.initialHeight;this.waterColor = options.waterColor;this.show = options.show;this.start = null;this.init();this.getNowHeight();}CoorsFormt(coors) {let Arr = [];coors.forEach((coor) => {Arr.push(coor[0]);Arr.push(coor[1]);});return Arr;}async init() {this.viewerSET();// this.start = Cesium.JulianDate.now(new Date());const self = this;this.property = this.computeFlight(this.times_height);this.viewer.scene.globe.depthTestAgainstTerrain = true;this.entity = this.viewer.entities.add({show: this.show,availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({start: this.start,stop: Cesium.JulianDate.addMinutes(this.start,10 * this.times_height.length,new Cesium.JulianDate()),}),]),polygon: {hierarchy: new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray(this.positions)),extrudedHeight: this.property,height:this.property,material: Cesium.Color.fromCssColorString(this.waterColor)},});}
/*
*时间水位与时间关联
*/computeFlight(data) {let property = new Cesium.SampledProperty(Number);data.forEach((item, i) => {property.addSample(Cesium.JulianDate.addMinutes(this.start,10 * i,new Cesium.JulianDate()),item);});return property;}
/*
*设置时间
*/viewerSET() {this.start = Cesium.JulianDate.fromDate(new Date());this.start = Cesium.JulianDate.addHours(this.start,8,new Cesium.JulianDate());this.stop = Cesium.JulianDate.addMinutes(this.start,10 * this.times_height.length,new Cesium.JulianDate());this.viewer.clock.startTime = this.start.clone();this.viewer.clock.currentTime = this.start.clone();this.viewer.clock.stopTime = this.stop.clone();// this.viewer.clock.multiplier = 3600if (this.viewer.timeline)this.viewer.timeline.zoomTo(this.start, this.stop);this.viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;}/*** 获取实时水面高度*/getNowHeight() {const self = this;this.viewer.clock.onTick.addEventListener(function () {if (self.increaseHeight > 0) {if (self.initialHeight > self.targertHeight) {self.currentIndex += 1;if (self.currentIndex > self.times_height.length - 2) {self.currentIndex = 0;}self.initialHeight = self.times_height[self.currentIndex];self.targertHeight = self.times_height[self.currentIndex + 1];self.increaseHeight = self.targertHeight - self.initialHeight;}}if (self.increaseHeight < 0) {if (self.initialHeight < self.targertHeight) {self.currentIndex += 1;if (self.currentIndex > self.times_height.length - 2) {self.currentIndex = 0;}self.initialHeight = self.times_height[self.currentIndex];self.targertHeight = self.times_height[self.currentIndex + 1];self.increaseHeight = self.targertHeight - self.initialHeight;}}self.initialHeight += self.increaseHeight / 100;});}/*** 改变颜色* @param {水体颜色} val*/changeWaterColor(val) {this.entity.polygon.material = val;}/*** 隐藏与显示* @param {Boolean} val*/changeWaterShow(val) {this.entity.show = val;}destroy() {this.viewer.entities.remove(this.entity);delete this.entity;delete this.positions;delete this.initialHeight;delete this.targertHeight;delete this.increaseHeight;}
}export default FloodAnalysis;

Cesium洪水淹没分析洪水淹没高度的上涨与下降相关推荐

cesium开发淹没分析_淹没在Web开发行业的工具中
cesium开发淹没分析 Every once in a while in this industry we need a reminder that our trade as front-end d ...
vue3+SuperMap iClient3D for Cesium实现淹没分析功能
本人小白一枚,文章如有问题还请各位大神评论区指出.整体实现是参考SuperMap iClient3D for Cesium的淹没分析功能源码~ 文章目录前言一.主要功能二.具体实现 1.HTML ...
vue + cesium 洪水淹没分析完整示例
目录一.洪水淹没分析效果二.部分核心代码 1.绘制多边形范围 2.处理多边形区域的最大和最小高程三.JS完整代码一.洪水淹没分析效果二.部分核心代码 1.绘制多边形范围 /*** @auth ...
怎么使用ArcScene进行洪水淹没分析
概述水经注软件除了可以轻松下载无水印Google Earth卫星影像.有明确拍摄日期的历史影像.地方高清天地图.百度高德大字体打印地图,按1万/5千等国家标准图幅下载,对百度坐标与火星坐标进行纠偏: ...
ArcGIS利用DEM进行洪水淹没分析（附练习数据下载）
ArcGIS利用DEM进行洪水淹没分析(附练习数据下载) 图片基于数字高程模型 ( DEM )格网模型, , 实现给定水深情况下洪水淹没区的计算模型, 讨论洪水淹没演进过程可视化实现的关键技术, ...
如何用ArcScene进行洪水淹没分析
近几年来,将GIS技术与RS技术相结合,根据数字高程模型DEM提供的三维数据和遥感影象数据来预测.模拟显示洪水淹没场景,并进行洪水灾害评估,已成为GIS在洪水方面主要研究领域.这里分享一下如何使用 ...
【ArcGIS教程】洪水淹没分析——以青海省为例
Part1准备数据如下为已经处理好的所需数据:青海省90mDEM.青海省边界数据.青海省影像青海省90mDEM:可从地理空间数据云等网站下载好后进行镶嵌拼接处理青海省边界数据:可直接下载处理青 ...
有源淹没分析arcgis_基于ArcGIS的洪水淹没分析与三维模拟
基于 ArcGIS 的洪水淹没分析与三维模拟孙君 , 奚赛英 , 尤迪 , 郑付涛 [摘要] 摘要 : 洪水淹没范围的确定是洪灾损失评估和防洪决策的核心环节 . 基于 TIN 数据 , 运 ...
怎么使用ArcMap进行洪水淹没分析
概述水经注软件除了可以轻松下载无水印Google Earth卫星影像.有明确拍摄日期的历史影像.地方高清天地图.百度高德大字体打印地图,按1万/5千等国家标准图幅下载,对百度坐标与火星坐标进行纠偏: ...

Cesium洪水淹没分析洪水淹没高度的上涨与下降

Cesium洪水淹没分析洪水淹没高度的上涨与下降相关推荐

最新文章

热门文章

Cesium洪水淹没分析 洪水淹没高度的上涨与下降

Cesium洪水淹没分析 洪水淹没高度的上涨与下降相关推荐

最新文章

热门文章

Cesium洪水淹没分析洪水淹没高度的上涨与下降

Cesium洪水淹没分析洪水淹没高度的上涨与下降相关推荐