cesium 统一处理

前言

视图处理这一步前提操作安装好vue-cil、cesium、路由等操作
可参考
Vue3+vite+cesium 简单搭建环境
https://blog.csdn.net/m0_57715356/article/details/136374741
Vue 3路由配置，简单配置
https://blog.csdn.net/m0_57715356/article/details/136387808

---

一、创建工具

在src目录下，创建一个utils文件夹，然后创建worldView.js

import * as Cesium from 'cesium';
export class WorldView {
    constructor(options) {
        //三维对象
        this.map = {
            viewer: undefined,
            domId: Cesium.defaultValue(options.domId, "cesiumContainer"),
        };
    }
    //初始化
    async init() {
        this.map.viewer = new Cesium.Viewer(this.map.domId, {
            animation: false,
            baseLayerPicker: false,
            fullscreenButton: false,
            geocoder: false,
            homeButton: false,
            infoBox: false,
            sceneModePicker: false,
            selectionIndicator: false,
            timeline: false,
            scene3DOnly: false,
            navigationHelpButton: false,
            imageryProvider: false,
            sceneMode:Cesium.SceneMode.SCENE3D
        });
        this.map.viewer.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(103.84, 31.15, 17850000),
            orientation: {
                heading :  Cesium.Math.toRadians(348.4202942851978),
                pitch : Cesium.Math.toRadians(-89.74026687972041),
                roll : Cesium.Math.toRadians(0)
            },
        });
    }
}

二、初始化

在你需要用到的地方最外层初始化，在这里我是统一在home页面使用

<script setup>
import { WorldView } from '../../utils/worldView';
import { onMounted,provide } from 'vue';
import A from './components/A.vue';
import B from './components/B.vue';

let worldView = new WorldView({
    domId: "cesiumContainer",
});

provide("worldView", worldView);

onMounted(() => {
    worldView.init();
});

</script>

<template>
    <div id="cesiumContainer"></div>
    <A />
    <B />
</template>

三、使用

在home页面的所有子页面都会使用同一个Viewer
A页面

<script setup>
import { inject } from 'vue';
let worldView = inject("worldView");
console.log(worldView,'A页面');
</script>
<template>
</template>

B页面

<script setup>
import { inject } from 'vue';
let worldView = inject("worldView");
console.log(worldView,'B页面');
</script>
<template>
</template>

---

总结

在父组件创造后使用传递给所有子组件即可共享一个Viewer