cesium加载本地shp数据

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

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

image.png

2、CesiumViewer.vue代码：

<template>
    <div id="cesiumContainer">
        <button @click="shp2geojsonShowHandle" id="btnId">加载shp数据</button>
        <shp2geojson v-show="shp2geojsonShow"></shp2geojson>
    </div>
</template>

<script>
    import Cesium from 'cesium/Cesium'
    import widget from 'cesium/Widgets/widgets.css'

    import shp2geojson from './shp2geojson.vue'
    import Bus from '../js/eventbus/eventBus'

    export default {
        name: 'CesiumViewer',
        components:{shp2geojson},
        data(){
            return{
                _viewer:'',
                shp2geojsonShow:false
            }
        },
        mounted () {
            var _this = this;
            _this._viewer = new Cesium.Viewer('cesiumContainer');

            Bus.$emit('initCesium', _this._viewer);

            Bus.$on('hideShp2Geojson',function(){
                _this.shp2geojsonShow = false;
            });
        },
        methods:{
            shp2geojsonShowHandle:function(){
                this.shp2geojsonShow = true;
            }
        }
    }
</script>


<style scoped>
    #cesiumContainer {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }

    #btnId{
        position: absolute;
        right: 100px;
        top: 100px;
        z-index: 100;
    }
</style>

3、shp2geojson.vue代码：

<template>
    <div id="shp2geojson">
        <iframe src="./js/shp2geojson/shp2geojson.html" ref="iframe" @load="loaded">
        </iframe>
    </div>
</template>

<script>
    import Cesium from 'cesium/Cesium'
    import Bus from '../js/eventbus/eventBus'

    export default {
        name: 'shp2geojson',
        components: {},
        data() {
            return {
                _viewer:''
            }
        },
        methods: {
            loaded:function(){
                var _this = this;
                var shp2geojsonStr, item, shpFileName, geojsonData, promise;
                var okDom = this.$refs.iframe.contentWindow.document.getElementById('ok');
                okDom.onmouseup = function(){
                      var inter = window.setInterval(function(){
                        if(window.sessionStorage.getItem('shp2geojson') != null){
                            window.clearInterval(inter);
                            shp2geojsonStr = window.sessionStorage.getItem('shp2geojson');
                            item = JSON.parse(shp2geojsonStr);
                            shpFileName = item.shpFileName;
                            geojsonData = item.geoJsonData;

                            promise = Cesium.GeoJsonDataSource.load(geojsonData);
                            promise.then(function(dataSource) {
                                _this._viewer.dataSources.add(dataSource);

                                Bus.$emit('loadedShpParam',{
                                    isShow:true,
                                    shpFileName:shpFileName,
                                    dataSource:dataSource
                                });
                            }).otherwise(function(error){
                                window.alert('数据有误！');
                            });

                            _this.hideShp2Geojson();
                        }
                    },500);
                };

                var cancleDom = _this.$refs.iframe.contentWindow.document.getElementById('cancle');
                cancleDom.onclick = function(){
                    _this.$refs.iframe.contentWindow.document.getElementById('shp').value = '';
                    Bus.$emit('hideShp2Geojson');
                }
            }
        },
        mounted() {
            var _that = this;
            Bus.$on('initCesium', function(viewer){
                _that._viewer = viewer;
            });
        }
    }
</script>

<style scoped>
    #shp2geojson{
        z-index: 100;
        position: absolute;
        top: 20%;
        left: 45%;
        background-color: #ffffff;
    }
</style>

4、shp2geojson.html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script src="./stream.js"></script>
    <script src="./shapefile.js"></script>
    <script src="./dbf.js"></script>


    <input id="shp" type="file" name=".shp" placeholder="请选择shp文件" style="margin-left: 20px;margin-top: 20px;"/>
    <input id="dbf" type="file" name=".dbf" style="display: none;"/>
    <button id="ok" onmousedown="okDomMousedown()" style="margin-top: 30px;margin-left: 20px;">确定</button>
    <button id="cancle" style="margin-top: 30px;margin-left: 20px;">取消</button>

    <script src="./loadshp.js"></script>
</body>
</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