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:
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
// Initialize the layer with a renderer to visualize wind speed and rotation.
const layer = new ImageryLayer({
url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/ScientificData/NDFD_wind/ImageServer",
renderer: {
type: "vector-field", // autocasts as new VectorFieldRenderer()
style: "beaufort-kn", // Beaufort point symbol (knots)
flowRepresentation: "flow-to", // Point arrows in the direction the wind moves.
symbolTileSize: 20,
visualVariables: [
{
type: "size", // autocasts as new SizeVariable()
field: "Vector_Magnitude", // Read wind speed from the magnitude band.
maxDataValue: 32,
maxSize: "100px",
minDataValue: 0.04,
minSize: "8px",
},
{
type: "rotation", // autocasts as new RotationVariable()
field: "Vector_Direction", // Read wind direction from the direction band.
rotationType: "geographic", // Rotate arrows clockwise relative to true north.
},
],
},
});
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.
75
76
77
78
79
80
81
// Set the time slider properties.
const { fullTimeExtent, interval } = layer.timeInfo;
timeSlider.fullTimeExtent = fullTimeExtent;
timeSlider.stops = { interval };
timeSlider.tickConfigs = [
{ labelsVisible: true, mode: "count", values: 4, labelFormatFunction },
];