共计 1044 个字符，预计需要花费 3 分钟才能阅读完成。
业务场景：通过 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);
},
正文完
