当前位置: 首页 > news >正文

iClient3D for Cesium 实现限高分析

作者:gaogy

1、背景

随着地理信息技术的发展,三维地球技术逐渐成为了许多领域中的核心工具,尤其是在城市规划、环境监测、航空航天以及军事领域。三维地图和场景的应用正在帮助人们更加直观地理解空间数据,提供更高效的决策支持。

iClient3D for Cesium 是由 SuperMap 提供的一款开发工具,旨在将三维地理信息系统 (3D GIS) 技术应用于大规模的地理信息可视化与分析,帮助开发者通过 Web 平台展示三维地图,还提供了强大的数据分析功能,包括对建筑物、地形、设施等的空间分析。

限高分析是地理信息系统中的一种常见分析需求,特别是在城市规划与建筑设计中,限高分析能够帮助规划人员确保建筑物在设计过程中不会超过法规规定的高度限制,并避免与其他建筑物或设施发生冲突。通过限高分析,开发者可以根据地形、建筑物高度等条件,动态计算和展示特定区域内的限高区域。

本文将利用 iClient3D for Cesium 实现三维场景下得限高分析功能,帮助用户在三维地图中直观地分析和展示限高区域,从而在建筑设计和城市规划过程中提供有效的决策依据。

2、限高分析效果演示

iClient3D for Cesium 实现限高分析

3、实现过程

3.1、项目环境

本文采用Vite6 + Vue3.5 + iClient3D for Cesium(2024) 框架实现,项目具体使用依赖如下:

{"vue": "^3.5.13","element-plus": "^2.9.1","vite": "^6.0.1"
}

3.2、初始化三维场景

function initViewer() {window.viewer = new Cesium.Viewer('cesiumContainer', { infoBox: false })viewer.scene.addS3MTilesLayerByScp('http://www.supermapol.com/realspace/services/3D-dynamicDTH/rest/realspace/datas/Config%20-%201/config',{ name: 's3mLayer' })viewer.scene.camera.setView({destination: new Cesium.Cartesian3(-2623004.4174251584, 3926981.958360567, 4287374.829655093),orientation: {heading: 4.39611370540786,pitch: -0.43458664812464143,roll: 2.0174972803488345e-11}})
}

3.3、利用iServer Data 服务查询,并绘制 Entity 面

