cesiumjs-core-utilities
CesiumJS core utilities and networking - Resource, Color, Event, Request, RequestScheduler, error handling, helper functions, feature detection. Use when fetching remote data, managing HTTP requests, working with colors, handling events, debugging errors, or using utility functions like defined, clone, or buildModuleUrl.
git clone --depth 1 https://github.com/CesiumGS/cesiumjs-skills /tmp/cesiumjs-core-utilities && cp -r /tmp/cesiumjs-core-utilities/skills/cesiumjs-core-utilities ~/.claude/skills/cesiumjs-core-utilitiesSKILL.md
# CesiumJS Core Utilities & Networking
Version baseline: CesiumJS v1.142+ (ES module imports, `defaultValue` removed in v1.134)
## Breaking Change: defaultValue Removed (v1.134)
```js
// WRONG (removed in v1.134)
const name = defaultValue(options.name, "default");
const opts = defaultValue(options, defaultValue.EMPTY_OBJECT);
// CORRECT (v1.134+)
import { Frozen } from "cesium";
const name = options.name ?? "default";
const opts = options ?? Frozen.EMPTY_OBJECT;
```
`Frozen.EMPTY_OBJECT` is `Object.freeze({})` and `Frozen.EMPTY_ARRAY` is `Object.freeze([])`. Use them as safe defaults for options objects and array parameters.
## Resource: HTTP Requests and Data Fetching
`Resource` is the unified class for all HTTP operations. It wraps URL construction, query parameters, headers, proxying, and retry logic.
### Fetching Data
```js
import { Resource } from "cesium";
// Static shorthand: accepts a URL string or options object
const jsonData = await Resource.fetchJson({ url: "https://api.example.com/data.json" });
// Instance-based: construct once, reuse for multiple fetches
const resource = new Resource({
url: "https://api.example.com/features",
queryParameters: { format: "json", limit: "100" },
headers: { "Authorization": "Bearer my-token" },
});
const features = await resource.fetchJson();
const text = await resource.fetchText(); // string
const buffer = await resource.fetchArrayBuffer(); // ArrayBuffer
const blob = await resource.fetchBlob(); // Blob
const image = await resource.fetchImage(); // HTMLImageElement or ImageBitmap
```
### Derived Resources and Template Values
```js
import { Resource } from "cesium";
const api = new Resource({
url: "https://tiles.example.com/{version}/tiles/{z}/{x}/{y}.png",
templateValues: { version: "v2" },
headers: { "X-Api-Key": "abc123" },
});
// getDerivedResource inherits headers, proxy, and retry settings
const tile = api.getDerivedResource({
templateValues: { z: "10", x: "512", y: "384" },
});
const tileImage = await tile.fetchImage();
// Modify query parameters on an existing resource
resource.setQueryParameters({ access_token: "new-token" });
resource.appendQueryParameters({ extra: "param" });
```
### Retry and Proxy
```js
import { Resource, DefaultProxy } from "cesium";
// Retry on specific HTTP status codes
const resource = new Resource({
url: "https://api.example.com/unstable",
retryAttempts: 3,
retryCallback: (resource, error) => {
if (error.statusCode === 429) {
return new Promise((resolve) => setTimeout(() => resolve(true), 2000));
}
return false;
},
});
// DefaultProxy appends the target URL as a query parameter
const proxied = new Resource({
url: "https://external-server.com/data.json",
proxy: new DefaultProxy("/proxy/"),
});
// Request goes to: /proxy/?https%3A%2F%2Fexternal-server.com%2Fdata.json
```
### POST and PUT
```js
import { Resource } from "cesium";
const resource = new Resource({ url: "https://api.example.com/upload" });
const result = await resource.post(JSON.stringify({ name: "test" }), {
headers: { "Content-Type": "application/json" },
});
// resource.put() works the same way
```
## Color
RGBA components as floats [0.0, 1.0]. Over 140 named constants as frozen static properties (e.g., `Color.RED`, `Color.CORNFLOWERBLUE`, `Color.TRANSPARENT`).
### Creating Colors
```js
import { Color } from "cesium";
const red = Color.RED; // frozen constant
const custom = new Color(0.2, 0.6, 0.8, 1.0); // float constructor
const blue = Color.fromCssColorString("#3498db"); // hex string
const semiRed = Color.fromCssColorString("rgba(255,0,0,0.5)"); // CSS rgba()
const coral = Color.fromBytes(255, 127, 80, 255); // 0-255 bytes
const hsl = Color.fromHsl(0.58, 0.8, 0.5, 1.0); // hue/sat/light
const bright = Color.fromRandom({ // constrained random
minimumRed: 0.75, minimumGreen: 0.75, minimumBlue: 0.75, alpha: 1.0,
});
```
### Manipulation and Conversion
```js
import { Color } from "cesium";
const base = Color.fromCssColorString("#3498db");
const translucent = base.withAlpha(0.5); // new Color with alpha
const lighter = base.brighten(0.3, new Color()); // requires result param
const darker = base.darken(0.3, new Color());
const css = base.toCssColorString(); // "rgb(52,152,219)"
const hex = base.toCssHexString(); // "#3498db"
const bytes = base.toBytes(); // [52, 152, 219, 255]
const equal = Color.RED.equals(new Color(1.0, 0.0, 0.0, 1.0)); // true
```
## Event System
`Event` is the publish-subscribe mechanism used throughout CesiumJS. Classes expose Event properties like `Viewer.selectedEntityChanged` and `Cesium3DTileset.tileLoad`.
### Basic Usage
```js
import { Event } from "cesium";
const onDataReceived = new Event();
// addEventListener returns a removal function
const removeListener = onDataReceived.addEventListener((data) => {
console.log("Received:", data);
});
onDataReceived.raiseEvent({ id: 1, value: "test" }); // invoke all listeners
removeListener(); // unsubscribe
```
### EventHelper for Batch Cleanup
```js
import { EventHelper } from "cesium";
const helper = new EventHelper();
helper.add(viewer.selectedEntityChanged, (entity) => {
console.log("Selected:", entity?.name);
});
helper.add(viewer.clock.onTick, (clock) => { /* per-frame logic */ });
helper.add(viewer.scene.globe.tileLoadProgressEvent, (queueLength) => {
console.log("Tiles loading:", queueLength);
});
// Remove all listeners at once (e.g., in a destroy method)
helper.removeAll();
```
## RequestScheduler Configuration
`RequestScheduler` is a singleton that manages concurrent request limits. `Request` objects represent individual HTTP requests with priority and throttling (primarily internal).
```js
import { RequestScheduler } from "cesium";
RequestSchCesiumJS 3D Tiles - Cesium3DTileset, MVTDataProvider, styling, metadata, feature picking, voxels, point clouds, I3S, Gaussian splats, clipping planes and polygons. Use when loading 3D Tiles tilesets or Mapbox Vector Tiles as runtime 3D Tiles, styling building/vector features, querying metadata properties, working with voxels or point clouds, or clipping spatial data.
CesiumJS camera control - Camera, flyTo, lookAt, setView, ScreenSpaceCameraController, CameraEventAggregator, flight animation. Use when positioning the camera, creating flyTo animations, constraining user navigation, tracking entities, or converting between screen and world coordinates.
CustomShader authoring — vertexShaderText and fragmentShaderText against VertexInput, FragmentInput, FeatureIds, Metadata, czm_modelMaterial. Use when reading EXT_mesh_features or EXT_structural_metadata property textures/tables, vertex displacement, or shading VoxelPrimitive.
CesiumJS entities and data sources - Entity, EntityCollection, DataSource, GeoJsonDataSource, KmlDataSource, CzmlDataSource, Graphics types, Visualizers. Use when adding points, labels, models, polygons, or polylines to the map, loading GeoJSON/KML/CZML/GPX data, or working with the high-level Entity API.
CesiumJS imagery layers - ImageryProvider, ImageryLayer, ImageryLayerCollection, WMS, WMTS, Bing, OpenStreetMap, ArcGIS, Mapbox, tile discard policies. Use when adding or swapping base map layers, configuring imagery providers, layering multiple map sources, or creating split-screen imagery comparisons.
CesiumJS interaction and picking - ScreenSpaceEventHandler, multi-key KeyboardEventModifier input actions, Scene.pick, Scene.drillPick, Scene.pickPosition, mouse and touch events. Use when handling user clicks on the globe, selecting entities or 3D Tiles features, registering modifier-key shortcuts, implementing hover effects, or building drag-based interactions.
CesiumJS materials and post-processing — Material, Fabric JSON, MaterialAppearance, ImageBasedLighting, PostProcessStage, PostProcessStageLibrary, bloom, depth of field, ambient occlusion, FXAA, tonemapping, BlendingState. Use when defining Fabric materials for entities or primitives, configuring PBR image-based lighting, or adding screen-space post-processing effects.
CesiumJS models, glTF, and particle effects - Model, EdgeDisplayMode, ModelAnimation, ModelNode, ParticleSystem, emitters, GPM extensions. Use when loading glTF/GLB 3D models, controlling edge rendering, playing model animations, positioning particle effects like fire or smoke, or working with geospatial positioning metadata.