1. Introduction

In the process of application development based on Cesium, it is often encountered that the library to be used is not the standard Cesium official package. The Vue integration of the official package is quite mature and there are many materials to view. However, the unofficial package reference integration, especially in the Vue3+Vite environment, is rarely discussed. This paper introduces how to use vue3.0 in a real project The X + vite + TS environment introduces the third-party modified Cesium package for integrated development.

2. Vue3.x+Vite environment construction

Install vite: cnpm install vite@latest

Create project: yarn create vite cesiumvue -- Vue TS

There are not many options for creating a project, which will not be detailed here. The overall selection framework is vue, and the template is vue ts. note: the project template created at this time adopts the form of setup script.

Run the project: the access address of npm run dev is http://localhost:3000/

3. Configure the third-party Cesium package

The configuration of Cesium mentioned here is not integrated by installing the npm package of Cesium or introducing the Vue Cesium plug-in or ViteCesium plug-in. Instead, the modified Cesium package of a third party (such as the modified DTGlobe development package of Zhejiang zhonghaida) is introduced into the Vite framework. In order to facilitate the test of this tutorial, I used the package of version 1.88 on the official website of Cesium and the files in the Build/Cesium directory.

1) Package file organization

Create a new lib folder under the public folder of vite project, and copy the distributed Cesium package files to this directory. At the same time, for better automatic completion and code prompt, create a new types folder under the src directory to put the new version of Cesium d. Copy TS into it (or import the TS definition file provided by the distributor of the secondary development package you need to integrate), because tsconfig The include in JSON has been configured to search all d.ts file definitions under src, so that the project can automatically find the export object of Cesium, so as to give intelligent prompts during the development process. In order to better demonstrate the effectiveness of this method, vscode does not support automatic prompt by installing @ types/Cesium.

2)index.html file modification

In index Add the relevant reference code of Cesium in HTML

 <script src="/lib/Cesium/Cesium.js"></script>
 <script>window['CESIUM_BASE_URL'] = '/lib/Cesium/'</script>
 <link rel="stylesheet" href="/lib/Cesium/Widgets/widgets.css">

Note: a. introduce cesium JS will cause the browser to load Cesium.js twice in the development environment JS file, but if you delete it here, you need to add Cesium.js in html after build The introduction of JS; b. Cesium needs to be specified here_ BASE_ Otherwise, cesium cannot locate the internal resource location

3) Modify the Vite configuration file Vite config. ts

Firstly, the integration scheme needs to rely on the external global variable of vite to introduce the plug-in: roll plug-in external globals. Secondly, because the node object in ts cannot be automatically prompted, the path object needs to be used in this configuration file, so @ types/node is installed to avoid inspection errors.

Rollup plugin external globals installation method:

cnpm install -S rollup-plugin-external-globals

path type installation method:

cnpm i @types/node -D

Finally, modify vite config. TS, mainly pay attention to 7 places in the notes.

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path';//lmw add 1
import externalGlobals from 'rollup-plugin-external-globals'//lmw add 2

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve:{
    alias:{
      "cesium":path.resolve(__dirname,"./public/lib/Cesium/Cesium.js")//lmw add 3 tells vite how to introduce cesium when it is not compiled
    }
  },
  server:{
    fs:{
      strict:false //lmw add 4 eliminates the warning of introducing cesium into html files
    }
  },
  optimizeDeps:{
    include:['cesium']//lmw add 5 build cesium js
  },
  build:{
    rollupOptions:{
      external:['cesium'],//lmw add 6 does not allow cesium to be compiled again
      plugins:[
        externalGlobals({
          "cesium":"Cesium"//lmw add 7 uses the introduced cesium to correspond to the cesium in the code
        })
      ]
    }
  }
})

4) Using Cesium objects in programs

import { Viewer } from 'cesium';
import * as Cesium from 'cesium';