Vue.js2+Cesium1.103.0 九、淹没分析效果
Vue.js2+Cesium1.103.0 九、淹没分析效果

Demo
<template><divid="cesium-container"style="width: 100%; height: 100%;"><spanid="button"style="position: absolute; right: 50px; top: 50px; z-index: 999; font-size: 24px; color: #fff; cursor: pointer;">淹没分析</span></div>
</template><script>
/* eslint-disable no-undef */
/* eslint-disable new-cap */
import { lineString, bbox, bboxPolygon, area, pointGrid } from '@turf/turf'
export default {data() {return {}},computed: {},watch: {},mounted() {window.$InitMap()const tileset = new Cesium.Cesium3DTileset({url: 'https://lab.earthsdk.com/model/3610c2b0d08411eab7a4adf1d6568ff7/tileset.json',debugShowMemoryUsage: false})viewer.scene.primitives.add(tileset)viewer.zoomTo(tileset)const entity = viewer.entities.add({polygon: {hierarchy: new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArrayHeights([121.4631015, 31.2671618, 0, 121.5367499, 31.2658501, 0, 121.5328263,31.2059886, 0, 121.4590159, 31.2055623, 0])),// extrudedHeight: 200,// perPositionHeight: true,// heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,material: new Cesium.ColorMaterialProperty(new Cesium.Color.fromCssColorString('#17E980').withAlpha(0))}})// 淹没分析function FloodAnalysis() {const positions = entity.polygon.hierarchy.getValue(Cesium.JulianDate.now()).positionsconst tempPoints = []for (let i = 0; i < positions.length; i++) {const cartographic =viewer.scene.globe.ellipsoid.cartesianToCartographic(positions[i])const lat = Cesium.Math.toDegrees(cartographic.latitude)const lng = Cesium.Math.toDegrees(cartographic.longitude)tempPoints.push([lng, lat])}// 生成外接矩形const line = lineString(tempPoints)const _bbox = bbox(line)const _bboxPolygon = bboxPolygon(_bbox)const _area = area(_bboxPolygon)// 生成格网// 计算网格点之间的距离,尽量保证范围内有1万个左右格网点。const cellSide = Math.sqrt(_area / 1000000) / 100const options = { units: 'kilometers' }const grid = pointGrid(_bbox, cellSide, options)const gridPositions = []grid.features.forEach(f => {gridPositions.push(Cesium.Cartographic.fromDegrees(f.geometry.coordinates[0],f.geometry.coordinates[1]))})const promise = Cesium.sampleTerrainMostDetailed(viewer.terrainProvider,gridPositions)let maxHeight = 100let minHeight = 0Promise.resolve(promise).then(function (updatedPositions) {for (let i = 0; i < updatedPositions.length; i++) {const height = updatedPositions[i].height// 获取格网点处地形高度minHeight = height < minHeight ? height : minHeightmaxHeight = height > maxHeight ? height : maxHeight}const value = {minHeight,maxHeight}let waterHeight = value.minHeightconst targertWaterHeight = value.maxHeightentity.polygon.perPositionHeight = trueentity.polygon.material = new Cesium.Color.fromBytes(64, 157, 253, 150)entity.polygon.extrudedHeight = new Cesium.CallbackProperty(function () {waterHeight += 0.5if (waterHeight > targertWaterHeight) {waterHeight = targertWaterHeight}return waterHeight},false)return value})}document.getElementById('button').onclick = function () {FloodAnalysis()}},methods: {}
}
</script>相关文章:
Vue.js2+Cesium1.103.0 九、淹没分析效果
Vue.js2Cesium1.103.0 九、淹没分析效果 Demo <template><divid"cesium-container"style"width: 100%; height: 100%;"><spanid"button"style"position: absolute; right: 50px; top: 50px; z-index: 999; font-size: 24px…...
SpringBoot案例-部门管理-新增
根据页面原型,明确需求 页面原型 需求 阅读接口文档 接口文档链接如下: 【腾讯文档】SpringBoot案例所需文档 https://docs.qq.com/doc/DUkRiTWVaUmFVck9N 思路分析 前端在输入要新增的部门名称后,会以JSON格式将数据传入至后端…...
微信小程序中背景图片如何占满整个屏幕,拉伸
不变形 1. 在页面的wxss文件中,设置背景图片的样式: page{background-image: url(图片路径);background-size: 100% 100%;background-repeat: no-repeat; }2. 在页面的json文件中,设置背景图片的样式: {"backgroundTextStyl…...
Java并发编程(四)线程同步 中 [AQS/Lock]
概述 Java中可以通过加锁,来保证多个线程访问某一个公共资源时,资源的访问安全性。Java提出了两种方式来加锁 第一种是我们上文提到的通过关键字synchronized加锁,synchronized底层托管给JVM执行的,并且在java 1.6 以后做了很多…...
PyTorch深度学习环境安装(Anaconda、CUDA、cuDNN)及关联PyCharm
1. 关系讲解 Tytorch:Python机器学习库,基于Torch,用于自然语言处理等应用程序 Anaconda:是默认的python包和环境管理工具,安装了anaconda,就默认安装了conda CUDA:CUDA是一种由显卡厂商NVIDI…...
Active Directory安全和风险状况管理
风险评估和管理 风险评估和管理是主动安全性和合规性管理不可或缺的一部分。 发现关键基础设施组件中的风险行为和配置对于阻止网络入侵和预防网络攻击至关重要。帐户泄露和配置错误漏洞是用于破坏网络的常见技术。当评估、监控和降低 Active Directory 基础架构的风险时&…...
学术论文GPT源码解读:从chatpaper、chatwithpaper到gpt_academic
前言 之前7月中旬,我曾在微博上说准备做“20个LLM大型项目的源码解读” 针对这个事,目前的最新情况是 已经做了的:LLaMA、Alpaca、ChatGLM-6B、deepspeedchat、transformer、langchain、langchain-chatglm知识库准备做的:chatpa…...
单链表(C语言版)
单链表:理解、实现与应用 单链表(Singly Linked List)是一种常见的数据结构,用于存储一系列具有相同类型的元素,并通过节点之间的链接建立起它们的关系。每个节点包含一个数据元素和一个指向下一个节点的指针。相比于…...
初学vue3时应该注意的几个问题
初学vue3时应该注意的几个问题 声明响应式 响应式数据的声明在vue2的时候很简单,在data中声明就行了。但现在可以使用多个方式。 reactive用于声明Object, Array, Map, Set; ref用于声明String, Number, Boolean 使用reactive来声明基础数据类型(Str…...
基于Selenium技术方案的爬虫入门实践
通过爬虫技术抓取网页,动态加载的数据或包含 JavaScript 的页面,需要使用一些特殊的技术和工具。以下是一些常用的技术方法: 使用浏览器模拟器:使用像 Selenium、PhantomJS 或其他类似工具可以模拟一个完整的浏览器环境࿰…...
【C++入门到精通】C++入门 —— vector (STL)
阅读导航 前言一、vector简介1. 概念2. 特点 二、vector的使用1.vector 构造函数2. vector 空间增长问题⭕resize 和 reserve 函数 3. vector 增删查改⭕operator[] 函数 三、迭代器失效温馨提示 前言 前面我们讲了C语言的基础知识,也了解了一些数据结构࿰…...
git简单使用
1.在 远端仓库创建好仓库 2.在本地中创建仓库 mkdir 仓库名 cd 仓库名 3.初始化(可以省略) git init 4.添加远端仓库 git remote add origin https://gitee.com/zengtian_7/pet_home.git 5.初始化代码库:当你创建一个全新的代码库时,…...
CSS—选择器
目录 一、CSS简介 二、HTML页面中常用的元素 三、CSS语法规则 四、常用的选择器 五、CSS的三种使用方法 六、选择器参考 一、CSS简介 CSS (Cascading Style Sheets,层叠样式表),是一种用来为结构化文档(如 HTML 文档或 XML 应…...
【Unity实战系列】Unity的下载安装以及汉化教程
君兮_的个人主页 即使走的再远,也勿忘启程时的初心 C/C 游戏开发 Hello,米娜桑们,这里是君兮_,怎么说呢,其实这才是我以后真正想写想做的东西,虽然才刚开始,但好歹,我总算是启程了。今天要分享…...
电脑IP地址错误无法上网怎么办?
电脑出现IP地址错误后就将无法连接网络,从而无法正常访问互联网。那么当电脑出现IP地址错误时该怎么办呢? 确认是否禁用本地连接 你需要先确定是否禁用了本地网络连接,如果发现禁用,则将其启用即可。 启用方法:点击桌…...
机器视觉项目流程和学习方法
机器视觉项目流程: 00001. 需求分析和方案建立 00002. 算法流程规划和业务逻辑设计 00003. 模块化编程和集成化实现 00004. 调试和优化,交付客户及文档 学习机器视觉的方法: 00001. 实战学习,结合项目经验教训 00002. 学习…...
LNMP环境搭建wordpress以及跳转后台报404解决
基于上文配置好的LNMP环境继续搭建wordpress 目录 一.到官网下载tar.gz包,并上传到Linux上,也可以通过复制链接地址进行下载 二. 将wordpress中的所有文件移动到你nginx.conf中指定目录中 三.为wordpress配置数据库 四.到浏览器进行注册 1.刚开始…...
Nginx+Tomcat的动静分离
首先准备好5台机子:2台装有tomcat,3台装有nginx 1.关闭5台机子的防火墙 systemctl stop firewalld systemctl disable firewalld setenforce 0 Nginx1 vim /usr/local/nginx/conf/nginx.conf#在--#pid-- 下做四层代理 stream {upstream test {server …...
Tomcat部署与优化
目录 一、Tomcat介绍 二、Tomcat核心组件 1、web容器:完成web服务器的功能,web应用 2、servlet容器:名字:catalina,处理servlet代码 servlet的功能 3、jsp:jsp动态页面翻译成servlet代码,用…...
jmeter工具使用
jmeter工具使用 官方下载 安装好jdk后,下载之后直接运行即可 基本流程 1、首先添加线程组 线程组:JMeter是由Java实现的,并且使用一个Java线程来模拟一个用户,因此线程组(Thread Group)就是指一组用户的…...
19c补丁后oracle属主变化,导致不能识别磁盘组
补丁后服务器重启,数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后,存在与用户组权限相关的问题。具体表现为,Oracle 实例的运行用户(oracle)和集…...
装饰模式(Decorator Pattern)重构java邮件发奖系统实战
前言 现在我们有个如下的需求,设计一个邮件发奖的小系统, 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式(Decorator Pattern)允许向一个现有的对象添加新的功能,同时又不改变其…...
椭圆曲线密码学(ECC)
一、ECC算法概述 椭圆曲线密码学(Elliptic Curve Cryptography)是基于椭圆曲线数学理论的公钥密码系统,由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA,ECC在相同安全强度下密钥更短(256位ECC ≈ 3072位RSA…...
Admin.Net中的消息通信SignalR解释
定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...
JVM垃圾回收机制全解析
Java虚拟机(JVM)中的垃圾收集器(Garbage Collector,简称GC)是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象,从而释放内存空间,避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...
2.Vue编写一个app
1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...
江苏艾立泰跨国资源接力:废料变黄金的绿色供应链革命
在华东塑料包装行业面临限塑令深度调整的背景下,江苏艾立泰以一场跨国资源接力的创新实践,重新定义了绿色供应链的边界。 跨国回收网络:废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点,将海外废弃包装箱通过标准…...
【AI学习】三、AI算法中的向量
在人工智能(AI)算法中,向量(Vector)是一种将现实世界中的数据(如图像、文本、音频等)转化为计算机可处理的数值型特征表示的工具。它是连接人类认知(如语义、视觉特征)与…...
土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测;从基础到高级,涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等
🔍 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术,可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势,还能有效评价重大生态工程…...
涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战
“🤖手搓TuyaAI语音指令 😍秒变表情包大师,让萌系Otto机器人🔥玩出智能新花样!开整!” 🤖 Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制(TuyaAI…...
