FlowRenderer with elevation modes

Explore in the sandbox

View live

This sample demonstrates how to apply the FlowRenderer to an ImageryTileLayer within a 3D Scene component. It also showcases how to dynamically change the tiled imagery layer's elevationInfo to visualize the flow at different altitudes.

Use dark colors for code blocksCopy
// Get reference to the Scene component
const viewElement = document.querySelector("arcgis-scene");

// Create the imagery layer for displaying global wind data.
const windTileLayer = new ImageryTileLayer({
  url: "https://tiledimageservices.arcgis.com/.../ImageServer",
  renderer: {
    type: "flow",
    trailLength: 30,
    maxPathLength: 60,
    flowSpeed: 2,
    trailWidth: 3,
    color: "white"
  }
});

// Add the wind layer to the scene.
viewElement.map.add(windTileLayer);

Elevation Modes

By modifying the elevationInfo mode of the ImageryTileLayer, we can change how the flow streamlines are rendered vertically:

on-the-ground: Drapes the flow on the terrain surface.
relative-to-ground: Renders the flow at a constant height above the terrain. This mode, combined with an offset, is perfect for visualizing how winds interact with the topography.
absolute-height: Displays the flow at a specific altitude relative to sea level. This elevation mode does not consider the terrain.

The following snippet shows how the elevationInfo is programmatically configured based on the selections in the calcite card.

Use dark colors for code blocksCopy
// Update the layer's elevation mode
selectElevationMode.addEventListener("calciteSelectChange", () => {
  inputOffset.disabled = selectElevationMode.value === "on-the-ground";
  updateElevationInfo();
});

// Update the layer's elevation offset
inputOffset.addEventListener("calciteInputNumberInput", updateElevationInfo);

// Updates the elevation info based on the selected mode and offset
function updateElevationInfo() {
  const offset = parseFloat(inputOffset.value);

  const newElevationInfo = new ElevationInfo({
    mode: selectElevationMode.value,
    offset: offset * verticalExaggeration,
  });

  windTileLayer.elevationInfo = newElevationInfo;
}

Exaggerated Terrain for Enhanced Flow Visualization

Analyzing flow data across different scales is a challenge:

Zooming out is sometimes essential to capture large patterns, like vortices, but this can make the terrain appear flattened, which reduces the sense of elevation and makes it harder to interpret how the flow interacts with the landscape.
Zooming in, on the contrary, shows local patterns, but the big picture is lost.

To address the challenge, this sample exaggerates the terrain. In fact, making mountains and valleys appear much taller, clarifies their influence on the flow, even from a significant distance. An exaggerated Elevationlayer, that programmatically multiplies the elevation values, can be created by using a BaseElevationLayer.