vue3中引用cesium，初步搭建

依据项目需求，使用Vue for Cesium ，链接：https://zouyaoji.top/vue-cesium/#/zh-CN

执行

npm install vue-cesium@next --save

全量导入

如果你对打包后的文件大小不是很在乎，那么你可以使用 Vue 的 插件 安装方式配置到全局。

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import VueCesium from 'vue-cesium'
// import Cesium from 'cesium'
import 'vue-cesium/dist/index.css'

createApp(App).use(store).use(router).use(VueCesium).mount('#app')

配置 Vue for Cesium

你可以对 Vue for Cesium 做一些自定义的配置：

import enUS from 'vue-cesium/es/locale/lang/en-us'

app.use(VueCesium, {
  cesiumPath: 'path/to/Cesium.js',
  accessToken: '你的 Cesium Ion 访问令牌',
  locale: enUS // 改成英文
})

使用

 <vc-viewer ref="vcViewer" :animation="animation" :base-layer-picker="baseLayerPicker" :timeline="timeline"
                :fullscreen-button="fullscreenButton" :fullscreen-element="fullscreenElement" :info-box="infoBox"
                :skyAtmosphere="false" :skyBox="false" :scene-mode-picker="true" :show-credit="showCredit"
                @cesium-ready="onCesiumReady" @ready="onViewerReady" @left-click="onLeftClick" @touch-end="onTouchEnd">
                <vc-navigation :offset="offset" @compass-evt="onNavigationEvt" :other-opts="otherOpts"
                    @zoom-evt="onNavigationEvt"></vc-navigation>
                <vc-entity v-model:billboard="billboard" ref="entity" @click="onEntityClick"
                    :position="{ lng: 108, lat: 32 }" :point="point" :label="label">
                    <vc-graphics-billboard ref="billboard"
                        image="https://zouyaoji.top/vue-cesium/favicon.png"></vc-graphics-billboard>
                    <vc-graphics-rectangle :coordinates="[130, 20, 80, 25]" material="green"></vc-graphics-rectangle>
                </vc-entity>
                <vc-layer-imagery>
                    <vc-imagery-provider-tianditu map-style="img_c"
                        token="436ce7e50d27eede2f2929307e6b33c0"></vc-imagery-provider-tianditu>
                </vc-layer-imagery>
                <vc-layer-imagery ref="layerText">
                    <vc-imagery-provider-tianditu map-style="cia_c"
                        token="436ce7e50d27eede2f2929307e6b33c0"></vc-imagery-provider-tianditu>
                </vc-layer-imagery>
            </vc-viewer>

<script>
export default {
    data() {
        return {
            loading: true,
            animation: true,
            timeline: true,
            baseLayerPicker: false,
            fullscreenButton: true,
            infoBox: true,
            showCredit: true,
            fullscreenElement: document.body,
            point: {
                pixelSize: 28,
                color: 'red'
            },
            label: {
                text: 'Hello World',
                pixelOffset: [0, 150]
            },
            billboard: {},
            offset: [50, 25],
            otherOpts: {
                offset: [0, 32],
                position: 'bottom-right'
            }
        }
    },
    watch: {
        timeline(val) {
            this.otherOpts.offset = val ? [0, 30] : this.fullscreenButton ? [30, 5] : [0, 5]
        },
        fullscreenButton(val) {
            if (!this.timeline && !val) {
                this.otherOpts.offset = [0, 5]
            } else if (!this.timeline && val) {
                this.otherOpts.offset = [30, 5]
            }
        }
    },
    mounted() {
        this.$refs.vcViewer.creatingPromise.then(({ Cesium, viewer }) => {
            console.log('viewer is loaded.')
        })
    },
    methods: {
        onViewerReady({ Cesium, viewer }) {
            this.loading = false
            viewer.scene.globe.enableLighting = true
        },
        onCesiumReady(e) {
            console.log(e)
        },
        onNavigationEvt(e) {
            console.log(e)
        },
        onEntityClick(e) {
            console.log(e)
        },
        onLeftClick(e) {
            console.log(e)
        },
        onTouchEnd(e) {
            console.log(e)
        },
        load() {
            this.$refs.vcViewer.load().then(e => {
                console.log(e)
                this.loading = false
            })
        },
        unload() {
            this.$refs.vcViewer.unload().then(e => {
                console.log(e)
                this.loading = true
            })
        },
        reload() {
            this.loading = true
            this.$refs.vcViewer.reload().then(e => {
                console.log(e)
                this.loading = false
            })
        }
    }
}
</script>