FlowRenderer in a 3D scene | Sample | ArcGIS Maps SDK for JavaScript

This sample demonstrates how to apply the FlowRenderer to an ImageryTileLayer within a 3D Scene component, allowing visualization of directional data, such as wind speed and direction, through animated streamlines.

// Get reference to the Scene component
const viewElement = document.querySelector("arcgis-scene");

// Create the ImageryTileLayer with the FlowRenderer
const windTileLayer = new ImageryTileLayer({
  url: "https://tiledimageservices.arcgis.com/.../ImageServer",
  elevationInfo: {
    mode: "absolute-height",
    offset: 8000,
  },
  renderer: {
    type: "flow",
    trailLength: 20,
    flowSpeed: 3,
    trailWidth: 2.5,
    visualVariables: [
      new ColorVariable({
        field: "Magnitude",
        stops: [
          { value: 0, color: [0, 100, 255, 1], label: "0 m/s" },
          { value: 0.1, color: [0, 150, 255, 1] },
          { value: 3, color: [0, 200, 255, 1] },
          { value: 7, color: [0, 220, 130, 1] },
          { value: 15, color: [80, 255, 70, 1] },
          { value: 25, color: [200, 255, 40, 1] },
          { value: 40, color: [255, 255, 0, 1], label: ">40 m/s" },
        ],
      }),
    ],
  },
});

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

Visualizing Multidimensional Data

The visualization uses the Global Average Wind Speeds by Month and Altitude layer from the Living Atlas. This multidimensional ImageryTileLayer contains wind data across various altitudes and times, represented by the StdPressure (pressure level) and StdTime (time) dimensions. The filtering panel in the top‑right corner of the view facilitates the selection of specific dimension values to visualize a single slice of the dataset. This enables the analysis of various use cases such as jet stream dynamics for aviation, bird migration tracking, and surface wind monitoring.

This can be done by updating the DimensionalDefinition collection in the layer’s multidimensionalDefinition property as shown in the following snippet.

const stdPressureValue = 17500; // Pressure value in Pa for "Aviation" scenario
const currentTimeSlice = 1; // January

windTileLayer.multidimensionalDefinition = [
  new DimensionalDefinition({
    variableName: "Vector-MagDir",
    dimensionName: "StdPressure",
    values: [stdPressureValue],
    isSlice: true,
  }),
  new DimensionalDefinition({
    variableName: "Vector-MagDir",
    dimensionName: "StdTime",
    values: [currentTimeSlice],
    isSlice: true,
  }),
];

Visualizing Multidimensional Data

Related samples and resources

FlowRenderer with elevation modes

FlowRenderer with visual variables

FlowRenderer with effects and blending

Multidimensional ImageryTileLayer

Visualizing Flood Simulations: from ArcGIS Pro to the Web with Flow Rendering