async function queryByGeometry(queryGeometry) {const queryObj = {getFeatureMode: 'SPATIAL',spatialQueryMode: 'CONTAIN',datasetNames: ['铁岭矢量面:New_Region3D_1'],hasGeometry: true,geometry: { points: queryGeometry, type: 'REGION' }}try {const response = await fetch('http://www.supermapol.com/realspace/services/data-dynamicDTH/rest/data/featureResults.geojson?returnContent=true',{method: 'POST',headers: { 'Content-Type': 'application/json' },body: JSON.stringify(queryObj)})const data = await response.json()data.features.forEach((feature) => {if (feature.geometry.type === 'Polygon') {const lonLatArr = []feature.geometry.coordinates[0].forEach((coord) => lonLatArr.push(...coord))const entity = viewer.entities.add({id: `identify-area-${feature.id || Date.now()}`,name: '单体化标识面',polygon: {hierarchy: Cesium.Cartesian3.fromDegreesArray(lonLatArr),material: new Cesium.Color(1.0, 0.0, 0.0, 0.6),classificationType: Cesium.ClassificationType.S3M_TILE, // 贴在 S3M 模型表面groundBottomAltitude: height.value,groundExtrudedHeight: 500},info: feature.properties})entities.push(entity)}})} catch (error) {throw new error(error.message)}
}

3.4、使用 Cesium 的 DrawHandler 绘制限高分析区域

const handlerPolygon = new Cesium.DrawHandler(viewer, Cesium.DrawMode.Polygon)
handlerPolygon.drawEvt.addEventListener((result) => {handlerPolygon.polygon.show = falsehandlerPolygon.polyline.show = falseconst positions = result.object.positionsconst geometries = []let minLongitude = Infinitylet maxLongitude = -Infinitylet minLatitude = Infinitylet maxLatitude = -Infinitypositions.forEach((position) => {const cartographic = Cesium.Cartographic.fromCartesian(position)const longitude = Cesium.Math.toDegrees(cartographic.longitude)const latitude = Cesium.Math.toDegrees(cartographic.latitude)minLongitude = Math.min(minLongitude, longitude)maxLongitude = Math.max(maxLongitude, longitude)minLatitude = Math.min(minLatitude, latitude)maxLatitude = Math.max(maxLatitude, latitude)})const rectangle = Cesium.Rectangle.fromDegrees(minLongitude, minLatitude, maxLongitude, maxLatitude)const southWest = { x: minLongitude, y: minLatitude }const southEast = { x: maxLongitude, y: minLatitude }const northEast = { x: maxLongitude, y: maxLatitude }const northWest = { x: minLongitude, y: maxLatitude }geometries.push(southWest, southEast, northEast, northWest)entity = viewer.entities.add({rectangle: {coordinates: rectangle,height: height.value,material: new Cesium.Color(1.0, 1.0, 1.0, 0.5),outline: true,outlineColor: Cesium.Color.RED}})queryByGeometry(geometries)
})

注意,这里是根据绘制的几何面的外接矩形作为限高分析的范围区域,如有其他需要可自行更改分析区域

3.5、动态调整限高高度

function changeHeight() {if (entity) entity.rectangle.height = height.valuefor (const entity of entities) {if (entity) entity.polygon.groundBottomAltitude = height.value}
}

height 为 vue 的 ref 对象,利用 vue 双向绑定指令可实现动态修改分析范围面的高度;而分析结果的楼栋 entity 对象,则可以通过修改其 groundBottomAltitude 属性,动态修改其高度,实现限高分析。

3.6、点击分析结果展示属性信息

const pickHandler = new Cesium.ScreenSpaceEventHandler(window.viewer.scene.canvas)
pickHandler.setInputAction((event) => {const feature = window.viewer.scene.pick(event.position)if (Cesium.defined(feature)) {if (Object.prototype.hasOwnProperty.call(feature, 'id') && feature.id instanceof Cesium.Entity) {if (feature.id._id.startsWith('identify-area')) {const entity = viewer.entities.getById(feature.id._id)tableData.value = Object.keys(entity.info).map((key) => {return { name: key, info: entity.info[key] }})showInfo.value = true}}}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK)

4、总结

本文借鉴SuperMap iClientD for Cesium官网的动态单体化示例(support.supermap.com.cn:8090/webgl/Cesium/examples/webgl/editor.html#dynamicDTH), 通过修改entity 的 groundBottomAltitude 属性,动态修改其高度,实现限高分析,能够动态的展示超过限高高度的具体楼栋,并能展示其属性信息,从而在建筑设计和城市规划过程中为决策者提供有效的决策依据。

本文完整Vue代码可在https://download.csdn.net/download/supermapsupport/90151388下载参考

相关文章:

iClient3D for Cesium 实现限高分析

作者:gaogy 1、背景 随着地理信息技术的发展,三维地球技术逐渐成为了许多领域中的核心工具,尤其是在城市规划、环境监测、航空航天以及军事领域。三维地图和场景的应用正在帮助人们更加直观地理解空间数据,提供更高效的决策支持。…...

AI开发:使用支持向量机(SVM)进行文本情感分析训练 - Python

支持向量机是AI开发中最常见的一种算法。之前我们已经一起初步了解了它的概念和应用,今天我们用它来进行一次文本情感分析训练。 一、概念温习 支持向量机(SVM)是一种监督学习算法,广泛用于分类和回归问题。 它的核心思想是通过…...

torch.unsqueeze:灵活调整张量维度的利器

在深度学习框架PyTorch中,张量(Tensor)是最基本的数据结构,它类似于NumPy中的数组,但可以在GPU上运行。在日常的深度学习编程中,我们经常需要调整张量的维度以适应不同的操作和层。torch.unsqueeze函数就是…...

【WRF教程第3.1期】预处理系统 WPS 详解:以4.5版本为例

预处理系统 WPS 详解:以4.5版本为例 每个 WPS 程序的功能程序1:geogrid程序2:ungrib程序3:metgrid WPS运行(Running the WPS)步骤1:Define model domains with geogrid步骤2:Extract…...

SD ComfyUI工作流 根据图像生成线稿草图

文章目录 线稿草图生成SD模型Node节点工作流程工作流下载效果展示线稿草图生成 该工作流的设计目标是将输入的图像转换为高质量的线稿风格输出。其主要流程基于 Stable Diffusion 技术,结合文本和图像条件,精确生成符合预期的线条艺术图像。工作流的核心是通过模型的条件设置…...

挑战一个月基本掌握C++(第六天)了解函数,数字,数组,字符串

一 C函数 函数是一组一起执行一个任务的语句。每个 C 程序都至少有一个函数,即主函数 main() ,所有简单的程序都可以定义其他额外的函数。 您可以把代码划分到不同的函数中。如何划分代码到不同的函数中是由您来决定的,但在逻辑上&#xff…...

git中的多人协作

目录 1.1多人协作1.1.1创建仓库1.1.2协作处理1.1.3冲突处理 1.2分支推送协作1.3分支拉取协作1.4远程分支的删除 1.1多人协作 1.1.1创建仓库 新建两个文件夹,不需要初始化为git仓库,直接克隆远程仓库命名testGit1,testGit2 指定本地仓库级别…...

解决新安装CentOS 7系统mirrorlist.centos.org can‘t resolve问题

原因 mirrorlist.centos.org yum源用不了 解决办法就是 # cd /etc/yum.repos.d/ # mv CentOS-Base.repo CentOS-Base.repo_bak # vim CentOS-Base.repoCentOS系统操作 # mv /etc/yum.repos.d/*.repo /etc/yum.repos.d/*.repo_bak # curl -o /etc/yum.repos.d/CentOS-Linux-Ba…...

RK3588 , mpp硬编码yuv, 保存MP4视频文件.

RK3588 , mpp硬编码yuv, 保存MP4视频文件. ⚡️ 传送 ➡️ Ubuntu x64 架构, 交叉编译aarch64 FFmpeg mppRK3588, FFmpeg 拉流 RTSP, mpp 硬解码转RGBRk3588 FFmpeg 拉流 RTSP, 硬解码转RGBRK3588 , mpp硬编码yuv, 保存MP4视频文件....

Elasticsearch:什么是查询语言?

查询语言定义 查询语言包括数据库查询语言 (database query language - DQL),是一种用于查询和从数据库检索信息的专用计算机语言。它充当用户和数据库之间的接口,使用户能够管理来自数据库管理系统 (database management system - DBMS) 的数据。 最广…...

均值聚类算法

K-均值聚类算法是一种常用的无监督学习算法,用于将数据集划分为 K 个簇。它基于以下的思想:通过计算数据点与各个簇中心之间的距离来确定数据点所属的簇,并更新簇中心来最小化簇内数据点的平方误差。K-均值算法的步骤如下: 1. 选…...

MySQL 中快速插入大量数据

在 MySQL 中快速插入大量数据(例如 20 万条记录)可以通过多种方法实现。以下是一些优化技巧和步骤,可以帮助你高效地插入大量数据: 1. 禁用索引和约束(如果可能) 在插入大量数据之前,禁用索引和…...

腾讯云智能结构化OCR:以多模态大模型技术为核心,推动跨行业高效精准的文档处理与数据提取新时代

🎼个人主页:【Y小夜】 😎作者简介:一位双非学校的大三学生,编程爱好者, 专注于基础和实战分享,欢迎私信咨询! 🎆入门专栏:🎇【MySQL&#xff0…...

最大似然检测在通信解调中的应用

最大似然检测(Maximum Likelihood Detection,MLD),也称为最大似然序列估计(Maximum Likelihood Sequence Estimation,MLSE),是一种在通信系统中广泛应用的解调方法。其核心思想是在给…...

SKETCHPAD——允许语言模型生成中间草图,在几何、函数、图算法和游戏策略等所有数学任务中持续提高基础模型的性能

概述 论文地址:https://arxiv.org/pdf/2406.09403 素描是一种应用广泛的有效工具,包括产生创意和解决问题。由于素描能直接传达无法用语言表达的视觉和空间信息,因此从古代岩画到现代建筑图纸,素描在世界各地被用于各种用途。儿童…...

[JAVA备忘录] Lambda 表达式简单介绍

目录 前言 函数式接口 Lambda 表达式使用实例 简单示例 1. 无参数,无返回值 2. 有参数,无返回值 3. 无参数,有返回值 4. 有参数,有返回值 解释: 集合框架 1.forEach:遍历集合 2.排序&#xff1…...

[python]使用flask-caching缓存数据

简介 Flask-Caching 是 Flask 的一个扩展,为任何 Flask 应用程序添加了对各种后端的缓存支持。它基于 cachelib 运行,并通过统一的 API 支持 werkzeug 的所有原始缓存后端。开发者还可以通过继承 flask_caching.backends.base.BaseCache 类来开发自己的…...

裸机按键输入实验

一、硬件原理分析 按键就两个状态:按下或弹起,将按键连接到一个 IO 上,通过读取这个 IO 的值就知道按 键是按下的还是弹起的。至于按键按下的时候是高电平还是低电平要根据实际电路来判断。前 面几章我们都是讲解 I.MX6U 的 GPIO 作为输出使用…...

GaussDB运维管理工具(二)

GaussDB运维管理工具(二) 集群管理组件cm_ctl工具介绍cm_ctl工具使用查询集群状态启停集群主备切换重建备DN检测进程运行查看实例配置文件手动剔除故障CNCM参数获取和配置停止仲裁 Cluster Manager(缩写为CM)是GaussDB的集群管理工…...

【HarmonyOS之旅】HarmonyOS开发基础知识(一)

目录 1 -> 应用基础知识 1.1 -> 用户应用程序 1.2 -> 用户应用程序包结构 1.3 -> Ability 1.4 -> 库文件 1.5 -> 资源文件 1.6 -> 配置文件 1.7 -> pack.info 1.8 -> HAR 2 -> 配置文件简介 2.1 -> 配置文件的组成 3 -> 配置文…...

脑机新手指南(八):OpenBCI_GUI:从环境搭建到数据可视化(下)

一、数据处理与分析实战 (一)实时滤波与参数调整 基础滤波操作 60Hz 工频滤波:勾选界面右侧 “60Hz” 复选框,可有效抑制电网干扰(适用于北美地区,欧洲用户可调整为 50Hz)。 平滑处理&…...

【OSG学习笔记】Day 18: 碰撞检测与物理交互

物理引擎(Physics Engine) 物理引擎 是一种通过计算机模拟物理规律(如力学、碰撞、重力、流体动力学等)的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互,广泛应用于 游戏开发、动画制作、虚…...

五年级数学知识边界总结思考-下册

目录 一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解:由来、作用与意义**一、知识点核心内容****二、知识点的由来:从生活实践到数学抽象****三、知识的作用:解决实际问题的工具****四、学习的意义:培养核心素养…...

vue3 定时器-定义全局方法 vue+ts

1.创建ts文件 路径&#xff1a;src/utils/timer.ts 完整代码&#xff1a; import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...

【配置 YOLOX 用于按目录分类的图片数据集】

现在的图标点选越来越多&#xff0c;如何一步解决&#xff0c;采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集&#xff08;每个目录代表一个类别&#xff0c;目录下是该类别的所有图片&#xff09;&#xff0c;你需要进行以下配置步骤&#x…...

Android 之 kotlin 语言学习笔记三(Kotlin-Java 互操作)

参考官方文档&#xff1a;https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java&#xff08;供 Kotlin 使用&#xff09; 1、不得使用硬关键字 不要使用 Kotlin 的任何硬关键字作为方法的名称 或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...

python执行测试用例,allure报乱码且未成功生成报告

allure执行测试用例时显示乱码&#xff1a;‘allure’ &#xfffd;&#xfffd;&#xfffd;&#xfffd;&#xfffd;ڲ&#xfffd;&#xfffd;&#xfffd;&#xfffd;ⲿ&#xfffd;&#xfffd;&#xfffd;Ҳ&#xfffd;&#xfffd;&#xfffd;ǿ&#xfffd;&am…...

Docker 本地安装 mysql 数据库

Docker: Accelerated Container Application Development 下载对应操作系统版本的 docker &#xff1b;并安装。 基础操作不再赘述。 打开 macOS 终端&#xff0c;开始 docker 安装mysql之旅 第一步 docker search mysql 》〉docker search mysql NAME DE…...

排序算法总结(C++)

目录 一、稳定性二、排序算法选择、冒泡、插入排序归并排序随机快速排序堆排序基数排序计数排序 三、总结 一、稳定性 排序算法的稳定性是指&#xff1a;同样大小的样本 **&#xff08;同样大小的数据&#xff09;**在排序之后不会改变原始的相对次序。 稳定性对基础类型对象…...

云原生安全实战:API网关Kong的鉴权与限流详解

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、基础概念 1. API网关&#xff08;API Gateway&#xff09; API网关是微服务架构中的核心组件&#xff0c;负责统一管理所有API的流量入口。它像一座…...