应用工程中获取Shapefile文件的图形信息并显示

news/2024/5/25 10:20:44/文章来源:https://blog.csdn.net/a13407142317/article/details/136642869

本文用纯前端获取shp文件以及前后端交互的方式获取Shapefile文件中的图形信息

1.案例说明

在日常的WebGIS开发中,我们往往会面对,需要用户选择矢量数据,通过矢量数据中的空间范围信息,显示在界面上,并给用户的下一步操作提供一定意义上的数据基础。

在上述的描述上我们会接收到如下数据

  • WKT、GeoJSON字符串
  • Shape file文件
  • GDB文件

本文我们来看看Shapefile文件,关于Shapefile可以参考此文什么是shapefile文件_shapefile和kml最多能存多少个点-CSDN博客

2.技术实现

本文只对Shapefile文件进行技术实现,Shapefile文件相较比较简单,因为有开源标准所以第三方包比较多。

本文提供两种解决方案

  • 前端选择Shapefile相关文件,将文件上传到后端,后端使用相关技术解析,使用WKT或者GeoJson返回
  • 纯前端解析Shape file文件

本文的两种方案均可以只解析[.shp]文件,而不需要文件组。

2.1. 前后端衔接

此处就不说明前端如何传输文件了。后端使用Java技术栈(后续有时间研究一下C#中是否存在相同的技术方案。)

Java使用Geotools可以直接解析Shapefile文件,并且可以只解析Shp文件,而不需要同级目录下有其他相关的文件。

import org.geotools.data.FileDataStore;  
import org.geotools.data.FileDataStoreFinder;  
import org.geotools.data.shapefile.shp.ShapefileReader;  
import org.geotools.data.simple.SimpleFeatureSource;  
import org.geotools.data.simple.SimpleFeatureIterator;  
import org.opengis.feature.simple.SimpleFeature;  import java.io.File;  
import java.io.IOException;  public class ReadShapefileMain {  public void readShp(String path) {  File file = new File(path);  FileDataStore store = null;  SimpleFeatureIterator iterator = null;  try {  store = FileDataStoreFinder.getDataStore(file);  SimpleFeatureSource featureSource = store.getFeatureSource();  iterator = featureSource.getFeatures().features();  while (iterator.hasNext()) {  SimpleFeature feature = iterator.next();  // 这里你可以访问 feature 的几何数据  System.out.println(feature.getDefaultGeometry());  }  } catch (IOException e) {  e.printStackTrace();  } finally {  if (iterator != null) {  iterator.close();  }  if (store != null) {  store.dispose();  }  }  }  public static void main(String[] args) {  ReadShapefileMain reader = new ReadShapefileMain();  reader.readShp("C:\\Users\\HTHT\\Desktop\\1\\12\\320312.shp");  }  
}

在这里插入图片描述
在这里插入图片描述

如果需要合并所有图形并修改图形的表达方式可以使用Geotools中的JTS进行相关的操作。

2.2.纯前端实现

如果需要在 JavaScript 中直接读取 .shp 文件(而不涉及 .dbf 文件),一个可能的解决方案是使用 shapefile 库,这是一个可以在 Node.js 和浏览器中使用的纯 JavaScript 库。它可以读取 .shp 文件并将其解析为 GeoJSON 格式。

npm install shapefile

要在 JavaScript 中将所有几何图形(如从 .shp 文件读取的)执行 Union 操作,我们可以使用 turf.js 库。turf.js 是一个强大的地理空间处理库,它提供了各种用于处理和分析空间数据的方法,包括 Union 操作。

npm install @turf/turf

在JavaScript中实现GeoJSON和WKT(Well-Known Text)格式之间的相互转换,你可以使用一些现有的库,如Terraformerwellknown

npm install terraformer terraformer-wkt-parser

前端代码

<template><!-- 文件输入 --><input type="file" @change="handleFileChange" />
</template><script>
import * as shapefile from 'shapefile';
import * as turf from 'turf';
import * as WKT from 'terraformer-wkt-parser';export default {methods: {handleFileChange(event) {const file = event.target.files[0];this.readShpFile(file);},readShpFile(file) {const reader = new FileReader();reader.onload = (e) => {const arrayBuffer = e.target.result;shapefile.read(arrayBuffer).then(geojson => {this.unionGeometries(geojson);})};reader.readAsArrayBuffer(file);},unionGeometries(geojson) {let combinedGeometry = null;geojson.features.forEach((feature, index) => {if (index === 0) {combinedGeometry = feature.geometry;} else {combinedGeometry = turf.union(turf.feature(combinedGeometry), feature).geometry;}});console.log('GeoJson---Geometry:', combinedGeometry);const wkt1 = WKT.convert(JSON.parse(JSON.stringify(combinedGeometry)));console.log(wkt1);console.log(JSON.stringify(WKT.parse(wkt1), null, 2));}}
};
</script>

2.3. 附:terraformer-wkt-parser 格式转换

<template><div><h2>GeoJSON and WKT Converter</h2><textarea v-model="input" placeholder="Enter GeoJSON or WKT..."></textarea><button @click="convert">Convert</button><div v-if="output"><h3>Result</h3><pre>{{ output }}</pre></div></div>
</template><script>
import * as WKT from 'terraformer-wkt-parser';export default {name: 'GeoConverter',data() {return {input: '',output: ''};},methods: {convert() {try {if (this.input.trim().startsWith('{')) {// Assume it's GeoJSONconst geoJson = JSON.parse(this.input);this.output = WKT.convert(geoJson);} else {// Assume it's WKTthis.output = JSON.stringify(WKT.parse(this.input), null, 2);}} catch (error) {this.output = 'Error: ' + error.message;}}}
};
</script><style scoped>textarea {width: 100%;height: 100px;margin-bottom: 10px;}pre {background-color: #f0f0f0;padding: 10px;}
</style>

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

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

相关文章

MySQL8.0 通过data文件恢复数据库

情景&#xff1a; mysql突然访问不了&#xff0c;也启动不了&#xff0c;需要保存之前的数据库文件&#xff0c;在卸载重装恢复数据 步骤&#xff1a; 1、Mysql里的数据一般会自动保存到C:\ProgramData\MySQL\MySQL Server 8.0\Data目录下&#xff0c;卸载前要将其备份。这是…

大模型字典中加入特殊字符

大模型字典中加入特殊字符 在微调大模型的时候会遇到添加特殊字符&#xff0c;例如在微调多轮的数据的时候需要加入人和机器等特殊标识字符&#xff0c;如用这个特殊字符表示人&#xff0c;用这个特殊字符表示机器&#xff0c;从而实现了人机对话。一般在大模型中base字典中不…

大数据组件之Flink:实时流处理的王者

导言 在大数据的世界里&#xff0c;实时流处理已成为许多业务场景中的核心需求。而Apache Flink&#xff0c;作为一款开源的流处理框架&#xff0c;凭借其高效、可靠和灵活的特性&#xff0c;已经在实时计算领域一枝独秀了。 简介 Apache Flink是一个用于无界和有界数据流的开…

Python之Web开发中级教程----搭建Git环境三

Python之Web开发中级教程----搭建Git环境三 多人分布式使用仓库操作实例 场景&#xff1a;开发者A&#xff0c;开发者B在同一个项目协同开发&#xff0c;修改同一个代码文件。开发者A在Win10下&#xff0c;开发者B在Ubuntu下。 1、开发者A修改提交代码 从GitHub: Let’s bu…

Linux系统目录结构详细介绍

目录 一、根目录&#xff08;/&#xff09; 二、/bin 三、/boot 四、/dev 1.设备文件类型&#xff1a; 2.常见设备文件&#xff1a; 五、/etc 六、/home 七、/root 八、/run 九、/sbin 十、 /tmp 十一、/usr 十二、/var Linux系统目录结构是一种层次化的文件系…

Git版本工具学习

目录 版本控制git配置工作区域文件状态git对象模型基础命令.gitignore忽略文件IDEA集成Git 版本控制 本地版本控制&#xff1a;在本地记录每一次版本更新。 集中版本控制&#xff1a;版本数据都保存在单一服务器&#xff0c;不联网就看不到版本信息。SVN 分布式版本控制&…

计算机设计大赛 目标检测-行人车辆检测流量计数

文章目录 前言1\. 目标检测概况1.1 什么是目标检测&#xff1f;1.2 发展阶段 2\. 行人检测2.1 行人检测简介2.2 行人检测技术难点2.3 行人检测实现效果2.4 关键代码-训练过程 最后 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 行人车辆目标检测计数系统 …

【QT】文件操作(QFile)和 文件的属性(QFileInfo)

QT中对文件的操作—很重要 比如对文件的查找和替换 读文件 Truncate:截断。 QFile file(fileName); 默认打开的是utf8文件。 bool isOk file.open(QFile::ReadOnly); 打开其他类型的乱码怎么办&#xff1f; 使用下面的方式&#xff0c;强制从utf8转gbk #include <Q…

力扣中档题:旋转链表

思路&#xff1a;将链表数据放到数组中&#xff0c;将数组旋转&#xff0c;然后再赋值给链表 struct ListNode* rotateRight(struct ListNode* head, int k) {if(headNULL){return NULL;}int count0;struct ListNode*goodhead;while(good){count;goodgood->next;}int round…

Fair Data Exchange:区块链实现的原子式公平数据交换

1. 引言 2024年斯坦福大学和a16z crypto research团队 论文 Atomic and Fair Data Exchange via Blockchain 中&#xff0c;概述了一种构建&#xff08;包含过期EIP-4844 blobs的&#xff09;fair data-markets的协议。该论文源自a16z crypto的暑期实习计划&#xff0c;与四名…

从0到1:如何用AI完成高质量的科研论文写作?

人工智能革命&#xff1a;如何让聊天机器人更懂你 人工智能正在以其强大的数据处理和语言生成能力改变世界。在学术界&#xff0c;大语言模型&#xff08;LLM&#xff09;为科学交流带来了一种新的工具。我们旨在有效地将AI工具与学术写作相结合&#xff0c;以更有效和更有影响…

【力扣hot100】刷题笔记Day25

前言 这几天搞工作处理数据真是类似我也&#xff0c;还被老板打电话push压力有点大的&#xff0c;还好搞的差不多了&#xff0c;明天再汇报&#xff0c;赶紧偷闲再刷几道题&#xff08;可恶&#xff0c;被打破连更记录了&#xff09;这几天刷的是动态规划&#xff0c;由于很成…

Util工具类功能设计与类设计(http模块一)

目录 类功能 类定义 类实现 编译测试 Split分割字符串测试 ReadFile读取测试 WriteFile写入测试 UrlEncode编码测试 UrlDecode编码测试 StatuDesc状态码信息获取测试 ExtMime后缀名获取文件mime测试 IsDirectory&IsRegular测试 VaildPath请求路径有效性判断测…

matplotlib系统学习记录

日期&#xff1a;2024.03.12 内容&#xff1a;将matplotlib的常用方法做一个记录&#xff0c;方便后续查找。 基本使用 # demo01 from matplotlib import pyplot as plt # 设置图片大小,也就是画布大小 fig plt.figure(figsize(20,8),dpi80)#图片大小&#xff0c;清晰度# 准…

信息安全与阿里云等保三级方案实践总结

信息安全在当今数字化时代变得至关重要&#xff0c;企业和组织需要采取有效措施来保护其数据和信息资产。阿里云作为中国领先的云服务提供商&#xff0c;提供了等保三级方案&#xff0c;帮助用户满足国家信息安全等级保护的要求。本文将探讨信息安全和阿里云等保三级方案的重要…

PyTorch搭建LeNet训练集详细实现

一、下载训练集 导包 import torch import torchvision import torch.nn as nn from model import LeNet import torch.optim as optim import torchvision.transforms as transforms import matplotlib.pyplot as plt import numpy as npToTensor()函数&#xff1a; 把图像…

大载重无人机基础技术,研发一款50KG负重六旋翼无人机技术及成本分析

六旋翼无人机是一种多旋翼无人机&#xff0c;具有六个旋翼&#xff0c;通常呈“X”形布局。它采用电动串列式结构&#xff0c;具有垂直起降、悬停、前飞、后飞、侧飞、俯仰、翻滚等多种飞行动作的能力。六旋翼无人机通常被用于航拍、农业植保、环境监测、地形测绘等领域。 六旋…

【JavaScript】数据类型转换 ① ( 隐式转换 和 显式转换 | 常用的 数据类型转换 | 转为 字符串类型 方法 )

文章目录 一、 JavaScript 数据类型转换1、数据类型转换2、隐式转换 和 显式转换3、常用的 数据类型转换4、转为 字符串类型 方法 一、 JavaScript 数据类型转换 1、数据类型转换 在 网页端 使用 HTML 表单 和 浏览器输入框 prompt 函数 , 接收的数据 是 字符串类型 变量 , 该…

Linux本地搭建FastDFS系统

文章目录 前言1. 本地搭建FastDFS文件系统1.1 环境安装1.2 安装libfastcommon1.3 安装FastDFS1.4 配置Tracker1.5 配置Storage1.6 测试上传下载1.7 与Nginx整合1.8 安装Nginx1.9 配置Nginx 2. 局域网测试访问FastDFS3. 安装cpolar内网穿透4. 配置公网访问地址5. 固定公网地址5.…

uniapp封装统一请求(get和post)

uniapp封装请求 request.js文件 import Vue from vue // 全局配置 import settings from ./settings.js function computedBaseUrl(url) {// console.log(url);return (url.indexOf(http) -1 ? settings.baseUrl : ) url }// 发送请求 export default (options) > {const…