CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-cesium

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

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

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
}
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/cesium@1.133.x
Publish Source
CLI
Badge
tessl/npm-cesium badge