cesium 集成到vue中

安装cesium

npm install cesium

配置 Cesium

在 `vue.config.js` 中配置 Cesium，确保正确处理静态资源。创建或编辑 `vue.config.js` 文件

// vue.config.js
const path = require('path');

module.exports = {
    configureWebpack: {
        resolve: {
            alias: {
                cesium: path.resolve(__dirname, 'node_modules/cesium/Source')
            }
        },
        plugins: [
            new (require('cesium-webpack-plugin'))()
        ]
    },
    chainWebpack: config => {
        config.module
            .rule('cesium')
            .test(/\.js$/)
            .include.add(/cesium/)
            .end()
            .use('babel-loader')
            .loader('babel-loader')
            .options({
                presets: ['@babel/preset-env']
            });
    }
};

 

创建 Cesium 组件

<template>
  <div id="cesiumContainer" style="width: 100%; height: 100vh;"></div>
</template>

<script>
import { Viewer } from 'cesium';

export default {
  name: 'CesiumMap',
  mounted() {
    // 初始化 Cesium Viewer
    this.viewer = new Viewer('cesiumContainer', {
      terrainProvider: Cesium.createWorldTerrain(),
      imageryProvider: Cesium.IonImageryProvider,
      accessToken: 'token'
    });
  },
  beforeDestroy() {
    // 清理 Cesium Viewer
    if (this.viewer) {
      this.viewer.destroy();
    }
  }
};
</script>

 

在主应用中使用 Cesium 组件

<template>
  <div id="app">
    <CesiumMap />
  </div>
</template>

<script>
import CesiumMap from './components/CesiumMap.vue';

export default {
  name: 'App',
  components: {
    CesiumMap
  }
};
</script>