Cesium Vue SDK

A Vue 3 + TypeScript wrapper for Cesium.js, providing a simple, type-safe API for building 3D geospatial applications.

Features

• Vue 3 Composition API support
• Full TypeScript support with type definitions
• Entity management (Point, Polyline, Polygon, Model, Label, Billboard)
• Primitive management
• Camera controls
• Coordinate conversion utilities
• Measurement tools (distance, area)
• Drawing tools
• Layer management (imagery, terrain)
• Plugin system
• Event management

Installation

yarn add cesium-vue-sdk cesium

Quick Start

Using Composition API

<template>
  <div ref="cesiumContainer" class="cesium-container"></div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { useCesium } from 'cesium-vue-sdk'

const cesiumContainer = ref<HTMLElement>()
const { createViewer, destroyViewer } = useCesium()

onMounted(() => {
  if (cesiumContainer.value) {
    createViewer(cesiumContainer.value, {
      animation: false,
      timeline: false,
    })
  }
})

onUnmounted(() => {
  destroyViewer()
})
</script>

<style>
.cesium-container {
  width: 100%;
  height: 100vh;
}
</style>

Direct API Usage

import {
  createViewer,
  createPointEntity,
  createPolylineEntity,
  CameraController,
  Cesium
} from 'cesium-vue-sdk'

// Create Viewer
const viewer = createViewer('cesiumContainer', {
  animation: false,
  timeline: false,
})

// Create Point Entity
const point = createPointEntity({
  position: [116.3974, 39.9093, 100],
  color: '#FF0000',
  pixelSize: 10,
})

// Create Polyline Entity
const polyline = createPolylineEntity({
  positions: [
    [116.3974, 39.9093, 0],
    [116.4074, 39.9193, 0],
  ],
  width: 5,
  material: '#00FF00',
})

// Camera Control
CameraController.flyTo(viewer, {
  destination: Cesium.Cartesian3.fromDegrees(116.3974, 39.9093, 1000),
  duration: 3,
})

API Reference

Hooks

useCesium()

Main hook providing all Cesium functionality.

const {
  viewer,              // Cesium.Viewer instance
  createViewer,        // Create viewer
  destroyViewer,       // Destroy viewer
  createPoint,         // Create point entity
  createPolyline,      // Create polyline entity
  createPolygon,       // Create polygon entity
  createModel,         // Create model entity
  createLabel,         // Create label entity
  createBillboard,     // Create billboard entity
  removeEntity,        // Remove entity by id
  removeAllEntities,   // Remove all entities
  flyTo,               // Camera fly to
  zoomIn,              // Camera zoom in
  zoomOut,             // Camera zoom out
  resetView,           // Reset camera view
  startDistanceMeasurement,  // Start distance measurement
  startAreaMeasurement,      // Start area measurement
  stopMeasurement,           // Stop measurement
  startDraw,                 // Start drawing
  stopDraw,                  // Stop drawing
} = useCesium()

useViewer()

Basic viewer management hook.

const {
  viewer,
  state,
  createViewer,
  destroyViewer,
  resetViewer,
  isReady,
  setSceneMode,
  enableDepthTestAgainstTerrain,
  resize,
} = useViewer()

Entity Options

PointEntityOptions

interface PointEntityOptions {
  position: Position
  color?: ColorLike
  pixelSize?: number
  outlineColor?: ColorLike
  outlineWidth?: number
  heightReference?: Cesium.HeightReference
}

PolylineEntityOptions

interface PolylineEntityOptions {
  positions: Position[]
  width?: number
  material?: Cesium.MaterialProperty | ColorLike
  clampToGround?: boolean
}

PolygonEntityOptions

interface PolygonEntityOptions {
  hierarchy: Cesium.PolygonHierarchy | Position[]
  material?: Cesium.MaterialProperty | ColorLike
  outline?: boolean
  outlineColor?: ColorLike
  height?: number
  extrudedHeight?: number
}

Utilities

Coordinate Conversion

import {
  degreesToCartesian3,
  cartesian3ToDegrees,
  screenToCartesian3,
  cartesian3ToScreen,
  calculateDistance,
} from 'cesium-vue-sdk'

// Convert degrees to Cartesian3
const cartesian = degreesToCartesian3(116.4, 39.9, 100)

// Convert Cartesian3 to degrees
const { longitude, latitude, height } = cartesian3ToDegrees(cartesian)

// Calculate distance between two positions
const distance = calculateDistance([116.4, 39.9, 0], [116.5, 40.0, 0])

Camera Controller

import { CameraController, Cesium } from 'cesium-vue-sdk'

// Fly to position
CameraController.flyTo(viewer, {
  destination: Cesium.Cartesian3.fromDegrees(116.4, 39.9, 10000),
  duration: 3,
})

// Zoom
CameraController.zoomIn(viewer, 1000)
CameraController.zoomOut(viewer, 1000)

// Reset view
CameraController.resetView(viewer)

Plugin System

import { createPlugin, usePlugin } from 'cesium-vue-sdk'

// Create a custom plugin
const myPlugin = createPlugin(
  'my-plugin',
  (viewer, options) => {
    // Plugin installation logic
    console.log('Plugin installed', options)
  },
  (viewer) => {
    // Plugin cleanup logic
    console.log('Plugin uninstalled')
  }
)

// Use the plugin
usePlugin(myPlugin, { option1: 'value1' })

Vite Configuration

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import cesium from 'vite-plugin-cesium'

export default defineConfig({
  plugins: [vue(), cesium()],
})

License

MIT