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