or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

3d-tiles.mdcore-math-geometry.mddata-sources.mdentity-data-visualization.mdimagery-terrain.mdindex.mdscene-3d-graphics.mdtime-animation.mdviewer-widgets.md
tile.json

tessl/npm-cesium

CesiumJS is a JavaScript library for creating 3D globes and 2D maps in a web browser without a plugin.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/cesium@1.133.x

To install, run

npx @tessl/cli install tessl/npm-cesium@1.133.0

index.mddocs/

CesiumJS

CesiumJS is a JavaScript library for creating 3D globes and 2D maps in a web browser without a plugin. It leverages WebGL for hardware-accelerated graphics and provides powerful APIs for rendering geospatial data, 3D models, and real-time visualizations at massive scale.

Package Information

  • Package Name: cesium
  • Package Type: npm
  • Language: JavaScript/TypeScript
  • Installation: npm install cesium

Core Imports

import * as Cesium from "cesium";
// or specific imports
import { Viewer, Cartesian3, JulianDate } from "cesium";

For CommonJS:

const Cesium = require("cesium");
// or specific imports
const { Viewer, Cartesian3, JulianDate } = require("cesium");

Basic Usage

import { Viewer, Cartesian3, Color } from "cesium";

// Create a 3D viewer
const viewer = new Viewer('cesiumContainer');

// Add a point to the globe
viewer.entities.add({
  position: Cartesian3.fromDegrees(-75.59777, 40.03883),
  point: {
    pixelSize: 10,
    color: Color.YELLOW
  }
});

// Fly to a location
viewer.camera.flyTo({
  destination: Cartesian3.fromDegrees(-75.59777, 40.03883, 1000.0)
});

Architecture

CesiumJS is organized into several key modules:

  • Core Module: Mathematical utilities, geometry classes, coordinate systems, and core data structures
  • Scene Module: 3D scene rendering, imagery providers, 3D Tiles, models, and visual effects
  • DataSources Module: High-level entity management, graphics objects, and data visualization
  • Widgets Module: UI components including the main Viewer widget and control panels
  • Renderer Module: Low-level WebGL rendering abstractions

The library is built as a monorepo with @cesium/engine (core functionality) and @cesium/widgets (UI components) packages.

Capabilities

3D Viewer and Scene Management

The main Viewer widget that combines all CesiumJS functionality into a complete 3D globe application.

class Viewer {
  constructor(container: Element | string, options?: ViewerOptions);
  readonly scene: Scene;
  readonly camera: Camera;
  readonly entities: EntityCollection;
  readonly dataSources: DataSourceCollection;
  destroy(): void;
}

interface ViewerOptions {
  animation?: boolean;
  baseLayerPicker?: boolean;
  fullscreenButton?: boolean;
  geocoder?: boolean;
  homeButton?: boolean;
  infoBox?: boolean;
  sceneModePicker?: boolean;
  selectionIndicator?: boolean;
  timeline?: boolean;
  navigationHelpButton?: boolean;
  terrainProvider?: TerrainProvider;
  imageryProvider?: ImageryProvider;
}

Viewer and Widgets

Mathematical Operations and Geometry

Core mathematical types, coordinate systems, and geometric calculations for 3D graphics.

class Cartesian3 {
  constructor(x?: number, y?: number, z?: number);
  x: number;
  y: number;
  z: number;
  static fromDegrees(longitude: number, latitude: number, height?: number): Cartesian3;
  static distance(left: Cartesian3, right: Cartesian3): number;
  static add(left: Cartesian3, right: Cartesian3, result?: Cartesian3): Cartesian3;
}

class Matrix4 {
  constructor(
    column0Row0?: number, column1Row0?: number, column2Row0?: number, column3Row0?: number,
    column0Row1?: number, column1Row1?: number, column2Row1?: number, column3Row1?: number,
    column0Row2?: number, column1Row2?: number, column2Row2?: number, column3Row2?: number,
    column0Row3?: number, column1Row3?: number, column2Row3?: number, column3Row3?: number
  );
  static multiply(left: Matrix4, right: Matrix4, result?: Matrix4): Matrix4;
  static fromTranslation(translation: Cartesian3, result?: Matrix4): Matrix4;
}

class BoundingSphere {
  constructor(center?: Cartesian3, radius?: number);
  center: Cartesian3;
  radius: number;
  static fromPoints(positions: Cartesian3[], result?: BoundingSphere): BoundingSphere;
}

Core Mathematics and Geometry

Scene Rendering and 3D Graphics

3D scene management, camera controls, and rendering primitives for visualizing 3D content.

class Scene {
  readonly canvas: HTMLCanvasElement;
  readonly camera: Camera;
  readonly primitives: PrimitiveCollection;
  readonly globe: Globe;
  render(time?: JulianDate): void;
  pick(windowPosition: Cartesian2): object;
}

class Camera {
  position: Cartesian3;
  direction: Cartesian3;
  up: Cartesian3;
  flyTo(options: CameraFlightOptions): void;
  lookAt(target: Cartesian3, offset: Cartesian3): void;
  setView(options: CameraSetViewOptions): void;
}

interface CameraFlightOptions {
  destination: Cartesian3 | Rectangle;
  orientation?: CameraOrientation;
  duration?: number;
  complete?: () => void;
}

