Cesium水淹分析

已于 2023-09-27 17:18:48 修改
阅读量353 收藏 1
点赞数 1
分类专栏： Cesium GIS 文章标签： Cesium
于 2023-09-27 17:13:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014556081/article/details/133358202
版权
Cesium 同时被 2 个专栏收录
48 篇文章 44 订阅
订阅专栏
GIS
20 篇文章 1 订阅
订阅专栏

一、简介

范围，分析，模拟，水淹分析，绘制。

二、示例代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水淹分析</title>
    <script src="./js/config.js"></script>
    <script src="./scripts/vue.min.js"></script>
    <script type="text/javascript" src="./scripts/element.index.js"></script>
    <link rel="stylesheet" href="./scripts/element.index.css">
    <link rel="stylesheet" href="./css/common.css">
    <script type="text/javascript" src="../anov-gis-sdk/index.js"></script>
    <link rel="stylesheet" href="../anov-gis-sdk/index.css">
    
</head>

<body>
    <div id="global">

    </div>
    <script>
        new Vue({
            el: '#global',
            template: `
          <div id="cesiumContainer">
            <div class="waterformBox">
                <el-form ref="form" :model="form">
                <el-form-item label="自动分析">
                    <el-col :span="15">
                        <el-switch v-model="form.auto" ></el-switch>
                    </el-col>
                    <el-col :span="9">
                        <el-button
                            type="primary"
                            icon="el-icon-edit"
                            size="mini"
                        
                            @click="draw"
                            round
                        ></el-button>
                        <el-button
                            type="primary"
                            icon="el-icon-delete"
                            size="mini"
                            
                            @click="reset"
                            round
                        ></el-button>
                    </el-col>

                </el-form-item>
                <el-form-item label="当前高程">
                    <el-input v-model.number="form.curHeight" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="最小高程">
                    <el-input
                    v-model.number="form.minHeight"
                    @change="changeHeigit"
                    ></el-input>
                </el-form-item>
                <el-form-item label="最大高程">
                    <el-input
                    v-model.number="form.maxHeight"
                    @change="changeHeigit"
                    ></el-input>
                </el-form-item>
                <el-form-item label="步进高度">
                    <el-input
                    v-model.number="form.setpHeight"
                    @change="changeHeigit"
                    ></el-input>
                </el-form-item>
                </el-form>
                <el-slider
                v-model="form.curHeight"
                :min="form.minHeight"
                :max="form.maxHeight"
                :step="form.setpHeight"
                @input="changeslider"
                ></el-slider>
            </div>
          </div>`,
            data() {
                let t = [
                    //初始范围
                    107.428594,
                    41.282392,
                    107.456929,
                    41.282392,
                    107.456929,
                    41.305005,
                    107.428594,
                    41.305005
                ];
                let t2 = [
                    //初始范围
                    107.345147,
                    41.395337,
                    107.568974,
                    41.396442,
                    107.555225,
                    41.224117,
                    107.376214,
                    41.228213
                ];
                let drawPolygon = null; //绘制的范围
                let waterAnalysis = null; //水淹分析类
                let drawPositions = Cesium.Cartesian3.fromDegreesArray(t2); //绘制产生的点
                let polygonEntity = null; //绘制的多边形实体
                let form = {
                    auto: false,
                    curHeight: 990,
                    minHeight: 990,
                    maxHeight: 1440,
                    setpHeight: 20
                };
                //这里存放数据
                return {
                    form,
                    t,
                    t2,
                    drawPolygon,
                    waterAnalysis,
                    drawPositions,
                    polygonEntity,
                    defaultPolygon: undefined,
                    yelv: false,
                    haveDraw: false
                };
            },
            //监控data中的数据变化
            watch: {
                "form.auto"(v) {
                    if (v) {
                        this.start();
                    } else {
                        this.notAuto();
                    }
                }
            },
            mounted() {
                this.init();
            },
            //方法集合
            methods: {
                // 进度条修改
                changeslider(v) {
                    !v && this.haveDraw && this.waterAnalysis && this.waterAnalysis.stop();
                    this.yelv && !this.form.auto && this.waterAnalysis && this.waterAnalysis.noAuto(this.drawPositions, this.form.curHeight);
                    this.yelv = true;
                    this.haveDraw = false;
                },
                // 不自动分析
                notAuto() {
                    this.pause();
                    if (this.waterAnalysis) {
                        this.waterAnalysis.noAuto(this.drawPositions, this.form.curHeight);
                    }
                },
                // 修改高度
                changeHeigit(type) {
                    if (this.waterAnalysis) {
                        this.waterAnalysis.resetParas(this.form);
                    }
                },
                // 初始化
                init() {
                    this.init3d();
                    this.swithTerrainProvider2SampleTerrain(false);
                    this.reset();
                },
                // 初始化三维球
                init3d() {
                    window.viewer = new ANOVGIS.Viewer("cesiumContainer", {
                        vrButton: false,
                    });
                    const baselayer = ANOVGIS.ImageryLayerFactory.createImageryLayer(
                        ANOVGIS.ImageryType.TDT,
                        {
                            style: "img",
                            key: globalConfig.tdtKey
                        }
                    );
                    viewer.imageryLayers.addImageryProvider(baselayer);
                },
                // 重置
                reset(callBack) {
                    let that = this;
                    this.clear();
                    that.initWater();
                    that.drawPositions = Cesium.Cartesian3.fromDegreesArray(that.t2);
                    ANOVGIS.LocateUtil.flyToPoints(viewer, that.drawPositions, 0,
                        -28,
                        14000, 2, callBack);
                },
                // 初始化水淹分析类
                initWater() {
                    if (!this.waterAnalysis) {
                        this.waterAnalysis = new ANOVGIS.CesiumWaterAnalysis(window.viewer, {
                            minHeight: this.form.minHeight,
                            maxHeight: this.form.maxHeight,
                            speed: this.form.setpHeight,
                            intervalStep: 300
                        });
                    }

                },
                // 切换地形数据
                swithTerrainProvider2SampleTerrain(is2Sample) {
                    if (viewer.terrainProvider instanceof Cesium.EllipsoidTerrainProvider) {
                        viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
                            url: Cesium.IonResource.fromAssetId(1)
                        });
                    } else {
                        if (is2Sample) {
                            viewer.terrainProvider = new Cesium.EllipsoidTerrainProvider();
                        }
                    }
                },
                // 开始绘制
                draw() {
                    let that = this;
                    this.clear();
                    this.initWater();
                    this.drawPolygon = new ANOVGIS.DrawPolygon(viewer, {
                        justDraw: true,
                        fill: false,
                        clampToGround: true,
                        onCompleted: function (positions) {
                            that.drawPositions = positions;
                            that.haveDraw = true;
                        }
                    });
                    this.drawPolygon.startDraw();
                },
                // 开始分析
                start() {
                    // if (this.waterAnalysis) {
                    //     this.waterAnalysis.stop();
                    // }
                    if (!this.waterAnalysis) {
                        alert("未初始化");
                        return;
                    }
                    this.waterAnalysis.start(this.drawPositions, h => {
                        this.form.curHeight = h;
                    });
                },
                // 暂停
                pause() {
                    this.waterAnalysis && this.waterAnalysis.pause();
                },
                // 停止
                stop() {
                    this.clear();
                },
                // 清除
                clear() {
                    this.form = {
                        auto: false,
                        curHeight: 990,
                        minHeight: 990,
                        maxHeight: 1440,
                        setpHeight: 20
                    };
                    if (this.waterAnalysis) {
                        this.waterAnalysis.stop();
                        this.waterAnalysis = null;
                    }
                    if (this.drawPolygon) {
                        this.drawPolygon.clear();
                        this.drawPolygon = null;
                    }
                }
            },
        });
    </script>

