iClient3D for Cesium 加载shp数据并拉伸为白模

作者:gaogy

1、背景

在现代三维地图应用中,数据的加载和可视化尤为重要,尤其是对于大规模的地理空间数据。iClient3D for Cesium 是由SuperMap提供的一款强大的三维客户端,支持将多种地理数据格式加载到三维环境中。

SHP 文件(Shapefile)是一种广泛使用的空间数据格式,通常用来存储地图数据的矢量图形。shp数据常常出现于桌面端直接交换数据,而在前端则很少使用,本文将介绍如何利用Shapefile.js 三方库在 iClient3D for Cesium 中加载 SHP 数据,并将其转化为三维“白模”样式。

2、效果演示

iClient3D for Cesium 拉伸模型

3、Shapefile.js 三方库介绍

Shapefile.js 是一个用于解析 shp(shapefile) 数据将其转换为 Geojson 的 JavaScript 库。并且,Shapefile.js 在内存管理和算法优化方面进行了大量工作,使其能够处理大型 Shape 文件而不会影响性能。

Shapefile.js GitHub 地址:https://github.com/mbostock/shapefile

Shapefile.js NPM 地址:https://www.npmjs.com/package/shapefile

Shapefile.js 在线 CDN 地址:https://unpkg.com/shapefile@0.6.6/dist/shapefile.js

4、实现过程

4.1、使用 Shapefile.js 解析 shp 文件

查看 Shapefile.js 文档,发现使用其 read 方法即可解析 shp 文件。read 方法接收三个参数,第一个参数shp为shapefile数据的shp后缀的文件,第二个参数dbf为shapefile数据的dbf后缀的文件;第三个是 options ,用于传递编码之类的参数。其中只有第一个参数是必传的。

Shapefile.js 的 read 方法源码如下:

export function read(shp, dbf, options) {return open(shp, dbf, options).then(function(source) {var features = [], collection = {type: "FeatureCollection", features: features, bbox: source.bbox};return source.read().then(function read(result) {if (result.done) return collection;features.push(result.value);return source.read().then(read);});});
}

本文使用 Shapefile.js 封装的转换方法如下:

async function shp2geojson(shpFile, dbfFile) {const geojson = { type: 'FeatureCollection', features: [] }const source = await shapefile.open(shpFile, dbfFile)while (true) {let result = await source.read()if (result.done) breakgeojson.features.push(result.value)}return geojson
}

4.2、处理文件读取后的方法

function handleFileChange(event) {const dbfFiles = []const shpFiles = []const files = event.target.filesif (files.length > 0) {function readFile(file) {return new Promise((resolve, reject) => {const reader = new FileReader()reader.onload = (e) => resolve(e.target.result)reader.onerror = (err) => reject(err)reader.readAsArrayBuffer(file)})}const filePromises = Array.from(files).map((file) => {return readFile(file).then((data) => {if (file.name.endsWith('.shp')) shpFiles.push(data)if (file.name.endsWith('.dbf')) dbfFiles.push(data)})})Promise.all(filePromises).then(async () => {try {const geojson = await shp2geojson(shpFiles[0], dbfFiles[0])dataSource = await Cesium.GeoJsonDataSource.load(geojson, {clampToGround: true,fill: Cesium.Color.PINK.withAlpha(0.6)})viewer.dataSources.add(dataSource)viewer.zoomTo(dataSource)} catch (error) {throw new Error(error)}})}
}

这里读取了两个文件,一个是 shp 后缀的文件,另一个是 dbf 后缀的文件,分别存储的是空间数据与属性数据;因为后续演示了拉伸为三维白模,故这里需要读取 dbf 文件

注意:dbf 跟 shp 是对应的,本文这里未做判断与检查,一次选择了多个 shp 与 dbf 的话,则需要检查判断

4.3、拉伸白模

上一步已经将shp数据转换为了geojson格式的数据,并已经加载到场景中了,我们只需要利用shp自身的高度属性字段,设置 entity 的拉伸高度,即可将其拉伸为三维白模

