vue3项目引用cesium

安装cesium

使用npm命令安装cesium：

npm install cesium

在Vue中引用cesium

在Vue的组件中引用cesium：

import * as Cesium from 'cesium/Cesium'
import 'cesium/Widgets/widgets.css'

export default {
  name: 'CesiumViewer',
  data() {
    return {
      viewer: null
    }
  },
  mounted() {
    this.initViewer()
  },
  methods: {
    initViewer() {
      this.viewer = new Cesium.Viewer(this.$refs.cesiumContainer, {
        animation: false,
        baseLayerPicker: false,
        fullscreenButton: false,
        geocoder: false,
        homeButton: false,
        infoBox: false,
        sceneModePicker: false,
        selectionIndicator: false,
        timeline: false,
        navigationHelpButton: false,
        navigationInstructionsInitiallyVisible: false
      })
    }
  }
}

这里使用了Cesium的Viewer组件创建了一个地球球体。在Vue的mounted钩子中调用了initViewer方法来初始化Viewer。这里将Viewer挂载到了组件的data中，方便后续的操作。

在template中添加cesium容器：

<template>
  <div class="cesium-container" ref="cesiumContainer"></div>
</template>

<style scoped>
  .cesium-container {
    height: 400px;
  }
</style>

这里创建了一个高度为400px的div容器，用来显示cesium的地球球体。

运行项目

现在我们可以运行项目来查看是否成功引用了cesium。

使用npm命令运行项目：

npm run serve

在浏览器中访问项目地址，如果看到一个地球球体，说明引用cesium成功了。