vue搭建cesium

要在Vue中搭建Cesium地图，你可以按照以下步骤进行操作：

1. 在src/view目录下新建一个名为earth.vue的组件，用于放置Cesium地图的代码。这个组件应该包括一个div容器，用来渲染地图。代码如下：

<template>
  <div class="container">
    <div id="cesiumContainer"></div>
  </div>
</template>

<script>
import { Viewer } from 'cesium/Cesium'
import 'cesium/Widgets/widgets.css'

export default {
  name: "earth",
  mounted() {
    let viewer = new Viewer("cesiumContainer");
  }
};
</script>

<style scoped>
.container {
  width: 100%;
  height: 100vh;
}

#cesiumContainer {
  width: 100%;
  height: 100vh;
}
</style>

2. 在webpack配置文件中，设置cesium的别名。这样在引入Cesium模块时，可以使用别名来代替。代码如下：

const path = require('path');

module.exports = {
  // ...
  resolve: {
    alias: {
      cesium: path.resolve(__dirname, cesiumSource) // 设置cesium别名
    }
  }
  // ...
};

3. 在组件中引入Cesium模块。由于Cesium 1.63版本以后使用的是ES6模块化语法，所以不能直接使用`import Cesium from 'cesium/Cesium'`导入模块。应该在组件的script标签中，使用上述设置的别名来引入Cesium。代码如下：

import { Viewer } from 'cesium/Cesium'

通过以上步骤，你就可以在Vue中成功搭建Cesium地图了。在earth.vue组件中的mounted生命周期钩子中，创建一个Viewer实例并将其渲染到id为cesiumContainer的div容器中。然后你可以根据需要对地图进行配置和操作。