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下载参考

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/494027.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

解锁移动设备管理新技能-RayLink远程控制手机

在这个忙碌的现代社会中,智能手机已经成为我们生活的重要组成部分,它们不再仅仅是通讯工具,而是我们日常生活的核心。随着这种变化,远程控制手机的技术应运而生,为我们开启了一个全新的移动设备管理时代。今天&#xf…

基于DockerCompose搭建Redis主从哨兵模式

linux目录结构 内网配置 哨兵配置文件如下,创建3个哨兵配置文件 # sentinel26379.conf sentinel26380.conf sentinel26381.conf 内容如下 protected-mode no sentinel monitor mymaster redis-master 6379 2 sentinel down-after-milliseconds mymaster 60000 s…

c++--------c++概念

定义与起源 C是一种高级编程语言,它是C语言的扩展。C由Bjarne Stroustrup在20世纪80年代初开发,最初被称为“C with Classes”。其设计目的是在保持C语言高效性的同时,增加面向对象编程(OOP)的特性。例如,…

【优选算法---归并排序衍生题目】剑指offer51---数组中的逆序对、计算右侧小于当前元素的个数、翻转对

一、剑指offer51---数组中的逆序对 题目链接: LCR 170. 交易逆序对的总数 - 力扣(LeetCode) 题目介绍: 在数组中的两个数字,如果前面⼀个数字大于后面的数字,则这两个数字组成⼀个逆序对。输入一个数组&#xff0c…

C++算法第十二天