Scene Management and 3D Graphics

Imagery and Terrain Providers

Data providers for satellite imagery, maps, and elevation data from various sources.

class ArcGisMapServerImageryProvider {
  constructor(options: ArcGisMapServerImageryProviderOptions);
  readonly url: string;
  readonly layers: string;
}

class BingMapsImageryProvider {
  constructor(options: BingMapsImageryProviderOptions);
  readonly url: string;
  readonly key: string;
}

class CesiumTerrainProvider {
  constructor(options: CesiumTerrainProviderOptions);
  readonly url: string;
  requestTileGeometry(x: number, y: number, level: number): Promise<TerrainData>;
}

interface ArcGisMapServerImageryProviderOptions {
  url: string;
  layers?: string;
  enablePickFeatures?: boolean;
  rectangle?: Rectangle;
}

Imagery and Terrain

Entity System and Data Visualization

High-level entity management for creating and visualizing geospatial data with graphics objects.

class Entity {
  constructor(options?: EntityOptions);
  id: string;
  name?: string;
  position?: PositionProperty;
  billboard?: BillboardGraphics;
  box?: BoxGraphics;
  label?: LabelGraphics;
  model?: ModelGraphics;
  point?: PointGraphics;
  polygon?: PolygonGraphics;
  polyline?: PolylineGraphics;
}

class EntityCollection {
  add(entity: Entity): Entity;
  remove(entity: Entity): boolean;
  getById(id: string): Entity;
  values: Entity[];
}

class PointGraphics {
  constructor(options?: PointGraphicsOptions);
  pixelSize?: Property;
  color?: Property;
  outlineColor?: Property;
  show?: Property;
}

Entity System and Data Visualization

Data Sources and File Formats

Data source classes for loading and visualizing various geospatial file formats.

class GeoJsonDataSource {
  static load(data: string | object, options?: GeoJsonDataSourceOptions): Promise<GeoJsonDataSource>;
  readonly entities: EntityCollection;
  readonly name: string;
}

class CzmlDataSource {
  static load(czml: string | object[], options?: CzmlDataSourceOptions): Promise<CzmlDataSource>;
  readonly entities: EntityCollection;
  readonly clock: DataSourceClock;
}

class KmlDataSource {
  static load(data: string | Document | Blob, options?: KmlDataSourceOptions): Promise<KmlDataSource>;
  readonly entities: EntityCollection;
}

interface GeoJsonDataSourceOptions {
  sourceUri?: string;
  markerSize?: number;
  markerSymbol?: string;
  markerColor?: Color;
  stroke?: Color;
  strokeWidth?: number;
  fill?: Color;
}

Data Sources and File Formats

3D Tiles and Streaming Content

3D Tiles for streaming and rendering large-scale 3D content including buildings, point clouds, and models.

class Cesium3DTileset {
  constructor(options: Cesium3DTilesetOptions);
  readonly url: string;
  readonly root: Cesium3DTile;
  readonly boundingSphere: BoundingSphere;
  style?: Cesium3DTileStyle;
  readyPromise: Promise<Cesium3DTileset>;
}

class Cesium3DTileFeature {
  getProperty(name: string): any;
  setProperty(name: string, value: any): void;
  hasProperty(name: string): boolean;
  getPropertyIds(): string[];
}

interface Cesium3DTilesetOptions {
  url: string;
  show?: boolean;
  modelMatrix?: Matrix4;
  shadows?: ShadowMode;
  maximumScreenSpaceError?: number;
}

3D Tiles and Streaming Content

Time and Animation

Time management, animation controls, and temporal data visualization.

class JulianDate {
  constructor(julianDayNumber?: number, secondsOfDay?: number, timeStandard?: TimeStandard);
  static now(result?: JulianDate): JulianDate;
  static fromDate(date: Date, result?: JulianDate): JulianDate;
  static toDate(julianDate: JulianDate): Date;
  static addDays(julianDate: JulianDate, days: number, result?: JulianDate): JulianDate;
}

class Clock {
  constructor(options?: ClockOptions);
  startTime: JulianDate;
  stopTime: JulianDate;
  currentTime: JulianDate;
  multiplier: number;
  shouldAnimate: boolean;
  tick(): JulianDate;
}

interface ClockOptions {
  startTime?: JulianDate;
  stopTime?: JulianDate;
  currentTime?: JulianDate;
  multiplier?: number;
  clockStep?: ClockStep;
  clockRange?: ClockRange;
  canAnimate?: boolean;
  shouldAnimate?: boolean;
}

Time and Animation

Types

interface Color {
  red: number;
  green: number;
  blue: number;
  alpha: number;
}

interface Cartesian2 {
  x: number;
  y: number;
}

interface Cartographic {
  longitude: number;
  latitude: number;
  height: number;
}

interface Rectangle {
  west: number;
  south: number;
  east: number;
  north: number;
}

interface Property {
  getValue(time: JulianDate, result?: any): any;
  isConstant: boolean;
}

enum SceneMode {
  MORPHING = 0,
  COLUMBUS_VIEW = 1,
  SCENE2D = 2,
  SCENE3D = 3
}

enum ClockStep {
  TICK_DEPENDENT = 0,
  SYSTEM_CLOCK_MULTIPLIER = 1,
  SYSTEM_CLOCK = 2
}