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() ,所有简单的程序都可以定义其他额外的函数。 您可以把代码划分到不同的函数中。如何划分代码到不同的函数中是由您来决定的,但在逻辑上ÿ…...

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࿰…...
最大似然检测在通信解调中的应用
最大似然检测(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.排序࿱…...
[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 -> 配置文…...

大话软工笔记—需求分析概述
需求分析,就是要对需求调研收集到的资料信息逐个地进行拆分、研究,从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要,后续设计的依据主要来自于需求分析的成果,包括: 项目的目的…...

Opencv中的addweighted函数
一.addweighted函数作用 addweighted()是OpenCV库中用于图像处理的函数,主要功能是将两个输入图像(尺寸和类型相同)按照指定的权重进行加权叠加(图像融合),并添加一个标量值&#x…...
LLM基础1_语言模型如何处理文本
基于GitHub项目:https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken:OpenAI开发的专业"分词器" torch:Facebook开发的强力计算引擎,相当于超级计算器 理解词嵌入:给词语画"…...
实现弹窗随键盘上移居中
实现弹窗随键盘上移的核心思路 在Android中,可以通过监听键盘的显示和隐藏事件,动态调整弹窗的位置。关键点在于获取键盘高度,并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...

Redis数据倾斜问题解决
Redis 数据倾斜问题解析与解决方案 什么是 Redis 数据倾斜 Redis 数据倾斜指的是在 Redis 集群中,部分节点存储的数据量或访问量远高于其他节点,导致这些节点负载过高,影响整体性能。 数据倾斜的主要表现 部分节点内存使用率远高于其他节…...
DeepSeek 技术赋能无人农场协同作业:用 AI 重构农田管理 “神经网”
目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...

论文笔记——相干体技术在裂缝预测中的应用研究
目录 相关地震知识补充地震数据的认识地震几何属性 相干体算法定义基本原理第一代相干体技术:基于互相关的相干体技术(Correlation)第二代相干体技术:基于相似的相干体技术(Semblance)基于多道相似的相干体…...

基于 TAPD 进行项目管理
起因 自己写了个小工具,仓库用的Github。之前在用markdown进行需求管理,现在随着功能的增加,感觉有点难以管理了,所以用TAPD这个工具进行需求、Bug管理。 操作流程 注册 TAPD,需要提供一个企业名新建一个项目&#…...
JS手写代码篇----使用Promise封装AJAX请求
15、使用Promise封装AJAX请求 promise就有reject和resolve了,就不必写成功和失败的回调函数了 const BASEURL ./手写ajax/test.jsonfunction promiseAjax() {return new Promise((resolve, reject) > {const xhr new XMLHttpRequest();xhr.open("get&quo…...
「全栈技术解析」推客小程序系统开发:从架构设计到裂变增长的完整解决方案
在移动互联网营销竞争白热化的当下,推客小程序系统凭借其裂变传播、精准营销等特性,成为企业抢占市场的利器。本文将深度解析推客小程序系统开发的核心技术与实现路径,助力开发者打造具有市场竞争力的营销工具。 一、系统核心功能架构&…...