function makeModel() {const entities = dataSource.entities.valuesentities.forEach((entity) => {entity.polygon.material = new Cesium.Color(1, 0.6, 0, 1)entity.polygon.outline = falseentity.polygon.height = 0entity.polygon.extrudedHeight = entity.properties.height.getValue()})
}

5、总结

本文介绍了如何使用 Shapefile.js 这个 JavaScript 库在iClient3D for Cesium中加载 shapefile 数据,并且可以根据 shp 数据属性信息,将其拉伸为三维白模,在前端可视化。

本文详细 vue 代码可在https://download.csdn.net/download/supermapsupport/90184990下载参考

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

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

相关文章

AIA - IMSIC之二(附IMSIC处理流程图)

本文属于《 RISC-V指令集基础系列教程》之一,欢迎查看其它文章。 1 ​​​​​​​通过IMSIC接收外部中断的CSR 软件通过《AIA - 新增的CSR》描述的CSR来访问IMSIC。 machine level 的 CSR 与 IMSIC 的 machine level interrupt file 可相互互动;而 supervisor level 的 CSR…

光谱相机的工作原理

光谱相机的工作原理主要基于不同物质对不同波长光的吸收、反射和透射特性存在差异,以下是其具体工作过程: 一、光的收集 目标物体在光源照射下,其表面会对光产生吸收、反射和透射等相互作用。光谱相机的光学系统(如透镜、反射镜…

Kafka可视化工具 Offset Explorer (以前叫Kafka Tool)

数据的存储是基于 主题(Topic) 和 分区(Partition) 的 Kafka是一个高可靠性的分布式消息系统,广泛应用于大规模数据处理和实时, 为了更方便地管理和监控Kafka集群,开发人员和运维人员经常需要使用可视化工具…

TLDR:终端命令的简洁百科全书

TLDR,全称 “Too Long, Don’t Read”,是一款特别实用的终端命令百科全书工具。通过 TLDR,您可以快速查找到常用命令的使用方法,避免繁琐冗长的官方文档,让日常工作更加高效。 为什么选择 TLDR? 简单易用&…

2024-12-25-sklearn学习(20)无监督学习-双聚类 料峭春风吹酒醒,微冷,山头斜照却相迎。

文章目录 sklearn学习(20) 无监督学习-双聚类1 Spectral Co-Clustering1.1 数学公式 2 Spectral Biclustering2.1 数学表示 3 Biclustering 评价 sklearn学习(20) 无监督学习-双聚类 文章参考网站: https://sklearn.apachecn.org/ 和 https://scikit-learn.org/sta…

数据结构(Java版)第六期:LinkedList与链表(一)

目录 一、链表 1.1. 链表的概念及结构 1.2. 链表的实现 专栏:数据结构(Java版) 个人主页:手握风云 一、链表 1.1. 链表的概念及结构 链表是⼀种物理存储结构上⾮连续存储结构,数据元素的逻辑顺序是通过链表中的引⽤链接次序实现的。与火车…

《Java核心技术I》Swing的网格包布局

复杂的布局管理 网格包布局 行列大小可改变,先建立表格,合并相邻单元格,组件指定在格内的对齐方式。 字体选择器组件: 另个指定字体和字体大小的组合框两个组合框标签两个选择粗体和斜体的复选框一个显示示例字符串的文本区 将容…

Python——day09

os模块 sys模块 time模块 logging模块

IIC驱动EEPROM

代码参考正点原子 i2c_dri:主要是三段式状态机的编写 module iic_dri#(parameter SLAVE_ADDR 7b1010000 , //EEPROM从机地址parameter CLK_FREQ 26d50_000_000, //模块输入的时钟频率parameter I2C_FREQ 18d250_000 //IIC_SCL的时钟频率)( …

《计算机组成及汇编语言原理》阅读笔记:p86-p115

《计算机组成及汇编语言原理》学习第 6 天,p86-p115 总结,总计 20 页。 一、技术总结 1.if statement 2.loop 在许多编程语言中,有类种循环:一种是在程序开头检测条件(test the condition),另一种是在程序末尾检测条件。 3.C…

(带源码)宠物主题商场系统 计算机项目 P10083

项目说明 本号所发布的项目均由我部署运行验证,可保证项目系统正常运行,以及提供完整源码。 如需要远程部署/定制/讲解系统,可以联系我。定制项目未经同意不会上传! 项目源码获取方式放在文章末尾处 注:项目仅供学…

目标检测——基于yolov8和pyqt的螺栓松动检测系统

目录 1.项目克隆和环境配置1.1 我这里使用的是v8.0.6版本1.2 项目代码结构介绍 2.数据集介绍2.1 数据集采集2.2采集结果介绍 3.模型训练4.pyqt界面设计4.1 界面内容介绍4.2 界面实现 5.操作中的逻辑实现5.1 图片检测5.2 文件夹检测5.3 视频检测和摄像头检测 6. 效果展示 1.项目…

宠物行业的出路:在爱与陪伴中寻找增长新机遇

在当下的消费市场中,如果说有什么领域能够逆势而上,宠物行业无疑是一个亮点。当人们越来越注重生活品质和精神寄托时,宠物成为了许多人的重要伴侣。它们不仅仅是家庭的一员,更是情感的寄托和生活的调剂。然而,随着行业…

原点安全再次入选信通院 2024 大数据“星河”案例

近日,中国信息通信研究院和中国通信标准化协会大数据技术标准推进委员会(CCSA TC601)共同组织开展的 2024 大数据“星河(Galaxy)”案例征集活动结果正式公布。由工银瑞信基金管理有限公司、北京原点数安科技有限公司联…

【0x001D】HCI_Read_Remote_Version_Information命令详解

目录 一、命令概述 二、命令格式及参数说明 2.12. HCI_Read_Remote_Version_Information 命令格式 2.2. Connection_Handle 三、生成事件 3.1. HCI_Command_Status 事件 3.2. HCI_Read_Remote_Version_Information_Complete 事件 四、命令执行流程 4.1. 命令发起阶段(…

C语言-结构体内存大小

#include <stdio.h> #include <string.h> struct S1 { char a;//1 int b;//4 char c;//1 }; //分析 默认对齐数 成员对齐数 对齐数(前两个最小值) 最大对齐数 // 8 1 …

直流电源如何输出恒压源和恒流源

输出电流达到预定值时&#xff0c;变成稳流特性。 输出电压达到预定值时&#xff0c;变成稳压特性。 电流变大&#xff0c;成稳压。 电压变大&#xff0c;成稳流。

【软考高级】系统架构设计师复习笔记-精华版

文章目录 前言0 系统架构设计师0.1 考架构还是考系分0.2 架构核心知识0.3 架构教材变化 1 计算机操作系统1.1 cpu 组成1.2 内核的五大功能1.3 流水线技术1.4 段页式存储1.5 I/O 软件1.6 文件管理1.7 系统工程相关 2 嵌入式2.1 嵌入式技术2.2 板级支持包&#xff08;BSP&#xf…

如何识别钓鱼邮件和诈骗网站?(附网络安全意识培训PPT资料)

识别钓鱼邮件和诈骗网站是网络安全中的一个重要环节。以下是一些识别钓鱼邮件和诈骗网站的方法&#xff1a; 识别钓鱼邮件&#xff1a; 检查发件人地址&#xff1a; 仔细查看发件人的电子邮件地址&#xff0c;看是否与官方域名一致。 检查邮件内容&#xff1a; 留意邮件中是否…

查询 MySQL 默认的存储引擎(SELECT @@default_storage_engine;)

要查询 MySQL 默认的存储引擎&#xff0c;可以使用以下 SQL 查询语句&#xff1a; SELECT default_storage_engine;解释&#xff1a; SELECT: 表示你要执行一个查询。default_storage_engine: 这是一个 MySQL 系统变量&#xff0c;它存储着当前 MySQL 服务器的默认存储引擎。…