vue3.2中使用cesium

一、使用vue-cli创建的项目

1. 安装 cesium

pnpm install cesium

2. 安装 copy-webpack-plugin

版本号：10.2.4

pnpm install copy-webpack-plugin

3. 配置 vue.config.js

const { defineConfig } = require('@vue/cli-service')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const webpack = require('webpack')
module.exports = defineConfig({
    transpileDependencies: true,
    configureWebpack: {
        plugins: [
            new CopyWebpackPlugin({
                // 将这个 ./node_modules/cesium/Build/Cesium 目录下的文件托管到 static/js/Cesium 静态文件中
                patterns: [
                    {
                        from: './node_modules/cesium/Build/Cesium',
                        to: 'static/Cesium',
                        toType: 'dir'
                    }
                ]
            }),
            new webpack.DefinePlugin({
                // 设置 CESIUM_BASE_URL 指向静态文件
                CESIUM_BASE_URL: JSON.stringify('./static/Cesium')
            })
        ],
    }
})

4. 在根 index.html 中引入样式文件

<link href="./static/Cesium/Widgets/widgets.css" rel="stylesheet">

5. 创建地球（简单使用）

<template>
  <div id="cesium-test"></div>
</template>
<script lang="ts" setup>
// 导入
import * as Cesium from 'cesium'
import { onMounted } from 'vue'

onMounted(() => {
  // 设置 token, token 在 cesium ion 中创建
  Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkODYwNDliZi0zMmJjLTRiZDktYmUxMi0zYzQwMWZkNjY0ZGYiLCJpZCI6OTQwNDYsImlhdCI6MTY1Mjc1MzA2M30.WXm6n5_D6kL8W41A95QZzAha5-alEqu3Z-Vw3I7R0l8'
  // 创建地球
  new Cesium.Viewer('cesium-test')
})
</script>

大功告成

二、使用vite创建的项目

💡 …后续更新