关于leaflet:leaflet加载本地shapefile的zip包

业务场景：通过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);
},