jhbigscreen/src/pages/detail/mapModle.vue

<template>
    <div style="height: 100%;">
        <div v-if="showMap" style="height: 100%;" v-loading="loading">
            <div id="cesiumContainer" style="height: 100%;"></div>
        </div>
        <template v-else>
            <template v-if="images && images.length>0">
                <el-carousel height="500px">
                    <el-carousel-item v-for="item in images" :key="item">
                        <div style="width: 100%;display: flex;align-items: center;justify-content: center;height: 500px;">                           
                            <el-image  :src="item" style="width:100%" :preview-src-list="images"></el-image>
                        </div>
                    </el-carousel-item>
                </el-carousel>
            </template>
            <img  v-else :src="'images/830.png'">
        </template>
    </div>
</template>

<script>

export default {
    name: 'JhbigscreenMapModle',
    props:{
        images:{
            type:Array,
            default:()=>[]
        }
    },
    data() {
        return {
            loading:false,
            showMap: false,
            mapInfo: null,
            project: null
        };
    },

    mounted() {
        window.mymap = this;
        this.$bus.$on("projectChange", res => {            
            this.project = res;
            this.reloadMap();
        });       
    },

    methods: {
        loadCss(id, href) {
            if (document.getElementById(id)) {                   
                return;
            }
            let node = document.createElement("link");
            node.rel = "stylesheet";
            node.type = "text/css";
            node.href = href;
            node.id=id;
            document.getElementsByTagName("head")[0].appendChild(node);

        },
        initScript(id, url) {
            return new Promise((resolve, reject) => {
                if (document.getElementById(id)) {
                    resolve();
                    return;
                }
                let script = document.createElement('script');
                script.type = "text/javascript";
                id = id;
                script.src = url;
                document.body.appendChild(script);

                script.onload = () => {
                    resolve();
                }
                script.onerror = () => {
                    reject();
                }
            })


        },
        reloadMap() {
            let items = window.mapModels.filter(d => d.prjId == this.project.id);
            if (items.length > 0) {
                this.mapInfo = items[0];
                this.showMap = true;
                this.loading=true;
                setTimeout(this.initMap, 200);
            } else {
                this.mapInfo = null;
                this.showMap = false;
            }
        },
        initMap() {
            const func = () => {
                if (!window.initMap) {
                    setTimeout(func, 100);
                    return;
                }
                this.loading=false;
                window.initMap();
                window.mapApi.Model.add(
                    this.mapInfo.root,
                    this.mapInfo.modelId,
                    null,
                    function (data) {
                        if (Cesium.defined(data)) {
                            if (Cesium.defined(data.obj) && data.obj instanceof Cesium.Cesium3DTileset) {
                                console.log(data);
                            }
                        }
                    },
                    function (data) {
                        $("#box,#LoadingShadow").hide()
                    });
            }
            func();
        }
    },
};
</script>

<style lang="less">
#cesiumContainer {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: relative;
}
</style>