Because Cesium needs to be customized development, it needs to modify the source code inside, so it cannot be installed using NPM. You need to import the source code directly. It is introduced in much the same way as NPM, just download the source code and modify the configuration file.

1 Download source code

Download the source code directly from the official website, I download here is the latest version 1.9.0. Direct download address

2 Initialize the Vue project

Create an empty project using the Vue scaffolding project.

3 Importing source code

Once the project is created, copy the Source and ThirdParty files in the Source directory to the Cesium directory in the SRC directory.

4 Modify the WebPack configuration file

In the root directory of the project, create a vue.config.js and copy the following code into the configuration file. It copies the directories of Workers, Assets, Widgets, and ThirdParty to the CESIUM_BASE_URL directory so that the corresponding files can be found in the source directory.

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({
                // if the directory is not copied correctly, the map cannot be created 🌏
                CESIUM_BASE_URL: JSON.stringify("./cesium")})],module: {
            unknownContextCritical: false.unknownContextRegExp: //cesium/cesium/Source/Core/buildModuleUrl.js/}}},Copy the code

Define global variables in a Vite project using default:

export default defineConfig({
    define: {
        CESIUM_BASE_URL: JSON.stringify('./cesium')}})Copy the code

5 Import Code

In the main.js file, reference the CSS and Cesium classes and set accessToken.

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

You can mount it on a global variable.

const app = createApp(App);
app.use(store).use(router).mount('#app');
app.config.globalProperties.$Cesium = Cesium;
Cesium.Ion.defaultAccessToken='your accessToken'
Copy the code

It can also be introduced when used on the page, depending on the project

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

Cesium.Ion.defaultAccessToken='your accessToken'
let viewer = new Cesium.Viewer('map'{}); viewer._cesiumWidget._creditContainer.style.display ="none"; // Hide copyright
Copy the code

6 Creating a Map

Create a map by referencing Cesium in the vue file as follows:

<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>
Copy the code

The introduction of the source code is basically these steps, will share Cesium related documents irregularly in the future, will use spare time to develop a two-three-dimensional integration of webGIS platform.