由于要對(duì)Cesium進(jìn)行定制化開發(fā)，需要修改里面的源碼，所以就不能使用npm的方式進(jìn)行安裝。需要直接引入源碼的方式。其引入方式跟npm的方式差不多，只需要下載源碼，修改一下配置文件既可。

1 下載源碼

直接從官網(wǎng)下載源碼，我這里下載的是最新的版本1.8.0。

2 初始化Vue項(xiàng)目

使用Vue腳手架項(xiàng)目創(chuàng)建一個(gè)空項(xiàng)目。

3 引入源碼

創(chuàng)建好項(xiàng)目后，將源碼目錄下的Source和ThirdParty復(fù)制到src目錄下的Cesium目錄中。

4 修改配置文件

在項(xiàng)目的根目錄下，創(chuàng)建一個(gè)vue.config.js，然后將下面的代碼復(fù)制到配置文件中。其作用主要是將Workers，Assets，Widgets，ThirdParty的目錄復(fù)制到指定的CESIUM_BASE_URL目錄中，便于源碼中找到對(duì)應(yīng)的文件。

const CopyWebpackPlugin = require("copy-webpack-plugin");
const webpack = require("webpack");
module.exports = {
    configureWebpack: {
        plugins: [
            //copy-webpack-plugin 5.x 的寫法
            new CopyWebpackPlugin([{
                from: "src/Cesium/Source/Workers",
                to: 'cesium/Workers'
            }]),
            new CopyWebpackPlugin([{
                from: "src/Cesium/Source/Assets",
                to: 'cesium/Assets'
            }]),
            new CopyWebpackPlugin([{
                from: "src/Cesium/Source/Widgets",
                to: 'cesium/Widgets'
            }]),
            new CopyWebpackPlugin([{
                from: "src/Cesium/ThirdParty",
                to: 'cesium/ThirdParty'
            }]),

            new webpack.DefinePlugin({
                CESIUM_BASE_URL: JSON.stringify("./cesium")
            })
        ],
        module: {
            unknownContextCritical: false,
            unknownContextRegExp: /\/cesium\/cesium\/Source\/Core\/buildModuleUrl\.js/
        }
    },
}

5 引入代碼

在main.js文件中，引用css和Cesium類并要設(shè)置accessToken。

import * as Cesium from './Cesium/Source/Cesium';
import './Cesium/Source/Widgets/widgets.css'

也可以將其掛載到全局變量上。

const app = createApp(App);
app.use(store).use(router).mount('#app');
app.config.globalProperties.$Cesium = Cesium;
Cesium.Ion.defaultAccessToken='你的accessToken'

6創(chuàng)建地圖

在vue文件中引用Cesium進(jìn)行創(chuàng)建地圖，具體代碼如下所示：

<template>
  <div class="home">
    <div id="map"></div>
  </div>
</template>

<script>
  import {getCurrentInstance, onMounted} from  'vue';
export default {
    name: 'Home',
    components: {

    },
    setup(){
        const {ctx } = getCurrentInstance();
        const Cesium = ctx.$Cesium;
        const initMap = ()=>{
            let viewer = new Cesium.Viewer('map',{
            });
            viewer.camera.flyTo({
                destination : Cesium.Cartesian3.fromDegrees(112.4175, 23.655, 400),
                orientation : {
                    heading : Cesium.Math.toRadians(0.0),
                    pitch : Cesium.Math.toRadians(-15.0),
                }
            });
        };
        onMounted(() => {
            initMap();
        })
    }
}
</script>
<style scoped>
  .home,#map{
    height: 100%;
    width: 100%;
  }
</style>

引入源碼方式基本就這幾個(gè)步驟，以后會(huì)不定期的分享Cesium相關(guān)的文檔，將利用業(yè)余時(shí)間開發(fā)一個(gè)二三維一體的webgis平臺(tái)。