Vite 中文文档

⚡ vite-plugin-cesium


Easily set up a Cesium project in Vite.

update：if you just wanna a scaffolding by using this plugin, try a simply command yarn create cesium, click create-cesium for more info.

Chinese tutorial: 中文教程

Install


  1. ``` shell
  2. npm i cesium vite-plugin-cesium vite -D
  3. # yarn add cesium vite-plugin-cesium vite -D
  4. ```

Usage


add this plugin to vite.config.js

  1. ``` js
  2. import { defineConfig } from 'vite';
  3. import cesium from 'vite-plugin-cesium';
  4. export default defineConfig({
  5.   plugins: [cesium()]
  6. });
  7. ```

add dev command to package.json

  1. ``` json
  2. "scripts": {
  3.   "dev": "vite",
  4.   "build": "vite build"
  5. }
  6. ```

run:

yarn dev

Options


rebuildCesium

Type :boolean
Default :false

Default copy min cesium file to dist. if true will rebuild cesium from source.

  1. ``` js
  2. import { defineConfig } from 'vite';
  3. import cesium from 'vite-plugin-cesium';
  4. export default defineConfig({
  5.   plugins: [
  6.     cesium({
  7.       rebuildCesium: true
  8.     })
  9.   ]
  10. });
  11. ```

Demo


src/index.js

  1. ``` js
  2. import { Viewer } from 'cesium';
  3. import './css/main.css';

  5. const viewer = new Viewer('cesiumContainer');
  6. ```

or if you like global Cesium object you can write as


  1. ``` js
  2. import * as Cesium from 'cesium';
  3. const viewer = new Cesium.Viewer('cesiumContainer');
  4. ```

index.html

  1. ``` html
  2. <!DOCTYPE html>
  3. <html lang="en">
  4.   <head>
  5.     <meta charset="UTF-8" />
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <title>cesium-vite</title>
  9.     <script type="module" src="/src/index.js"></script>
  10.   </head>
  12.   <body>
  13.     <div id="cesiumContainer"></div>
  14.   </body>
  15. </html>
  16. ```

src/css/main.css

  1. ``` css
  2. html,
  3. body,
  4. #cesiumContainer {
  5.   width: 100%;
  6.   height: 100%;
  7.   margin: 0;
  8.   padding: 0;
  9.   overflow: hidden;
  10. }
  11. ```

Add dev and build commands to package.json

  1. ``` sh
  2. "scripts": {
  3.     "dev": "vite",
  4.     "build": "vite build"
  5. },

  7. ```

Run yarn dev

For full demo project please check ./demo folder.


License


MIT