本文主要讲述一种体量较小的shp文件纯前端的上传、解析、编辑、下载的技术流程，适用于要素量少的shp文件修改操作。

准备工作

下载一下几个包，详细用法请见结尾参考。

npm install file-save
下载文件npm install shpjs
解析shapefile的压缩包npm install shp-write
生成shapefile的压缩包

流程

上传

使用elementui上传。

 <el-uploadclass="upload-demo uploadShape"action="#":on-preview="handlePreview":on-remove="handleRemove":before-remove="beforeRemove":http-request="handleUpload":on-change="handleOnChange"multiple:limit="1":file-list="FileList":on-exceed="handleExceed"><el-button slot="trigger" size="small" type="primary">点击上传</el-button><el-button style="margin-left: 10px;" size="small" type="success" @click="parsingZip">解析</el-button><el-button size="small" type="success" @click="startEdit">开始编辑</el-button><el-button size="small" type="success" @click="endEdit">结束编辑</el-button><el-button size="small" type="success" @click="download">下载</el-button><div slot="tip" class="el-upload__tip">请上传zip文件</div></el-upload>

解析

获取文件类并且解析出GeoJSON数据，使用的是shpjs.parseZip，解压的是zip文件，res就为GeoJSON数据。

 parsingZip(){let self = this;let file = this.FileList[0].rawif(!file){return}let reader = new FileReader();reader.readAsArrayBuffer(file)reader.onload = function(e) {let res = e.target.result;//ArrayBuffershpjs.parseZip(res).then(function (res){self.addGeometry(res)self.geojson = res}).catch(function (e){console.log(e)})}},

展示

这里前端展示界面和修改使用maptalks的接口，创建地图的代码可参考maptalk官网例子，详细用法请见结尾参考，亦可用其他的前端渲染引擎。

addGeometry(geojson){let map = window.app.MTmapif(geojson.type == "FeatureCollection") {for(let i = 0 ; i < geojson.features.length ; i++){let geometry = maptalks.GeoJSON.toGeometry(geojson.features[i]).addTo(map.getLayer('v'));this.ShapeCollection.push(geometry)}}else{let geometry = maptalks.GeoJSON.toGeometry(geojson).addTo(map.getLayer('v'));this.ShapeCollection.push(geometry)}}

编辑

 startEdit(){for(let i = 0 ; i < this.ShapeCollection.length ; i++){this.ShapeCollection[i].startEdit();}}endEdit(){for(let i = 0 ; i < this.ShapeCollection.length ; i++){this.ShapeCollection[i].endEdit();}}

下载

shp-write问题

因为初用shp-write的时候出现报错了，报错截图如下。

我也不懂这个是啥，看上去好像版本新了，方法没了，本人也没有试过降低版本，但参考了一些github提问的中解决的方法，找到了一个办法，具体解决方法截图如下。十分感谢这位哥。

代码

folder为存放的文件夹，point、polygon、line为点线面shapefile的名字，涉及一个base64转blob的方法Base64ToBlob，可参考网上代码。用file-save类去下载这个zip文件。

    download(){let self = this;let geojson = this.getGeoJSONFromLayer(window.app.MTmap.getLayer('v'))if(geojson){var options = {folder: 'myshapes',types: {point: 'mypoints',polygon: 'mypolygons',line: 'mylines'}}shpwrite.zip(geojson,options).then(function(content) {let blob = self.Base64ToBlob('data:application/zip;base64,' + content)saveAs(blob, 'export.zip');});}},

 getGeoJSONFromLayer(layer){let geolist = layer._geoListlet features = []for(let i = 0 ; i < geolist.length ; i++){features.push(geolist[i].toGeoJSON())}return({type:"FeatureCollection",features:features})},

结果

结尾

此方法目前在大体量数据解析过程中可能会出错或者时间过长，因此如果数据量大的话还是推荐上传到服务器进行解析。
本文代码是vue中写的，并且截取片段，望不会造成太大的阅读困扰。
参考：
链接: maptalks
链接: shp-write
链接: shpjs
链接: file-save
若需转载请注明本文链接，感谢观看。

shp文件纯前端的上传、解析、编辑、下载相关推荐

纯前端实现上传下载（后端存取json）xlsx
后端存取json,通过 xlsx 依赖转换上传:前端通过上传模板文件将上传组件(upload)返回的文本流解析成json数据,传给后端下载:获取后端json转换成文件格式下载依赖 npm ins ...
shp文件显示 c语言,上传并在地图中显示Shp文件
前段时间参与了一个项目,客户有一个功能需求是上传SHP文件并在地图上显示,然后在此基础上做缓冲区处理.经过对比测试,最终选择了shapefile.js工具,在此做个记录. shapfe.js能够将Es ...
关于纯前端excel上传、下载功能
工作项目中,表格的上传下载基本都是调取后端接口,把处理逻辑放在后端进行处理.那么纯前端js代码实现excel的上传下载是否可行?其实代码逻辑很简单,不过需要引用xlsx.js进行处理.下面是我自己写的 ...
vue前端实现上传文件,vue 上传文件
以ASP.NET Core WebAPI 作后端 API ,用 Vue 构建前端页面,用 Axios 从前端访问后端 API ,包括文件的上传和下载. 准备文件上传的API #region 文件上传 ...
simple-uploader前端分片上传文件
前言对于大型文件的上传处理,我们不可能只是单纯的把整个文件,通过一个请求去上传,这样效率很低,且上传速度很慢.所以这种时候就需要前端去对上传的文件做分割处理,将文件分成一小片一小片的,然后再同时发起 ...
ajax传图片以及后台接收,前端ajax上传文件，图片，后端nodejs接收文件；
前端ajax上传文件,图片,后端nodejs接收文件: 学习了nodejs,就想实现一下有进度条的文件上传,html 在作这个功能的时候遇到的问题前端用普通的ajax没法实现文件上传,只能post, ...
记一次对DZ的渗透.(一句话木马与图片,文件上传解析漏洞)
一.举例:St0rs Team 指剑碎星河分享前言0X01 某日某帅正在使用着啊D 入侵百度的时候, 突然某位好友发来一条消息. "滴滴上车" 打开消息一看,说是要某帅帮忙日一个 ...
【vue】前端基于 vue-simple-uploader 实现大文件断点续传和分片上传
文章目录一.前言二.后端部分新建Maven 项目后端 pom.xml 配置文件 application.yml HttpStatus.java AjaxResult.java CommonCo ...
.htaccess文件上传解析漏洞
测试环境 upload-labs靶场(Pass-04) .htaccess原理 .htaccess文件是Apache服务器下的一个配置文件.其主要负责相关目录下的网页配置,即:在一个特定的文档目录中放 ...

shp文件纯前端的上传、解析、编辑、下载

准备工作

流程

上传

解析

展示

编辑

下载

shp-write问题

代码

结果

结尾

shp文件纯前端的上传、解析、编辑、下载相关推荐

最新文章

热门文章