Vue项目读取zip中的ShapeFile文件,并解析为GeoJson
json
适用于现代 C++ 的 JSON。
项目地址:https://gitcode.com/gh_mirrors/js/json
免费下载资源
·
Vue项目中读取zip中的ShapeFile文件,并解析为GeoJson
一直以来,在Web前端读取ShapeFile文件,都比较麻烦。ShapeFile是一种常用的GIS文件格式,它至少由三个文件组成。前端读取选择多个文件比较麻烦,做成压缩包前端解析难度大。将文件传输到后端解析,传输耗时比较大,效率低。最近发现了一个npm组件——shapefile,利用它在前端项目中,可以和input组件配合解析ShapeFile文件。
这个shapefile组件的很多Demo是基于node.js项目写的,一度导致我很怀疑在Vue项目中,它是否可以使用。最终,证明它是可以使用。它可以读取很多信息,这里我只展示一下如何读取.shp文件里的图形信息为GeoJson。
效果:
npm安装解析压缩包和shape的依赖:
npm install jszip
npm install shapefile
环境:
- vue: 2.6.14
- shapefile: 0.6.6
- jszip: 3.10.1
- ant-design-vue: 1.7.8
vue:
<a-upload name="shp"
:before-upload="beforeUpload"
:customRequest="customRequest"
:fileList="fileList"
:remove="deleteShp">
<a-button>
<a-icon type="upload" />
点击上传
</a-button>
<div class="mt-5">
<span>格式:1.zip格式压缩后的shp文件,2.以.shp结尾格式文件</span>
</div>
</a-upload>
ts:
<script lang="ts">
import {
Component, Emit, Mixins, Prop, Watch,
} from 'vue-property-decorator';
import * as shapefile from 'shapefile';
import JSZip from 'jszip';
@Component({})
export default class TaskGenerateModal {
shpeState = {
geojson: {},
}
fileList: any = [];
deleteShp() {
this.fileList = [];
this.$message.info('已删除!');
this.shpeState.geojson = {};
}
beforeUpload(file) {
const type = file.name.split('.')[1];
const isJpgOrPng = type === 'zip' || type === 'shp';
if (!isJpgOrPng) {
this.$message.error('请上传正确格式的文件!');
}
const isLt50m = file.size / 1024 < 1024 * 50;
if (!isLt50m) {
this.$message.error('文件不得大于50MB!');
}
return isJpgOrPng && isLt50m;
}
customRequest(data) {
const self = this;
// console.log('data:', data);
const type = data.file.name.split('.')[1];
if (type == 'shp') {
const reader = new FileReader();
reader.readAsArrayBuffer(data.file);
reader.onload = (e) => {
const buffer = e.target.result as ArrayBuffer;
shapefile.read(buffer).then((geojson) => {
// console.log(geojson, '转好的geojson数据');
self.handleGeojson(geojson, data.file);
});
};
} else if (type == 'zip') {
JSZip.loadAsync(data.file).then((zip) => {
const shapefiles = zip.file(/.*\.shp$/i); // 正则匹配.shp文件
if (shapefiles.length) {
const shpFile = shapefiles[0];
return shpFile.async('arraybuffer');
}
this.$message.warning('未解析到正确的shp文件!请重新上传');
return null;
}).then((arrayBuffer) => {
if (arrayBuffer) {
shapefile.read(arrayBuffer).then((geojson) => {
// console.log(geojson, '转好的geojson数据');
self.handleGeojson(geojson, data.file);
});
}
});
} else {
this.$message.error('文件格式未知!');
this.deleteShp();
}
}
/**
* 处理解析好的geojson
*/
handleGeojson(geojson, file) {
console.log(geojson, '处理解析好的geojson');
// const { features, bbox, type } = geojson;
console.log(file, 'file');
this.shpeState.geojson = geojson;
this.$message.success('上传成功!');
this.fileList = [
{
uid: file.uid,
name: file.name,
status: 'done',
},
];
}
}
</script>
部分内容来源参考:https://blog.csdn.net/GISuuser/article/details/127212682
GitHub 加速计划 / js / json
41.72 K
6.61 K
下载
适用于现代 C++ 的 JSON。
最近提交(Master分支:1 个月前 )
960b763e
4 个月前
8c391e04
6 个月前
更多推荐
已为社区贡献7条内容
所有评论(0)