业务场景:通过el-upload上传shapefile的zip文件,而后在地图上加载
采纳了shp.js包
<div class="upload-file"> <el-upload class="upload-demo" drag :http-request="UploadShp" :before-upload="onBeforeUploadImage" action="string" multiple> <i class="el-icon-upload"></i> <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div> <div class="el-upload__tip" slot="tip">需.zip文件模式,至多包含.dbf、.shp、.prj三类文件</div> </el-upload></div>
原作者:地址:https://segmentfault.com/u/yo...
这个shp.js包巨坑,Readme说是间接传zip的url或者间接本地读取到的zip间接传入就能够,然而把他源码拆开看须要传arrayBuffer格局的,而且只能传这种格局。
心愿这个包的作者看到这篇文章的时候去改一下报错提醒,或者改一下备注!!!!!太坑了
onBeforeUploadImage(file){ this.fileToBuf(file)},fileToBuf(file){ let that = this var fr = new FileReader(); fr.readAsArrayBuffer(file); fr.addEventListener("loadend",(e) => { var buf = e.target.result; shp(buf).then(function(data){ data.features.forEach(element => { var latlngs = element.geometry.coordinates let a = [] latlngs[0].forEach(element => { a.push([element[1],element[0]]) }); //supermap idesktop生成的shepefile的经纬度对于leaflet来说是反的,所以这里调整了一下 L.polygon(a, {color: 'red',fillColor:'rgba(255,0,0,0.1)'}).addTo(that.map); }); }); },false);},