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 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
const 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: 20, // draw one symbol in every 20x20 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"
}
]
}
});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((lv) => {
const fullTimeExtent = layer.timeInfo.fullTimeExtent;
// set up time slider properties
timeSlider.fullTimeExtent = fullTimeExtent;
timeSlider.stops = {
interval: layer.timeInfo.interval
};
});