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 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