FlowRenderer in a 3D scene

Explore in the sandbox

View live

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.

Use dark colors for code blocksCopy
// 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.

Use dark colors for code blocksCopy
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
  })
];