zheyi420 / cesium-demo

A WebGIS demo built with Vue.js(3.x), Vite and CesiumJS.

cesium-demo

• Module Bundler: Vite 3
• JavaScript Framework for Web User Interfaces: Vue 3
• Store Library for Vue: Pinia 2
• Router: Vue Router 4
• JavaScript library for creating world-class 3D globes and maps: CesiumJS

Function Demonstration

• Flight Tracker.

• Satellite Tracker.

• Demo from CesiumJS Code Examples.

  • 3D Tiles BIM: A sample BIM dataset rendered with 3D Tiles.

  • 3D Tiles Clipping Planes: User-defined clipping planes applied to a batched 3D Tileset, point cloud, and model.

  • 3D Tiles Compare: Compare 3D Tiles tilesets by showing different ones on different sides of the screen.

  • 3D Tiles Feature Picking: Pick features in a 3D Tiles tileset.

• Basic Functions.

  • Display spatial coordinates.

  • Distance measurement.

  • Area measurement.

File Structure

• /public (Directory to serve as plain static assets.) vitejs#publicDir
  • /cesium/Build/Cesium (The URL on your server where CesiumJS's static files are hosted.)
• /src
  • App.vue (root component)
  • /components (for Vue components)
  • /utils
    • /cesium (cesium related utils code)

Recommended IDE Setup

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Compile and Minify for Production

npm run build

Lint with ESLint

npm run lint

About 'VITE_BUILD_PATH_PREFIX'

The files .env.development and .env.production are configs for development and production environment.

Since it is deployed on GitHub Pages https://<USERNAME>.github.io/<REPO>/, you need to set VITE_BUILD_PATH_PREFIX='<REPO>' to refer to the static files in /public.

In general or dev env, just set VITE_BUILD_PATH_PREFIX='', it should be no problem.

Project References

• vue-vite-cesium-demo