leaflet加载本地shapefile的zip包

业务场景:通过el-upload上传shapefile的zip文件,然后在地图上加载
采用了shp.js包

将文件拖到此处,或点击上传
需.zip文件形式,至少包括.dbf、.shp、.prj三类文件

原作者:地址: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);
},

你可能感兴趣的