This sample uses an instance of ImageryLayer to visualize global sea temperature by filtering pixel values on the client-side.
You can filter out the temperature values on the imagery layer by adjusting the slider thumbs. Filtering is accomplished through the
pixelFilter property of the Imagery. The function defined for this property determines how users can
dynamically change the raster image on the client-side.
The service data is managed using a multidimensional mosaic dataset. Esri reserves the right to change or remove this service at any time and without notice.
The pixelFilter property is used in this sample to add a custom continuous color ramp to the pixels. The color is determined based on the temperature or the value of the pixel. To assign a color to the pixels, you must loop through all the pixels displayed in the view.
// Convert the single temperature band into three color bands (red, green, and blue).
const pixelFilter = (pixelData) => {
if (!(pixelData && pixelData.pixelBlock && pixelData.pixelBlock.pixels)) return;
const { height, width, pixels } = pixelData.pixelBlock;
const { minValue, maxValue } = pixelData.pixelBlock.statistics[0];
const [red, green, blue] = [[], [], []];
const mask = []; // Store each pixel as valid (1) or invalid (0).
// Scale red/blue values based on the pixel block's data range.
const scaleFactor = 255.0 / (maxValue - minValue);
const pixelsInPixelBlock = width * height;
for (let i = 0; i < pixelsInPixelBlock; i++) {
const temperature = pixels[0][i]; // Derive this from the current single band.
const tempInRange = minDesiredTemp <= temperature && temperature <= maxDesiredTemp;
const scaledRed = tempInRange ? (temperature - minValue) * scaleFactor : 0;
const scaledBlue = tempInRange ? 255 - scaledRed : 0;
[red[i], green[i], blue[i]] = [scaledRed, 0, scaledBlue]; // Set the RGB channels.
mask[i] = tempInRange ? 1 : 0; // Show pixel if its related temperature is in range.
}
pixelData.pixelBlock.pixels = [red, green, blue]; // Replace single band with RGB bands.
pixelData.pixelBlock.statistics = null; // Reset statistics.
pixelData.pixelBlock.pixelType = "u8"; // Use unsigned 8-bit for color.
};
Since the image service has multidimensional information, you can set the multidimensionalDefinition property in the MosaicRule object to apply a pixelFilter based on water temperature at a specific water depth and time.