cesium加载本地shp数据

用户选择本地磁盘shp数据后，直接在三维球上展示。本文默认已经有了vue和cesium整合后的工程。
官网地址：git://github.com/wavded/js-shapefile-to-geojson.git

1、vue-cli3.x+cesium的项目目录

image.png

2、CesiumViewer.vue代码：

3、shp2geojson.vue代码：

4、shp2geojson.html代码：

    
    


    
    
    


    
    
    确定
    取消

    

5、loadshp.js代码：

function okDomMousedown(){
    var shpFile = document.getElementById('shp').files[0];
    var dbfFile = document.getElementById('dbf').files[0];
    if (shpFile) {
        var opts = { shp: shpFile };
        if (dbfFile) {
            opts['dbf'] = dbfFile;
        }
        var shapefile = new Shapefile(opts, function(data){
            if(window.sessionStorage.getItem('shp2geojson')){
                window.sessionStorage.removeItem('shp2geojson');
            }
            var item = {
                shpFileName:shpFile.name,
                geoJsonData:data.geojson
            };
            console.log(item);
            window.sessionStorage.setItem('shp2geojson',JSON.stringify(item));
        });
    }
};

6、stream.js、shapefile.js、dbf.js都是git中自带的文件，这里不做赘述。

7、效果

image.png

image.png