vue 上传shp和zip格式转geo

前提：
1、准备工具：shapefile，jszip
2、我用的el自带的上传组件，当然其实主要还是js，所以就算你用的其他也可以
3、因为我项目中有把 that 指向 this ，所以文中that请自行改为this或者你定义的其他，以免出现指向问题

总结思路：
1、判断：获取上传的文件判断是zip还是shp
2、上传Zip时: 通过JsZip读取文件，寻找内部shp文件，转化为arraybuffer，再进行转geo
3、上传shp时：利用FileReader转为arraybuffer
4、转geo：利用shapefile插件（但是有多个面时他就会输出很多个。对不起，这里我文档一直没看懂，如果有大哥会更简便的方法可以告诉我）

好了，上代码

一、组件代码（对你来说作用不大，可看可不看）

 <el-upload class="upload-demo" ref="upload" drag :http-request="uploadSectionFile" action="#" :limit="1" :show-file-list="false" accept=".zip,.shp"><i class="el-icon-upload"></i><div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div></el-upload>

二、引入插件

import { open } from 'shapefile'
import JsZip from 'jszip'

三、方法

   // 上传判断uploadSectionFile (params) {const file = params.fileconst fileName = file.nameconst isZip = fileName.indexOf('zip') !== -1const isShp = fileName.indexOf('shp') !== -1that.upName = fileName //我项目中需要传文件名字，所以这里保存下来if (!(isZip || isShp)) {that.$message.error('只能上传zip、shp格式!')that.abortLoad() //因为手动上传，所以这里是取消上传return false} else {isZip ? that.openZip(file) : that.toGeo(file)}},// 为zip时，读取压缩包，选取shp文件openZip (data) {var newZip = new JsZip()newZip.loadAsync(data).then(function (file) {// 压缩包里的内容file.filesconst fileList = Object.keys(file.files)const pattern = new RegExp(/\S\.shp$/)that.shpFile = fileList.find(i => pattern.test(i))newZip.file(that.shpFile).async('arraybuffer') // 此处是压缩包中的shp文件,arraybuffer(此时在回调的参数中已经可以获取到上传的zip压缩包下的所有文件).then(function (content) { // 这个就是文件中的内容that.shapefileOpen(content)})}).catch(err => {// 是否是合法的zip包，解决rar包改后缀zipconsole.log(err)that.$message.error('请上传正确格式的文件')})},// 转ArrayBuffertoGeo (data) {const reader = new FileReader()reader.readAsArrayBuffer(data)reader.onload = function (e) {that.shapefileOpen(this.result)}},// shapefile插件 shp转geoshapefileOpen (content) {open(content).then(source => source.read().then(function log (result) {if (result.done) {if (that.upList.length > 1) {//这部分纯粹为了把很多平面拼在一起，你也可以根据自己的需求拼接const cList = that.upList.map(ele => {return ele.geometry.coordinates})const geojson = {type: 'Feature',properties: {},geometry: {type: 'MultiPolygon',coordinates: cList}}//上传接口} else {//上传接口}return}that.upList.push(result.value) //多个面时，会打印每一个，这样就先把他们放在一个集合里return source.read().then(log)})).catch(error => console.error(error.stack))},

最后总结：网上有很多shp转geo的帖子，感觉都比较简单，但是既有shp又有zip就比较少了，找了很多文章，然后根据我这边的要求，才得到最后这个结果
好像也能用shpjs，读取zip内容还要全一些，但是只能用于一个面的（反正最后我没用这个）

vue 上传shp和zip格式转geo相关推荐

宝塔linux上传文件视频,使用宝塔linux面板上传文件解压缩zip和tar.gz
塔面板是国内一款免费linux和windows面板,如下面小斌就来解答一下.何使用宝塔linux面板上传文件,宝塔linux如何解压上传的文件. 首先我们登陆宝塔linux面板的管理后台,还没有安装的 ...
vue 上传文件和下载文件
vue 上传文件和下载文件 1. 上传文件 2. 下载文件 1. 上传文件上传文件我所使用的组件是element ui 的 el-upload,我一共进行了如下两步,第一步:修改样式,因为el-up ...
vue上传（兼容IE9）
项目中vue文件上传功能原来使用的是element ui组件,头像上传裁剪使用的是vue-image-crop-upload,但是这两个组件只支持到IE10+,现在项目要求兼容IE9,这两个组件就没办 ...
ajax传递多个base64,H5移动开发Ajax上传多张Base64格式图片到服务器
这篇文章主要为大家详细介绍了H5移动开发Ajax上传多张Base64格式图片到服务器,具有一定的参考价值,感兴趣的小伙伴们可以参考一下废话不多说,直接看代码吧 1.上传组件 2.展示添加上的图片 v ...
Android之解决PC端上传http表单格式文件手机解析文件名乱码问题和PC浏览器下载文件的文件名显示乱码问题
1 问题问题1. 手机写socket作为服务器,PC浏览器上传http表单格式文件,然后手机端解析携带中文的文件名我解析是乱码. 问题2. 手机写了socket作为服务器,PC浏览器下载文件,但是浏 ...
vue上传大文件/视频前后端（java）代码
vue上传大文件/视频前后端(java)代码一.上传组件二.后端java代码注意: 一.上传组件 <template><div>&l ...
Vue上传文件 iview Upload UI 组件上传组件
Vue上传文件 input支持上传文件定义type类型,隐藏样式第三定义change事件拿到file 的相关信息,accept限制支持的文件类型然后给button增加点击事件 template部 ...
vue上传图多张图片功能
PictureCard组件 <template><div class="upload-picture-card" :key="fileKey" ...
Web后端servlet—使用servlet的Part接口实现单文件多文件上传、以及日期格式转换为sql日期格式的实现
JDBC工具类JdbcFileDateUtil上传文件和日期格式转换,包含单文件多文件上传最新最简单简便的办法本文档介绍了文件上传的处理方法,包括当前端form表单的编码类型为enctype=&qu ...

vue 上传shp和zip格式转geo

一、组件代码（对你来说作用不大，可看可不看）

二、引入插件

三、方法

vue 上传shp和zip格式转geo相关推荐

最新文章

热门文章