cesiumjs-imagery

Configure CesiumJS imagery providers and layers for basemaps and overlays.

112|16|Updated Mar 31, 2026
One-click install
npx skills add https://github.com/CesiumGS/cesiumjs-skills --skill cesiumjs-imagery
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: cesiumjs-imagery
Source: https://github.com/CesiumGS/cesiumjs-skills/tree/main/skills/cesiumjs-imagery
Command: npx skills add https://github.com/CesiumGS/cesiumjs-skills --skill cesiumjs-imagery

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Streamlines the creation and management of imagery layers in CesiumJS, enabling swapping base maps, layering multiple providers, and supporting split-screen comparisons for rich geospatial visualization.

Core Features & Use Cases

  • Create and configure ImageryLayer instances with provider options such as OpenStreetMap, WorldImagery, WMS/WMTS, Bing, and ArcGIS.
  • Control layer properties (alpha, brightness, contrast, splitDirection) and manage ImageryLayerCollection order for dynamic basemap composition.
  • Support advanced scenarios like split-screen comparisons, base-layer swapping, and draping imagery on 3D tiles.

Quick Start

Create a simple Cesium viewer and add a base imagery layer using OpenStreetMap, then overlay a second ImageryLayer to contrast base maps.

Frequently Asked Questions about cesiumjs-imagery

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add multiple imagery layers in CesiumJS for basemap swapping?

To add multiple imagery layers in CesiumJS, configure individual ImageryLayer instances with different providers and manage their stacking order using the ImageryLayerCollection API to enable dynamic basemap swapping.

Can I use WMS and WMTS imagery providers in CesiumJS?

Yes, CesiumJS supports WMS and WMTS imagery providers alongside UrlTemplateImageryProvider, Bing, OpenStreetMap, and ArcGIS options to configure flexible basemaps and geospatial overlays.

How do I set up split-screen imagery comparisons in CesiumJS?

Set up split-screen imagery comparisons in CesiumJS by configuring the splitDirection property on ImageryLayer instances, allowing side-by-side visualization of multiple imagery providers.

How do I control imagery layer transparency and brightness in CesiumJS?

Control imagery layer transparency and brightness in CesiumJS by adjusting dynamic layer properties including alpha, brightness, and contrast on configured ImageryLayer instances.

What is the best way to drape imagery over 3D tiles in CesiumJS?

The best way to drape imagery over 3D tiles in CesiumJS is by stacking multiple ImageryLayer providers within the ImageryLayerCollection to overlay imagery sources directly on 3D terrain and tiles.