Note: Support for 3D on mobile devices may vary, view the system requirements for more information.

This sample shows how to apply VectorFieldRenderer to an ImageryLayer to show the wind speed and direction.

The imagery layer used in this sample contains weather data from the National Digital Forecast Database (NDFD). It contains wind speed and direction variables between October 26, 2014 - October 30, 2014.

Wind speed and directions variables can be can be visualized using VectorFieldRenderer as shown below:

// image service contains wind speed and direction variables which can be visualized
// with VectorFieldRenderer. VectorFieldRenderer has size visual variables set for magnitude
// and rotation visual variables set for directions
var layer = new ImageryLayer({
  url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/ScientificData/NDFD_wind/ImageServer",
  renderer: {
    type: "vector-field",
    style: "beaufort-kn", // Beaufort point symbol (knots)
    flowRepresentation: "flow-from", // show flow from angle for wind direction
    symbolTileSize: 10, // draw one symbol in every 10x10 pixels
    visualVariables: [
      {
        type: "size",
        field: "Magnitude", // values read from the first band
        maxDataValue: 32,
        maxSize: "100px",
        minDataValue: 0.04,
        minSize: "8px"
      },
      {
        type: "rotation",
        field: "Direction", // values read from the second band
        rotationType: "geographic"// "arithmetic" is the default
      }
    ]
  }
});

The TimeSlider widget will allow you to display the wind speed and directions at a specific instant in time. When the layer is loaded, we set the time slider's fullTimeExtent and stops properties using the layer's timeInfo information as shown below.

view.whenLayerView(layer).then(function (lv) {
  const fullTimeExtent = layer.timeInfo.fullTimeExtent;

  // set up time slider properties
  timeSlider.fullTimeExtent = fullTimeExtent;
  timeSlider.stops = {
    interval: layer.timeInfo.interval
  };
});