本篇文章,我们继续学习动态规划 第一题 题目链接 面试题 17.16. 按摩师 - 力扣(LeetCode) 题目解析 代码原理 代码编写 细节问题处理 这里的细节问题就是当n 0时的这种情况 完整源代码 class Solution { public: int massage(vector&…

java全栈day20--Web后端实战(Mybatis基础2)

一、Mybatis基础 1.1辅助配置 配置 SQL 提示。 默认在 mybatis 中编写 SQL 语句是不识别的。可以做如下配置: 现在就有sql提示了 新的问题 产生原因: Idea 和数据库没有建立连接,不识别表信息 解决方式:在 Idea 中配置 MySQL 数…

2023年厦门市第30届小学生C++信息学竞赛复赛上机操作题(三、2023C. 太空旅行(travel))

#include <bits/stdc.h>using namespace std;struct Ship {int u; // 从地球到火星的时间int v; // 从火星到天王星的时间 };// 自定义比较函数 bool cmp(const Ship &a, const Ship &b) {return a.u max(a.v, b.u) b.v < b.u max(b.v, a.u) a.v; }int ma…

使用qemu搭建armv7嵌入式开发环境

目录 目录 1 概述 2 环境准备 2.1 vexpress系列开发板介绍 2.2 安装工具 2.2.1 安装交叉工具链 2.2.2 安装qemu 2.2.3 安装其他工具 3 启动uboot 3.1 uboot下载与编译 3.1.1 下载 3.1.2 编译 3.2 使用qemu启动uboot 4 启动kernel 4.1 下载和编译kernel 4.1.1 下…

CSDN外链失效3:

参考我之前的博客&#xff1a; 外链失效博客1&#xff1a;随想笔记1&#xff1a;CSDN写博客经常崩溃&#xff0c;遇到外链图片转存失败怎么办_csdn外链图片转存失败-CSDN博客 外链失效博客2&#xff1a;网络随想2&#xff1a;转语雀_md格式转语雀lake格式-CSDN博客 markdown…

《LangChain大模型应用开发》书籍分享

前言 ChatGPT和OpenAI开发的GPT模型不仅改变了我们的写作和研究方式&#xff0c;还改变了我们处理信息的方式。《LangChain大模型应用开发》讨论了聊天模式下的LLM的运作、能力和局限性&#xff0c;包括ChatGPT和Gemini。书中通过一系列实际例子演示了如何使用LangChain框架构…

Jenkins持续集成部署——jenkins安装

前言 Jenkins 是一个开源的自动化服务器&#xff0c;主要用于持续集成&#xff08;CI&#xff09;和持续交付&#xff08;CD&#xff09;。它为软件开发团队提供了一个易于使用的平台来自动化构建、测试和部署应用程序的过程。 Jenkins 主要功能 1. 持续集成 (CI) 自动构建…

飞牛 fnos 使用docker部署 bili-sync:打造自动化 B 站资源下载器,与主流媒体服务器无缝衔接

Bili-Sync介绍及相关部署操作 一、Bili-Sync概述 Bili-Sync是哔哩哔哩内容同步助手&#xff0c;它能借助用户提供的登录信息&#xff0c;定期对用户的视频合集以及个人收藏进行遍历&#xff0c;找出还没在本地保存的新内容&#xff0c;然后自动下载到本地存储&#xff0c;以此…

Idean 处理一个项目引用另外一个项目jar 但jar版本低的问题

当在idea中一个module A引用另外一个项目B的jar&#xff0c;但是从私服仓库中拉下的jar版本比较低导致编译不通过时&#xff0c;可以把项目B拉下来&#xff0c;重新编译打包jar跟新到本地的仓库 选中右边菜单的Maven 选中对应的项目B-》Lifecycle->双击 install也可以按住c…

【day11】面向对象编程进阶(继承)

概述 本文深入探讨面向对象编程的核心概念&#xff0c;包括继承、方法重写、this和super关键字的使用&#xff0c;以及抽象类和方法的定义与实现。通过本文的学习&#xff0c;你将能够&#xff1a; 理解继承的优势。掌握继承的使用方法。了解继承后成员变量和成员方法的访问特…

高效准确的PDF解析工具,赋能企业非结构化数据治理

目录 准确性高&#xff1a;还原复杂版面元素 使用便捷&#xff1a;灵活适配场景 贴心服务&#xff1a;快速响应机制 在数据为王的时代浪潮中&#xff0c;企业数据治理已成为组织优化运营、提高竞争力的关键。随着数字化进程的加速&#xff0c;企业所积累的数据量呈爆炸式增长…

Unity全局雾效

1、全局雾效是什么 全局雾效&#xff08;Global Fog&#xff09;是一种视觉效果&#xff0c;用于在3D场景中模拟大气中的雾气对远处物体的遮挡 它通过在场景中加入雾的效果&#xff0c;使得距离摄像机较远的物体看起来逐渐被雾气覆盖&#xff0c;从而创造出一种朦胧、模糊的视…

解决Apache/2.4.39 (Win64) PHP/7.2.18 Server at localhost Port 80问题

配置一下apache里面的配置文件&#xff1a;httpd.conf 和 httpd.vhosts.conf httpd.conf httpd-vhosts.conf 重启服务 展示&#xff1a; 浏览器中中文乱码问题&#xff1a;

【Spring事务】深入浅出Spring事务从原理到源码

什么是事务 保证业务操作完整性的一种数据库机制 &#xff08;driver 驱动&#xff09;事务特定 ACID A 原子性 &#xff08;多次操作 要不一起成功 要不一起失败 &#xff08;部分失败 savepoint&#xff09;&#xff09; C 一致性 &#xff08;事务开始时数据状态&#xff0c…

MFC/C++学习系列之简单记录13

MFC/C学习系列之简单记录13 前言memsetList Control代码注意 总结 前言 今天记录一下memset和List control 的使用吧&#xff01; memset memset通常在初始化变量或清空内存区域的时候使用&#xff0c;可以对变量设定特定的值。 使用&#xff1a; 头文件&#xff1a; C&#…

C# cad启动自动加载启动插件、类库编译 多个dll合并为一个

可以通过引用costura.fody的包&#xff0c;编译后直接变为一个dll 自动加载写入注册表、激活码功能: 【CAD二次开发教程-实例18-启动加载与自动运行-哔哩哔哩】 https://b23.tv/lKnki3f https://gitee.com/zhuhao1912/cad-atuo-register-and-active