### Model Loading and Manipulation Examples Source: https://cesium.com/learn/cesiumjs/ref-doc/Model.html Examples demonstrating how to load glTF models, position them, and control animations. ```APIDOC ## Load a model and add it to the scene ```javascript // Load a model and add it to the scene try { const model = await Cesium.Model.fromGltfAsync({ url: "../../SampleData/models/CesiumMan/Cesium_Man.glb" }); viewer.scene.primitives.add(model); } catch (error) { console.log(`Failed to load model. ${error}`); } ``` ``` ```APIDOC ## Position a model with modelMatrix and display it with a minimum size of 128 pixels ```javascript // Position a model with modelMatrix and display it with a minimum size of 128 pixels const position = Cesium.Cartesian3.fromDegrees( -123.0744619, 44.0503706, 5000.0 ); const headingPositionRoll = new Cesium.HeadingPitchRoll(); const fixedFrameTransform = Cesium.Transforms.localFrameToFixedFrameGenerator( "north", "west" ); try { const model = await Cesium.Model.fromGltfAsync({ url: "../../SampleData/models/CesiumAir/Cesium_Air.glb", modelMatrix: Cesium.Transforms.headingPitchRollToFixedFrame( position, headingPositionRoll, Cesium.Ellipsoid.WGS84, fixedFrameTransform ), minimumPixelSize: 128, }); viewer.scene.primitives.add(model); } catch (error) { console.log(`Failed to load model. ${error}`); } ``` ``` ```APIDOC ## Load a model and play the last animation at half speed ```javascript // Load a model and play the last animation at half speed let animations; try { const model = await Cesium.Model.fromGltfAsync({ url: "../../SampleData/models/CesiumMan/Cesium_Man.glb", gltfCallback: gltf => { animations = gltf.animations } }); viewer.scene.primitives.add(model); model.readyEvent.addEventListener(() => { model.activeAnimations.add({ index: animations.length - 1, loop: Cesium.ModelAnimationLoop.REPEAT, multiplier: 0.5, }); }); } catch (error) { console.log(`Failed to load model. ${error}`); } ``` ``` -------------------------------- ### Initialize Google2DImageryProvider Source: https://cesium.com/learn/cesiumjs/ref-doc/Google2DImageryProvider.html Demonstrates how to create an instance of Google2DImageryProvider using a Google API key. The first example shows a basic satellite map setup, while the second shows a styled roadmap overlay. ```javascript Cesium.GoogleMaps.defaultApiKey = "your-api-key"; const googleTilesProvider = Cesium.Google2DImageryProvider.fromUrl({ mapType: "satellite" }); ``` ```javascript Cesium.GoogleMaps.defaultApiKey = "your-api-key"; const googleTilesProvider = Cesium.Google2DImageryProvider.fromUrl({ overlayLayerType: "layerRoadmap", styles: [ { stylers: [{ hue: "#00ffe6" }, { saturation: -20 }], }, { featureType: "road", elementType: "geometry", stylers: [{ lightness: 100 }, { visibility: "simplified" }], }, ], }); ``` -------------------------------- ### PostProcessStageComposite Examples Source: https://cesium.com/learn/cesiumjs/ref-doc/PostProcessStageComposite.html Illustrative examples of how to use PostProcessStageComposite. ```APIDOC ### Examples ```javascript // Example 1: separable blur filter // The input to blurXDirection is the texture rendered to by the scene or the output of the previous stage. // The input to blurYDirection is the texture rendered to by blurXDirection. scene.postProcessStages.add(new Cesium.PostProcessStageComposite({ stages : [blurXDirection, blurYDirection] })); // Example 2: referencing the output of another post-process stage scene.postProcessStages.add(new Cesium.PostProcessStageComposite({ inputPreviousStageTexture : false, stages : [ // The same as Example 1. new Cesium.PostProcessStageComposite({ inputPreviousStageTexture : true, stages : [blurXDirection, blurYDirection], name : 'blur' }), // The input texture for this stage is the same input texture to blurXDirection since inputPreviousStageTexture is false new Cesium.PostProcessStage({ fragmentShader : compositeShader, uniforms : { blurTexture : 'blur' // The output of the composite with name 'blur' (the texture that blurYDirection rendered to). } }) ] })); // Example 3: create a uniform alias const uniforms = {}; Cesium.defineProperties(uniforms, { filterSize : { get : function() { return blurXDirection.uniforms.filterSize; }, set : function(value) { blurXDirection.uniforms.filterSize = blurYDirection.uniforms.filterSize = value; } } }); scene.postProcessStages.add(new Cesium.PostProcessStageComposite({ stages : [blurXDirection, blurYDirection], uniforms : uniforms })); ``` ``` -------------------------------- ### LabelCollection Example Source: https://cesium.com/learn/cesiumjs/ref-doc/LabelCollection.html Example of how to create a LabelCollection and add labels to it. ```APIDOC ## Example Usage ### Description This example demonstrates how to create a LabelCollection and add two labels to it. ### Code ```javascript // Create a label collection with two labels const labels = scene.primitives.add(new Cesium.LabelCollection()); labels.add({ position : new Cesium.Cartesian3(1.0, 2.0, 3.0), text : 'A label' }); labels.add({ position : new Cesium.Cartesian3(4.0, 5.0, 6.0), text : 'Another label' }); ``` ``` -------------------------------- ### getStartMousePosition(type, modifier) Source: https://cesium.com/learn/cesiumjs/ref-doc/CameraEventAggregator.html Gets the mouse position that started the aggregation. ```APIDOC ## getStartMousePosition(type, modifier) ### Description Gets the mouse position that started the aggregation. ### Method GET ### Endpoint N/A ### Parameters #### Query Parameters - **type** (CameraEventType) - Required - The camera event type. - **modifier** (KeyboardEventModifier) - Optional - The keyboard modifier. ### Request Example ```javascript // Example usage: const startPosition = cameraEventAggregator.getStartMousePosition(CameraEventType.LEFT_DOWN); ``` ### Response #### Success Response (200) - **position** (Cartesian2) - The mouse position. ``` -------------------------------- ### Static Methods: initializeTerrainHeights and isSupported Source: https://cesium.com/learn/cesiumjs/ref-doc/GroundPolylinePrimitive.html Methods to prepare the environment and check for hardware support for GroundPolylinePrimitive. ```APIDOC ## Static Method: initializeTerrainHeights ### Description Initializes the minimum and maximum terrain heights. This is required if creating the GroundPolylinePrimitive synchronously. ### Method Static ### Returns - **Promise.** - A promise that resolves once terrain heights are loaded. --- ## Static Method: isSupported ### Description Checks if the current scene supports GroundPolylinePrimitives, which requires the WEBGL_depth_texture extension. ### Method Static ### Parameters #### Path Parameters - **scene** (Scene) - Required - The current scene instance. ### Returns - **boolean** - True if supported, false otherwise. ``` -------------------------------- ### isMoving(type, modifier) Source: https://cesium.com/learn/cesiumjs/ref-doc/CameraEventAggregator.html Gets if a mouse button down or touch has started and has been moved. ```APIDOC ## isMoving(type, modifier) ### Description Gets if a mouse button down or touch has started and has been moved. ### Method GET ### Endpoint N/A ### Parameters #### Query Parameters - **type** (CameraEventType) - Required - The camera event type. - **modifier** (KeyboardEventModifier) - Optional - The keyboard modifier. ### Request Example ```javascript // Example usage: const moving = cameraEventAggregator.isMoving(CameraEventType.MOUSE_MOVE); ``` ### Response #### Success Response (200) - **isMoving** (boolean) - Returns `true` if a mouse button down or touch has started and has been moved; otherwise, `false`. ``` -------------------------------- ### Create ImageryLayer from Async Provider Source: https://cesium.com/learn/cesiumjs/ref-doc/ImageryLayer.html Demonstrates how to initialize an ImageryLayer using a promise-based imagery provider. Includes examples for base layer configuration, transparency settings, and error event handling. ```javascript const viewer = new Cesium.Viewer("cesiumContainer", { baseLayer: Cesium.ImageryLayer.fromProviderAsync(Cesium.IonImageryProvider.fromAssetId(3812)); }); const imageryLayer = Cesium.ImageryLayer.fromProviderAsync(Cesium.IonImageryProvider.fromAssetId(3812)); imageryLayer.alpha = 0.5; viewer.imageryLayers.add(imageryLayer); imageryLayer.readyEvent.addEventListener(provider => { imageryLayer.imageryProvider.errorEvent.addEventListener(error => { alert(`Encountered an error while loading imagery tiles! ${error}`); }); }); ``` -------------------------------- ### Initialize LabelGraphics with Options Source: https://cesium.com/learn/cesiumjs/ref-doc/LabelGraphics.html Demonstrates how to create a new LabelGraphics instance, optionally providing an object with initialization options to configure the label's properties. ```javascript new Cesium.LabelGraphics(options) ``` -------------------------------- ### isButtonDown(type, modifier) Source: https://cesium.com/learn/cesiumjs/ref-doc/CameraEventAggregator.html Gets whether the mouse button is down or a touch has started. ```APIDOC ## isButtonDown(type, modifier) ### Description Gets whether the mouse button is down or a touch has started. ### Method GET ### Endpoint N/A ### Parameters #### Query Parameters - **type** (CameraEventType) - Required - The camera event type. - **modifier** (KeyboardEventModifier) - Optional - The keyboard modifier. ### Request Example ```javascript // Example usage: const isDown = cameraEventAggregator.isButtonDown(CameraEventType.LEFT_DOWN); ``` ### Response #### Success Response (200) - **isDown** (boolean) - Whether the mouse button is down or a touch has started. ``` -------------------------------- ### Initialize GoogleEarthEnterpriseMapsProvider Source: https://cesium.com/learn/cesiumjs/ref-doc/GoogleEarthEnterpriseMapsProvider.html Demonstrates how to asynchronously create an instance of the provider using the fromUrl factory method with a base URL and channel ID. ```javascript const google = await Cesium.GoogleEarthEnterpriseMapsProvider.fromUrl("https://earth.localdomain", 1008); ``` -------------------------------- ### getButtonPressTime(type, modifier) Source: https://cesium.com/learn/cesiumjs/ref-doc/CameraEventAggregator.html Gets the time the button was pressed or the touch was started. ```APIDOC ## getButtonPressTime(type, modifier) ### Description Gets the time the button was pressed or the touch was started. ### Method GET ### Endpoint N/A ### Parameters #### Query Parameters - **type** (CameraEventType) - Required - The camera event type. - **modifier** (KeyboardEventModifier) - Optional - The keyboard modifier. ### Request Example ```javascript // Example usage: const pressTime = cameraEventAggregator.getButtonPressTime(CameraEventType.LEFT_DOWN, KeyboardEventModifier.SHIFT); ``` ### Response #### Success Response (200) - **date** (Date) - The time the button was pressed or the touch was started. ``` -------------------------------- ### getMovement(type, modifier) Source: https://cesium.com/learn/cesiumjs/ref-doc/CameraEventAggregator.html Gets the aggregated start and end position of the current event. ```APIDOC ## getMovement(type, modifier) ### Description Gets the aggregated start and end position of the current event. ### Method GET ### Endpoint N/A ### Parameters #### Query Parameters - **type** (CameraEventType) - Required - The camera event type. - **modifier** (KeyboardEventModifier) - Optional - The keyboard modifier. ### Request Example ```javascript // Example usage: const movement = cameraEventAggregator.getMovement(CameraEventType.MOUSE_MOVE); ``` ### Response #### Success Response (200) - **movement** (object) - An object with two `Cartesian2` properties: `startPosition` and `endPosition`. ``` -------------------------------- ### Initialize MapboxStyleImageryProvider Source: https://cesium.com/learn/cesiumjs/ref-doc/MapboxStyleImageryProvider.html Demonstrates how to instantiate the MapboxStyleImageryProvider by providing a style ID and a valid Mapbox access token. ```javascript const mapbox = new Cesium.MapboxStyleImageryProvider({ styleId: 'streets-v11', accessToken: 'thisIsMyAccessToken' }); ``` -------------------------------- ### getLastMovement(type, modifier) Source: https://cesium.com/learn/cesiumjs/ref-doc/CameraEventAggregator.html Gets the start and end position of the last move event (not the aggregated event). ```APIDOC ## getLastMovement(type, modifier) ### Description Gets the start and end position of the last move event (not the aggregated event). ### Method GET ### Endpoint N/A ### Parameters #### Query Parameters - **type** (CameraEventType) - Required - The camera event type. - **modifier** (KeyboardEventModifier) - Optional - The keyboard modifier. ### Request Example ```javascript // Example usage: const lastMovement = cameraEventAggregator.getLastMovement(CameraEventType.MOUSE_MOVE); ``` ### Response #### Success Response (200) - **movement** (object|undefined) - An object with two `Cartesian2` properties: `startPosition` and `endPosition` or `undefined`. ``` -------------------------------- ### Initialize imagery with GetFeatureInfo support Source: https://cesium.com/learn/cesiumjs/ref-doc/WebMapTileServiceImageryProvider.html Enables feature picking by providing a getFeatureInfoUrl template. ```javascript // Example 4. Digital Earth AfricA waterbodies with GetFeatureInfo support (RESTful) const waterbodies = new Cesium.WebMapTileServiceImageryProvider({ url: "https://geoserver.digitalearth.africa/geoserver/gwc/service/wmts/rest/{layer}/{style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}?format={format}", layer: "waterbodies:DEAfrica_Waterbodies", style: "waterbodies:waterbodies_v0_0_4", tileMatrixSetID: "EPSG:3857", tileMatrixLabels: [ "EPSG:3857:0", "EPSG:3857:1", "EPSG:3857:2", "EPSG:3857:3", "EPSG:3857:4", "EPSG:3857:5", "EPSG:3857:6", "EPSG:3857:7", "EPSG:3857:8", "EPSG:3857:9", "EPSG:3857:10", "EPSG:3857:11", "EPSG:3857:12", "EPSG:3857:13", "EPSG:3857:14", "EPSG:3857:15", "EPSG:3857:16", "EPSG:3857:17", "EPSG:3857:18", "EPSG:3857:19", "EPSG:3857:20", "EPSG:3857:21", "EPSG:3857:22", "EPSG:3857:23", "EPSG:3857:24", "EPSG:3857:25", "EPSG:3857:26", "EPSG:3857:27", "EPSG:3857:28", "EPSG:3857:29", "EPSG:3857:30", ], format: "image/png", enablePickFeatures: true, getFeatureInfoUrl: "https://geoserver.digitalearth.africa/geoserver/gwc/service/wmts/rest/{layer}/{style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}/{j}/{i}?format={format}", }); viewer.imageryLayers.addImageryProvider(waterbodies); ``` -------------------------------- ### Add Event Listener for Model Animation Start Source: https://cesium.com/learn/cesiumjs/ref-doc/ModelAnimation.html This example demonstrates how to add an event listener to the 'start' event of a ModelAnimation. This listener will be triggered when the animation begins playing, allowing for custom actions such as logging or initiating other processes. ```javascript animation.start.addEventListener(function(model, animation) { console.log(`Animation started: ${animation.name}`); }); ``` -------------------------------- ### anyButtonDown Member Source: https://cesium.com/learn/cesiumjs/ref-doc/CameraEventAggregator.html Gets a boolean value indicating whether any mouse button is currently down, a touch event has started, or the mouse wheel has been moved. ```APIDOC ## anyButtonDown ### Description Gets whether any mouse button is down, a touch has started, or the wheel has been moved. ### Type boolean ``` -------------------------------- ### Initialize GoogleStreetViewCubeMapPanoramaProvider Source: https://cesium.com/learn/cesiumjs/ref-doc/GoogleStreetViewCubeMapPanoramaProvider.html Demonstrates how to instantiate the provider using the static fromUrl method with a valid Google Street View Static API key. ```javascript const provider = await Cesium.GoogleStreetViewCubeMapPanoramaProvider.fromUrl({ key: 'your Google Streetview Static api key' }); ``` -------------------------------- ### Schedule a Task with TaskProcessor Source: https://cesium.com/learn/cesiumjs/ref-doc/TaskProcessor.html Demonstrates how to instantiate a TaskProcessor and schedule a task. It includes a check to handle cases where the maximum number of active tasks has been reached. ```javascript const taskProcessor = new Cesium.TaskProcessor('myWorkerPath'); const promise = taskProcessor.scheduleTask({ someParameter : true, another : 'hello' }); if (!Cesium.defined(promise)) { // too many active tasks - try again later } else { promise.then(function(result) { // use the result of the task }); } ``` -------------------------------- ### Create MaterialAppearance with Color Source: https://cesium.com/learn/cesiumjs/ref-doc/MaterialAppearance.html This example demonstrates how to create a Primitive with a WallGeometry and a MaterialAppearance. The appearance is configured with a 'Color' material and faceForward enabled for proper shading. ```javascript const primitive = new Cesium.Primitive({ geometryInstances : new Cesium.GeometryInstance({ geometry : new Cesium.WallGeometry({ materialSupport : Cesium.MaterialAppearance.MaterialSupport.BASIC.vertexFormat, // ... }) }), appearance : new Cesium.MaterialAppearance({ material : Cesium.Material.fromType('Color'), faceForward : true }) }); ``` -------------------------------- ### allowDataSourcesToSuspendAnimation Source: https://cesium.com/learn/cesiumjs/ref-doc/CesiumWidget.html Gets or sets whether or not data sources can temporarily pause animation in order to avoid showing an incomplete picture to the user. For example, if asynchronous primitives are being processed in the background, the clock will not advance until the geometry is ready. ```APIDOC #### allowDataSourcesToSuspendAnimation : boolean Gets or sets whether or not data sources can temporarily pause animation in order to avoid showing an incomplete picture to the user. For example, if asynchronous primitives are being processed in the background, the clock will not advance until the geometry is ready. ``` -------------------------------- ### Pack and Unpack CoplanarPolygonGeometry Source: https://cesium.com/learn/cesiumjs/ref-doc/CoplanarPolygonGeometry.html Provides examples for packing a CoplanarPolygonGeometry instance into an array and unpacking it back into an instance. The pack method stores the geometry's data into a provided array starting at a specified index, while unpack retrieves this data to reconstruct the geometry. ```javascript // Pack the geometry const array = []; Cesium.CoplanarPolygonGeometry.pack(polygonGeometry, array); // Unpack the geometry const unpackedGeometry = Cesium.CoplanarPolygonGeometry.unpack(array); ``` -------------------------------- ### Example: Compute Viewport Transformation Source: https://cesium.com/learn/cesiumjs/ref-doc/Matrix4.html Demonstrates creating a viewport transformation matrix using an explicit viewport and depth range. ```javascript // Create viewport transformation using an explicit viewport and depth range. const m = Cesium.Matrix4.computeViewportTransformation({ x : 0.0, y : 0.0, width : 1024.0, height : 768.0 }, 0.0, 1.0, new Cesium.Matrix4()); ``` -------------------------------- ### Initialize and Use BufferPolylineCollection Source: https://cesium.com/learn/cesiumjs/ref-doc/BufferPolylineCollection.html Demonstrates how to create a BufferPolylineCollection with specified capacities, add new polylines with custom materials and positions, and iterate through the collection to update their materials. ```javascript const collection = new BufferPolylineCollection({ primitiveCountMax: 1024, vertexCountMax: 4096, }); const polyline = new BufferPolyline(); const material = new BufferPolylineMaterial({color: Color.WHITE}); // Create a new polyline, temporarily bound to 'polyline' local variable. collection.add({ positions: new Float64Array([ ... ]), material, }, polyline); // Iterate over all polylines in collection, temporarily binding 'polyline' // local variable to each, and updating polyline material. for (let i = 0; i < collection.primitiveCount; i++) { collection.get(i, polyline); polyline.setMaterial(material); } ``` -------------------------------- ### Add a Model Animation in JavaScript Source: https://cesium.com/learn/cesiumjs/ref-doc/ModelAnimationCollection.html This example illustrates how to create and add a new animation to a model's active animations using the `add` method. It shows how to specify animation properties such as name, start time, duration, playback speed multiplier, and looping behavior. The method returns the newly created ModelAnimation object and can throw errors if animations are not loaded or if parameters are invalid. ```javascript var animation = model.activeAnimations.add({ name: 'animationName', startTime: JulianDate.fromIso8601("2023-01-01T00:00:00.0Z"), stopTime: JulianDate.fromIso8601("2023-01-01T00:10:00.0Z"), loop: ModelAnimationLoop.REPEAT, multiplier: 1.5 }); ``` -------------------------------- ### Initialize WebMapServiceImageryProvider Source: https://cesium.com/learn/cesiumjs/ref-doc/WebMapServiceImageryProvider.html Instantiate a WebMapServiceImageryProvider with WMS server details and add it to the viewer's imagery layers. Ensure a proxy is configured if the WMS server is not on the same origin. ```javascript // WMS servers operated by the US government https://apps.nationalmap.gov/services/ const provider = new Cesium.WebMapServiceImageryProvider({ url : 'https://basemap.nationalmap.gov:443/arcgis/services/USGSHydroCached/MapServer/WMSServer', layers : '0', proxy: new Cesium.DefaultProxy('/proxy/') }); const imageryLayer = new Cesium.ImageryLayer(provider); viewer.imageryLayers.add(imageryLayer); ``` -------------------------------- ### Create TileMapServiceImageryProvider from URL Source: https://cesium.com/learn/cesiumjs/ref-doc/TileMapServiceImageryProvider.html Demonstrates how to initialize a TileMapServiceImageryProvider using a base URL and configuration options such as file extension, maximum level, and geographic bounds. ```javascript const tms = await Cesium.TileMapServiceImageryProvider.fromUrl( '../images/cesium_maptiler/Cesium_Logo_Color', { fileExtension: 'png', maximumLevel: 4, rectangle: new Cesium.Rectangle( Cesium.Math.toRadians(-120.0), Cesium.Math.toRadians(20.0), Cesium.Math.toRadians(-60.0), Cesium.Math.toRadians(40.0)) }); ``` -------------------------------- ### Initialize a PerspectiveFrustum Source: https://cesium.com/learn/cesiumjs/ref-doc/PerspectiveFrustum.html Demonstrates how to instantiate a new PerspectiveFrustum object by providing field of view, aspect ratio, and near/far clipping plane distances. ```javascript const frustum = new Cesium.PerspectiveFrustum({ fov : Cesium.Math.PI_OVER_THREE, aspectRatio : canvas.clientWidth / canvas.clientHeight, near : 1.0, far : 1000.0 }); ``` -------------------------------- ### GET /fetchXML Source: https://cesium.com/learn/cesiumjs/ref-doc/Resource.html Creates a Resource and performs a GET request to fetch XML content from a URL. ```APIDOC ## GET Cesium.Resource.fetchXML ### Description Creates a Resource and calls fetchXML() on it to retrieve XML data from a specified URL. ### Method GET ### Endpoint Cesium.Resource.fetchXML(options) ### Parameters #### Request Body - **url** (string) - Required - The url of the resource. - **headers** (object) - Optional - Additional HTTP headers. ### Response #### Success Response (200) - **Promise.** - A promise that resolves to the requested XML document. ``` -------------------------------- ### Configure Cesium Viewer with PeliasGeocoderService Source: https://cesium.com/learn/cesiumjs/ref-doc/PeliasGeocoderService.html This example demonstrates how to initialize a Cesium Viewer and configure it to use the PeliasGeocoderService. It requires the Pelias server URL and an API key for authentication. The service is then passed as a geocoder option to the Viewer constructor. ```javascript const viewer = new Cesium.Viewer('cesiumContainer', { geocoder: new Cesium.PeliasGeocoderService(new Cesium.Resource({ url: 'https://api.geocode.earth/v1/', queryParameters: { api_key: '' } })) }); ``` -------------------------------- ### GET /fetchText Source: https://cesium.com/learn/cesiumjs/ref-doc/Resource.html Creates a Resource and performs a GET request to fetch text content from a URL. ```APIDOC ## GET Cesium.Resource.fetchText ### Description Creates a Resource and calls fetchText() on it to retrieve text data from a specified URL. ### Method GET ### Endpoint Cesium.Resource.fetchText(options) ### Parameters #### Request Body - **url** (string) - Required - The url of the resource. - **queryParameters** (object) - Optional - Query parameters to be sent. - **headers** (object) - Optional - Additional HTTP headers. ### Response #### Success Response (200) - **Promise.** - A promise that resolves to the requested text data. ``` -------------------------------- ### VRTheWorldTerrainProvider Constructor Options Source: https://cesium.com/learn/cesiumjs/ref-doc/VRTheWorldTerrainProvider.html Initialization options for the VRTheWorldTerrainProvider constructor. ```APIDOC ## Cesium.VRTheWorldTerrainProvider.ConstructorOptions ### Description Initialization options for the VRTheWorldTerrainProvider constructor. ### Method N/A (This describes constructor options) ### Endpoint N/A ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body None ### Request Example ```javascript const viewer = new Cesium.Viewer('cesiumContainer', { terrainProvider: new Cesium.VRTheWorldTerrainProvider({ ellipsoid: Cesium.Ellipsoid.WGS84, credit: 'My Data Source Credit' }) }); ``` ### Response N/A (This describes options, not a response) ### Properties #### `ellipsoid` - **Ellipsoid** - Optional - The ellipsoid. If not specified, the default ellipsoid is used. #### `credit` - **Credit** | **string** - Optional - A credit for the data source, which is displayed on the canvas. ``` -------------------------------- ### Initialize UrlTemplateImageryProvider with Different Imagery Sources Source: https://cesium.com/learn/cesiumjs/ref-doc/UrlTemplateImageryProvider.html Demonstrates how to initialize the UrlTemplateImageryProvider with various imagery sources, including Natural Earth II (TMS), CartoDB Positron (OSM-like), a Web Map Service (WMS), and a custom URL template with user-defined tags. This covers different tiling schemes and data sources. ```javascript const tms = new Cesium.UrlTemplateImageryProvider({ url : Cesium.buildModuleUrl('Assets/Textures/NaturalEarthII') + '/{z}/{x}/{reverseY}.jpg', tilingScheme : new Cesium.GeographicTilingScheme(), maximumLevel : 5 }); const positron = new Cesium.UrlTemplateImageryProvider({ url : 'http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', credit : 'Map tiles by CartoDB, under CC BY 3.0. Data by OpenStreetMap, under ODbL.' }); const wms = new Cesium.UrlTemplateImageryProvider({ url : 'https://services.ga.gov.au/gis/services/NM_Hydrology_and_Marine_Points/MapServer/WMSServer?' + 'tiled=true&transparent=true&format=image%2Fpng&exceptions=application%2Fvnd.ogc.se_xml&' + 'styles=&service=WMS&version=1.3.0&request=GetMap&' + 'layers=Bores&crs=EPSG%3A3857&' + 'bbox={westProjected}%2C{southProjected}%2C{eastProjected}%2C{northProjected}&' + 'width=256&height=256', rectangle : Cesium.Rectangle.fromDegrees(95.0, -55.0, 170.0, -1.0) }); const custom = new Cesium.UrlTemplateImageryProvider({ url : 'https://yoururl/{Time}/{z}/{y}/{x}.png', customTags : { Time: function(imageryProvider, x, y, level) { return '20171231' } } }); ``` -------------------------------- ### resolutionScale Source: https://cesium.com/learn/cesiumjs/ref-doc/CesiumWidget.html Gets or sets a scaling factor for rendering resolution. Values less than 1.0 can improve performance on less powerful devices while values greater than 1.0 will render at a higher resolution and then scale down, resulting in improved visual fidelity. For example, if the widget is laid out at a size of 640x480, setting this value to 0.5 will cause the scene to be rendered at 320x240 and then scaled up while setting it to 2.0 will cause the scene to be rendered at 1280x960 and then scaled down. Default Value: `1.0` ```APIDOC #### resolutionScale : number Gets or sets a scaling factor for rendering resolution. Values less than 1.0 can improve performance on less powerful devices while values greater than 1.0 will render at a higher resolution and then scale down, resulting in improved visual fidelity. For example, if the widget is laid out at a size of 640x480, setting this value to 0.5 will cause the scene to be rendered at 320x240 and then scaled up while setting it to 2.0 will cause the scene to be rendered at 1280x960 and then scaled down. Default Value: `1.0` ``` -------------------------------- ### Resolution Scale Source: https://cesium.com/learn/cesiumjs/ref-doc/Viewer.html Gets or sets a scaling factor for rendering resolution. Values less than 1.0 can improve performance on less powerful devices while values greater than 1.0 will render at a higher resolution and then scale down, resulting in improved visual fidelity. For example, if the widget is laid out at a size of 640x480, setting this value to 0.5 will cause the scene to be rendered at 320x240 and then scaled up while setting it to 2.0 will cause the scene to be rendered at 1280x960 and then scaled down. Default Value: `1.0` ```APIDOC ## resolutionScale : number ### Description Gets or sets a scaling factor for rendering resolution. Values less than 1.0 can improve performance on less powerful devices while values greater than 1.0 will render at a higher resolution and then scale down, resulting in improved visual fidelity. For example, if the widget is laid out at a size of 640x480, setting this value to 0.5 will cause the scene to be rendered at 320x240 and then scaled up while setting it to 2.0 will cause the scene to be rendered at 1280x960 and then scaled down. ### Default Value `1.0` ### Type number ``` -------------------------------- ### Create GoogleEarthEnterpriseImageryProvider from Metadata (JavaScript) Source: https://cesium.com/learn/cesiumjs/ref-doc/GoogleEarthEnterpriseImageryProvider.html This snippet demonstrates how to create an instance of GoogleEarthEnterpriseImageryProvider by first fetching metadata from a URL and then using that metadata to initialize the provider. This is the recommended way to construct the provider, as the constructor should not be called directly. ```javascript const geeMetadata = await GoogleEarthEnterpriseMetadata.fromUrl("http://www.example.com"); const gee = Cesium.GoogleEarthEnterpriseImageryProvider.fromMetadata(geeMetadata); ``` -------------------------------- ### Create GUID Source: https://cesium.com/learn/cesiumjs/ref-doc/global.html Generates a Globally Unique Identifier (GUID) string. This is useful for ensuring unique identification across different systems or instances. ```javascript this.guid = Cesium.createGuid(); ``` -------------------------------- ### Initialize GeometryInstance with Show Attribute Source: https://cesium.com/learn/cesiumjs/ref-doc/ShowGeometryInstanceAttribute.html Demonstrates how to create a GeometryInstance with a specific show attribute, allowing the geometry to be hidden or shown by default. ```javascript const instance = new Cesium.GeometryInstance({ geometry : new Cesium.BoxGeometry({ vertexFormat : Cesium.VertexFormat.POSITION_AND_NORMAL, minimum : new Cesium.Cartesian3(-250000.0, -250000.0, -250000.0), maximum : new Cesium.Cartesian3(250000.0, 250000.0, 250000.0) }), modelMatrix : Cesium.Matrix4.multiplyByTranslation(Cesium.Transforms.eastNorthUpToFixedFrame( Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883)), new Cesium.Cartesian3(0.0, 0.0, 1000000.0), new Cesium.Matrix4()), id : 'box', attributes : { show : new Cesium.ShowGeometryInstanceAttribute(false) } }); ``` -------------------------------- ### Create Matrix3 from Array Source: https://cesium.com/learn/cesiumjs/ref-doc/Matrix3.html Creates a Matrix3 from nine consecutive numbers in an array, assuming column-major order. Specify a starting index if the matrix elements do not begin at the start of the array. ```javascript const array = [1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0]; const matrix = Cesium.Matrix3.fromArray(array); // matrix is equivalent to: // Cesium.Matrix3( // 1.0, 4.0, 7.0, // 2.0, 5.0, 8.0, // 3.0, 6.0, 9.0 // ); ``` -------------------------------- ### Create VRTheWorldTerrainProvider from URL (JavaScript) Source: https://cesium.com/learn/cesiumjs/ref-doc/VRTheWorldTerrainProvider.html Creates a VRTheWorldTerrainProvider instance by fetching terrain data from a specified URL. This is the recommended way to instantiate the provider, as direct constructor calls are not supported. It returns a Promise that resolves with the terrain provider. ```javascript const terrainProvider = await Cesium.VRTheWorldTerrainProvider.fromUrl( "https://www.vr-theworld.com/vr-theworld/tiles1.0.0/73/" ); viewer.terrainProvider = terrainProvider; ``` -------------------------------- ### Scene Source: https://cesium.com/learn/cesiumjs/ref-doc/Viewer.html Gets the scene. ```APIDOC ## readonly scene : Scene ### Description Gets the scene. ### Type Scene ``` -------------------------------- ### Create and Populate BufferPointCollection Source: https://cesium.com/learn/cesiumjs/ref-doc/BufferPointCollection.html Demonstrates how to create a BufferPointCollection with a specified maximum primitive count, add new points with positions and materials, and iterate over existing points to update their materials. ```javascript const collection = new BufferPointCollection({primitiveCountMax: 1024}); const point = new BufferPoint(); const material = new BufferPointMaterial({color: Color.WHITE}); // Create a new point, temporarily bound to 'point' local variable. collection.add({ position: new Cartesian3(0.0, 0.0, 0.0), material }, point); // Iterate over all points in collection, temporarily binding 'point' // local variable to each, and updating point material. for (let i = 0; i < collection.primitiveCount; i++) { collection.get(i, point); point.setMaterial(material); } ``` -------------------------------- ### scene Source: https://cesium.com/learn/cesiumjs/ref-doc/CesiumWidget.html Gets the scene. ```APIDOC #### readonly scene : Scene Gets the scene. ``` -------------------------------- ### clock Source: https://cesium.com/learn/cesiumjs/ref-doc/CesiumWidget.html Gets the clock. ```APIDOC #### readonly clock : Clock Gets the clock. ``` -------------------------------- ### Initialize OpenStreetMapImageryProvider Source: https://cesium.com/learn/cesiumjs/ref-doc/OpenStreetMapImageryProvider.html Shows the configuration options for initializing an OpenStreetMap imagery provider, including server URL, file extension, and level-of-detail constraints. ```javascript const osmProvider = new Cesium.OpenStreetMapImageryProvider({ url: 'https://tile.openstreetmap.org', fileExtension: 'png', minimumLevel: 0, maximumLevel: 18, retinaTiles: true }); ``` -------------------------------- ### Example: Edge Detection with Multiple Silhouettes (JavaScript) Source: https://cesium.com/learn/cesiumjs/ref-doc/PostProcessStageLibrary.html Demonstrates how to create and apply multiple edge detection stages with different colors to highlight specific features. This example shows the creation of yellow and green edge detection stages, each assigned to different features, and then combines them using createSilhouetteStage. ```javascript const yellowEdge = Cesium.PostProcessStageLibrary.createEdgeDetectionStage(); yellowEdge.uniforms.color = Cesium.Color.YELLOW; yellowEdge.selected = [feature0]; const greenEdge = Cesium.PostProcessStageLibrary.createEdgeDetectionStage(); greenEdge.uniforms.color = Cesium.Color.LIME; greenEdge.selected = [feature1]; // draw edges around feature0 and feature1 postProcessStages.add(Cesium.PostProcessStageLibrary.createSilhouetteStage([yellowEdge, greenEdge])); ``` -------------------------------- ### canvas Source: https://cesium.com/learn/cesiumjs/ref-doc/CesiumWidget.html Gets the canvas. ```APIDOC #### readonly canvas : HTMLCanvasElement Gets the canvas. ``` -------------------------------- ### camera Source: https://cesium.com/learn/cesiumjs/ref-doc/CesiumWidget.html Gets the camera. ```APIDOC #### readonly camera : Camera Gets the camera. ``` -------------------------------- ### Static Method: fromUrl Source: https://cesium.com/learn/cesiumjs/ref-doc/GoogleEarthEnterpriseMapsProvider.html Initializes a new GoogleEarthEnterpriseMapsProvider instance from a specified server URL and channel ID. ```APIDOC ## Static Method: fromUrl ### Description Creates a new GoogleEarthEnterpriseMapsProvider instance. This is the recommended way to instantiate the provider instead of calling the constructor directly. ### Method Static Async Method ### Parameters #### Arguments - **url** (String) - Required - The base URL of the Google Earth Enterprise server. - **channel** (Number) - Required - The imagery channel (id) to request from the server. ### Request Example ```javascript const google = await Cesium.GoogleEarthEnterpriseMapsProvider.fromUrl("https://earth.localdomain", 1008); ``` ### Response #### Success Response - **provider** (GoogleEarthEnterpriseMapsProvider) - An initialized instance of the imagery provider. ### Error Handling - **RuntimeError**: Thrown if the layer with the specified channel cannot be found. - **RuntimeError**: Thrown if no version is found for the specified channel. - **RuntimeError**: Thrown if the projection is unsupported. ``` -------------------------------- ### Timeline Source: https://cesium.com/learn/cesiumjs/ref-doc/Viewer.html Gets the Timeline widget. ```APIDOC ## readonly timeline : Timeline ### Description Gets the Timeline widget. ### Type Timeline ``` -------------------------------- ### Geocoder Source: https://cesium.com/learn/cesiumjs/ref-doc/Viewer.html Gets the Geocoder widget. ```APIDOC ## readonly geocoder : Geocoder ### Description Gets the Geocoder widget. ### Type Geocoder ``` -------------------------------- ### I3SDataProvider Constructor Options Example Source: https://cesium.com/learn/cesiumjs/ref-doc/I3SDataProvider.html Demonstrates how to initialize Cesium.I3SDataProvider with custom Cesium3DTileset options, such as adjusting the maximum screen space error for Level of Detail (LOD) or setting a custom outline color for symbology. ```javascript // Increase LOD by reducing SSE const cesium3dTilesetOptions = { maximumScreenSpaceError: 1, }; const i3sOptions = { cesium3dTilesetOptions: cesium3dTilesetOptions, }; // Set a custom outline color to replace the color defined in I3S symbology const cesium3dTilesetOptionsOutline = { outlineColor: Cesium.Color.BLUE, }; const i3sOptionsOutline = { cesium3dTilesetOptions: cesium3dTilesetOptionsOutline, applySymbology: true, }; ``` -------------------------------- ### creditViewport Source: https://cesium.com/learn/cesiumjs/ref-doc/CesiumWidget.html Gets the credit viewport. ```APIDOC #### readonly creditViewport : Element Gets the credit viewport. ``` -------------------------------- ### WebMercatorTilingScheme Constructor Source: https://cesium.com/learn/cesiumjs/ref-doc/WebMercatorTilingScheme.html Initializes a new instance of the WebMercatorTilingScheme class. This constructor can be called with an optional options object to configure the tiling scheme. ```APIDOC ## new Cesium.WebMercatorTilingScheme(options) ### Description Initializes a new instance of the WebMercatorTilingScheme class. ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body None ### Parameters * `options` (object, optional) - Object with the following properties: * `ellipsoid` (Ellipsoid, optional) - The ellipsoid whose surface is being tiled. Defaults to the default ellipsoid. * `numberOfLevelZeroTilesX` (number, optional) - The number of tiles in the X direction at level zero of the tile tree. Defaults to 1. * `numberOfLevelZeroTilesY` (number, optional) - The number of tiles in the Y direction at level zero of the tile tree. Defaults to 1. * `rectangleSouthwestInMeters` (Cartesian2, optional) - The southwest corner of the rectangle covered by the tiling scheme, in meters. If this parameter or `rectangleNortheastInMeters` is not specified, the entire globe is covered in the longitude direction and an equal distance is covered in the latitude direction, resulting in a square projection. * `rectangleNortheastInMeters` (Cartesian2, optional) - The northeast corner of the rectangle covered by the tiling scheme, in meters. If this parameter or `rectangleSouthwestInMeters` is not specified, the entire globe is covered in the longitude direction and an equal distance is covered in the latitude direction, resulting in a square projection. ### Request Example ```javascript // Example usage with options const tilingScheme = new Cesium.WebMercatorTilingScheme({ ellipsoid: Cesium.Ellipsoid.WGS84, numberOfLevelZeroTilesX: 2, numberOfLevelZeroTilesY: 2 }); ``` ### Response None (constructor) ``` -------------------------------- ### creditContainer Source: https://cesium.com/learn/cesiumjs/ref-doc/CesiumWidget.html Gets the credit container. ```APIDOC #### readonly creditContainer : Element Gets the credit container. ``` -------------------------------- ### Initialize and Configure a CompositeProperty Source: https://cesium.com/learn/cesiumjs/ref-doc/CompositeProperty.html Demonstrates how to instantiate a CompositeProperty and populate it with multiple time intervals, each associated with a different property instance. This allows for seamless switching between property behaviors based on the provided ISO8601 time ranges. ```javascript const constantProperty = ...; const sampledProperty = ...; const composite = new Cesium.CompositeProperty(); composite.intervals.addInterval(Cesium.TimeInterval.fromIso8601({ iso8601 : '2012-08-01T00:00:00.00Z/2012-08-01T12:00:00.00Z', data : constantProperty })); composite.intervals.addInterval(Cesium.TimeInterval.fromIso8601({ iso8601 : '2012-08-01T12:00:00.00Z/2012-08-02T00:00:00.00Z', isStartIncluded : false, isStopIncluded : false, data : sampledProperty })); ``` -------------------------------- ### container Source: https://cesium.com/learn/cesiumjs/ref-doc/CesiumWidget.html Gets the parent container. ```APIDOC #### readonly container : Element Gets the parent container. ``` -------------------------------- ### Constructor: new Cesium.KmlTourFlyTo Source: https://cesium.com/learn/cesiumjs/ref-doc/KmlTourFlyTo.html Initializes a new KmlTourFlyTo instance to facilitate camera transitions in a KML tour. ```APIDOC ## Constructor: new Cesium.KmlTourFlyTo(duration, flyToMode, view) ### Description Transitions the KmlTour to the next destination using a specified flyToMode over a given number of seconds. ### Parameters #### Path Parameters - **duration** (number) - Required - The duration of the entry in seconds. - **flyToMode** (string) - Required - The KML fly to mode (e.g., 'bounce', 'smooth'). - **view** (KmlCamera | KmlLookAt) - Required - The target view definition. ### Request Example new Cesium.KmlTourFlyTo(5.0, 'smooth', cameraView); ``` -------------------------------- ### Initialize Cesium Materials Source: https://cesium.com/learn/cesiumjs/ref-doc/Material.html Demonstrates creating materials using the fromType method, the default constructor, and full Fabric JSON notation. ```javascript // Create a color material with fromType: polygon.material = Cesium.Material.fromType('Color'); polygon.material.uniforms.color = new Cesium.Color(1.0, 1.0, 0.0, 1.0); // Create the default material: polygon.material = new Cesium.Material(); // Create a color material with full Fabric notation: polygon.material = new Cesium.Material({ fabric: { type: 'Color', uniforms: { color: new Cesium.Color(1.0, 1.0, 0.0, 1.0) } } }); ``` -------------------------------- ### globe Source: https://cesium.com/learn/cesiumjs/ref-doc/Scene.html Gets or sets the depth-test ellipsoid. ```APIDOC ## globe : Globe ### Description Gets or sets the depth-test ellipsoid. ``` -------------------------------- ### VR Button Source: https://cesium.com/learn/cesiumjs/ref-doc/Viewer.html Gets the VRButton widget. ```APIDOC ## readonly vrButton : VRButton ### Description Gets the VRButton. ### Type VRButton ``` -------------------------------- ### Configure Dynamic Environment Mapping Source: https://cesium.com/learn/cesiumjs/ref-doc/DynamicEnvironmentMapManager.html Demonstrates how to enable time-of-day environment mapping in a scene and adjust the intensity of atmospheric scattering to influence model lighting. ```javascript scene.atmosphere.dynamicLighting = Cesium.DynamicAtmosphereLightingType.SUNLIGHT; scene.light.intensity = 0.5; const environmentMapManager = tileset.environmentMapManager; environmentMapManager.atmosphereScatteringIntensity = 3.0; ``` -------------------------------- ### Projection Picker Source: https://cesium.com/learn/cesiumjs/ref-doc/Viewer.html Gets the ProjectionPicker widget. ```APIDOC ## readonly projectionPicker : ProjectionPicker ### Description Gets the ProjectionPicker widget. ### Type ProjectionPicker ``` -------------------------------- ### Static Method: fromUrl Source: https://cesium.com/learn/cesiumjs/ref-doc/SingleTileImageryProvider.html Creates a provider for a single imagery tile from a given URL. ```APIDOC ## Static Method: fromUrl ### Description Creates a provider for a single, top-level imagery tile asynchronously. ### Parameters - **url** (Resource|string) - Required - The URL for the tile. - **options** (SingleTileImageryProvider.fromUrlOptions) - Optional - Object describing initialization options. ### Request Example ```javascript const provider = await SingleTileImageryProvider.fromUrl("https://yoururl.com/image.png"); ``` ### Response #### Success Response (200) - **provider** (Promise.) - The resolved imagery provider instance. ``` -------------------------------- ### Home Button Source: https://cesium.com/learn/cesiumjs/ref-doc/Viewer.html Gets the HomeButton widget. ```APIDOC ## readonly homeButton : HomeButton ### Description Gets the HomeButton widget. ### Type HomeButton ``` -------------------------------- ### KmlTour Constructor Source: https://cesium.com/learn/cesiumjs/ref-doc/KmlTour.html Initializes a new KmlTour instance with a name, ID, and a playlist of tour entries. ```APIDOC ## Constructor: new Cesium.KmlTour(name, id, playlist) ### Description Creates a new KmlTour object to manage camera navigation sequences defined in KML. ### Parameters - **name** (string) - Required - Name parsed from KML. - **id** (string) - Required - ID parsed from KML. - **playlist** (Array) - Required - Array containing KmlTourFlyTo and KmlTourWait entries. ### Request Example ```javascript var tour = new Cesium.KmlTour('My Tour', 'tour-001', [flyToEntry, waitEntry]); ``` ``` -------------------------------- ### Fullscreen Button Source: https://cesium.com/learn/cesiumjs/ref-doc/Viewer.html Gets the FullscreenButton widget. ```APIDOC ## readonly fullscreenButton : FullscreenButton ### Description Gets the FullscreenButton widget. ### Type FullscreenButton ```