</body>

</html>

苹果园dog
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Cesium教程(十七)：淹没分析
WwLK123的博客
06-14 2308
淹没分析是根据某片区域的地形及洪水流量速度，动态模拟该地形区域水位逐渐上涨的淹没过程。该功能可适用于山区、丘陵等地形起伏较大区域，模拟洪水涨到安全限定高度的淹没过程，为防洪水救灾提供一定的参考。此外，还可以为河谷地带修建水利工程设计与选址提供参考依据。
Cesium 水淹分析
苹果园dog
01-26 3443
一、概述 这是采用polygon加高度模拟出来的，extrudedHeight是高度。 二、效果 三、代码 1、分析（部分） /** * 开始分析 * @param {*} cartesiansArray 笛卡尔坐标数组，范围 */ start(cartesiansArray,callback) { if (!this._polygon) { this._drawPolygon(cart..
cesium 水面、淹没 效果
weixin_30700099的博客
07-23 3346
水面效果 参考： 　http://cesiumcn.org/topic/158.html 　http://api.rivermap.cn/cesium/rivermap/map.html 　https://blog.csdn.net/weixin_42496466/article/details/80747565 demo效果： 主要代码： //绘制水面波浪效果 ...
【Cesium开发实战】淹没分析功能的实现
最新发布
weixin_30561959的博客
07-22 95
1.话不多说，先展示视频：淹没分析2.设计思路绘制点移动绘制多个点会形成一个面，右键完成绘制，点击开始淹没分析水位会进行设定速度、设定高度的上升，有动画效果。项目中使用了自己的token和高程数据，需要使用者替换自己的token和高程。3.具体代码登录后复制 <template> <div i...
cesium之淹没分析实现
weixin_69820680的博客
01-08 5284
cesium中淹没分析的实现思路以及部分参考代码
Cesium洪水淹没分析 洪水淹没高度的上涨与下降
lewis的博客
04-20 2287
最近在基于cesium做水利项目的淹没分析 因为真实的洪水情况下，对于不同的地势来说 每个淹没区间的水位高度肯定是不一样的 所以要求对多河段的高度做一个动态的水位上涨与下降的效果 不同河段水位高要以不一样的颜色显示 以下是其中一个河段的实现的代码参考
DEJA_VU3D - Cesium功能集 之 062-天气之雪效果
总得学点什么的博客
08-15 938
本篇主要实现天气效果中的雪天效果，相对来说比较简单，包括完整源代码奉上
cesium 水位模拟_Cesium实现淹没分析
weixin_39736547的博客
12-19 1956
代码思路Cesium的淹没效果主要使用到的是Cesium库中polygon的extrudedHeight属性。通过定时器对绘制的polygon进行高度增加同时将polygon的颜色设置成淡蓝色，从而实现淹没效果的展示。实现的效果淹没实现效果代码展示// 淹没效果function drawPolygon(){var waterHeight = 100;//初始设定的水位高度var targetHei...
cesium 水淹分析
09-21
Cesium的水淹分析是通过模拟水位上升来确定地形中可能被淹没的区域。在提供的代码中，start函数使用cartesiansArray参数作为笛卡尔坐标数组，表示需要进行水淹分析的区域范围。函数内部使用_drawPolygon函数绘制...
61.（cesium篇）cesium淹没分析.zip
11-30
4. **几何计算**：在Cesium中，可以通过几何对象和算法来计算水位上升后，哪些地形和建筑物会被水覆盖。这通常涉及到对多边形、线段和点的运算。 5. **动画和时间滑块**：Cesium支持时间序列动画，因此可以展示水位...
Cesium淹没分析（带热力图）
03-13
博客：https://blog.csdn.net/weixin_44339199/article/details/123394071?spm=1001.2014.3001.5502
洪水淹没分析 vue+cesium完整代码示例
11-13
洪水淹没分析 vue+cesium完整代码示例 包含核心代码及处理多边形区域的最大和最小高程等
cesium淹没分析.zip
09-30
基于cesium实现的水淹分析
第35节：cesium 水淹分析（含源码+视频）
qq_29384639的博客
06-16 999
cesium加载高程，进行水淹分析，可以定义最低高程、最高高程，水淹速度
Cesium 三维分析之【水淹没分析】
喜欢钻研前端和分享技术
08-22 943
Cesium 三维分析之地形 水淹没分析
cesium之淹没分析
七月❤的博客
05-07 3212
发现最近成长很多，之前测距测面于我来说，做起来遥不可及，现在不到半天的工作时间便做出了淹没分析，当然也是参考的了 绘制淹没范围 开始进行淹没分析
【Cesium】Cesium实现淹没分析（CallbackProperty方式）
ljy1998dsb的博客
07-19 4382
Cesium实现淹没分析（获取范围地形高度极值）
cesium淹没分析（纯前端实现）
热门推荐
内容主要为前端技术
12-17 1万+
原理：利用polygon的extrudedHeight属性，动态增加（原理很简单，但效果挺好） 效果图： 核心代码： _drawWater(targetHeight, adapCoordi) { let entity = this.earth.entities.add({ polygon: { hierarchy: Cesium.Cartesian3.fromDeg.........
53.（cesium篇）cesium叠加波纹点，水波纹（贴地）(着色器)
GIS之家家长
04-07 721
听老人家说：多看美女会长寿 地图之家总目录（订阅之前建议先查看该博客） 文章末尾处提供保证可运行完整代码包，运行如有问题，可“私信”博主。 效果如下所示： 下面献上完整代码，代码重要位置会做相应解释 <html lang="en"> <head> <meta charset="UTF-8"/> <script src="Build/Cesium/Cesium.js"></script> <link rel="st
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

苹果园dog

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值