jhbigscreen/src/pages/index/mapIndex.vue

<template>
    <div style="height: 100%;position: relative;">
        <div style="height: 100%;" v-loading="loading">
            <div id="cesiumContainer" style="height: 100%;"></div>
        </div>
        <div class="toolbar" style="position: absolute;z-index: 100;bottom: 30px;right:12px;">
            <el-switch @change="toggleGis"
  v-model="showGis" active-text="GIS">
</el-switch>
        </div>
    </div>
</template>

<script>
import { setToken } from '@/utils/auth';


export default {
    name: 'JhbigscreenMapModle',
    props: {
    },
    data() {
        return {
            showGis:true,
            images: [],
            loading: false,
            mapInfo: null,
            project: null
        };
    },

    mounted() {
        this.initMe();
    },

    methods: {
        toggleGis(){
            window.mapApi.Public.setGisState(this.showGis);
        },
        initMe() {
            this.project = this.$root.project||{};
            this.reloadMap();
        },
        reloadMap() {
            this.mapInfo = {
                root: "http://szgc.jhncidg.com:808/mapmodel/tools/output/model/202310241728566044/root.glt",
                modelId: '3a0e7366-ad7b-3dc3-1d86-2331fc1e8578',
                view:{"heading":4.8798740228358,"pitch":-0.22637630756730465,"position":[1.9366836920898733,0.5884137486301345,31809.670937187617],"headingDegrees":279.59618606401807,"pitchDegrees":-12.970407005361997,"positionWC":{"x":-1909610.0164615875,"y":4984113.66041506,"z":3537723.8441370176}}
            };
            this.showMap = true;
            this.loading = true;
            setTimeout(this.initMap, 200);

        },
        setView(){
            let v=this.mapInfo.view;
            window.mapApi.Camera.setViewPort(v.position,v.heading,v.pitch);
        },
        initMap() {
            const func = () => {
                if (!document.getElementById("cesiumContainer")) {
                    setTimeout(func, 50);
                    return;
                }
                if (!window.initMap) {
                    setTimeout(func, 50);
                    return;
                }
                this.loading = false;
                let v=this.mapInfo.view;
                window.initMap();
                let time=+new Date();
                console.log('%c开始加载模型','color:green')
                window.mapApi.Model.AddModel(
                    this.mapInfo.root,
                    this.mapInfo.modelId,
                    null,
                    (data) => {
                        window.mapApi.Public.setGisState(true);
                        let ts=(+new Date() - time)/1000;
                        console.log('%c模型加载完成,用时'+ts+'s','color:green')
                        setTimeout(()=>{
                            let v=this.mapInfo.view;
                            window.mapApi.Camera.setViewPort(v.position,v.heading,v.pitch);
                        },400);
                        /*
                        if (Cesium.defined(data)) {
                            setTimeout(()=>{
                               
                            },3000)
                            if (Cesium.defined(data.obj) && data.obj instanceof Cesium.Cesium3DTileset) {
                                setTimeout(()=>{
                                    let v=this.mapInfo.view;
                                    window.mapApi.Camera.setViewPort(v.position,v.heading,v.pitch);
                                },3000);
                            }
                        }*/
                        $("#box,#LoadingShadow").hide()
                    },
                   {                   
                   });
                window.mapApi.Public.Event("LEFT_CLICK", function (click) {
                    window.mapApi.Feature.GetFeatureByEvent(click.position, function (json) {
                    });
                });
            }
            func();
        }
    },
};
</script>

<style lang="less">
#cesiumContainer {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: relative;
    .cesium-viewer-toolbar{
        display: none !important;
    }
}

#cesium-plugin-cube_cesiumContainer {
    transform: scale(0.6);
    
}
</style>