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.
function maskPixels(pixelData) {
if (pixelData == null || pixelData.pixelBlock == null) {
return;
}
if (currentMin == null || currentMax == null) {
// layer is loaded get the min and max temp values from the layer
updatePixelFilter();
}
// The pixelBlock stores the values of all pixels visible in the view
const pixelBlock = pixelData.pixelBlock;
// The pixels visible in the view
const pixels = pixelBlock.pixels;
let mask = pixelBlock.mask;
// The number of pixels in the pixelBlock
const numPixels = pixelBlock.width * pixelBlock.height;
// Get the min and max values of the data in the current view
const minVal = pixelData.pixelBlock.statistics[0].minValue;
const maxVal = pixelData.pixelBlock.statistics[0].maxValue;
// Calculate the factor by which to determine the red and blue
// values in the colorized version of the layer
const factor = 255.0 / (maxVal - minVal);
if (pixels == null) {
return;
}
// Get the pixels containing temperature values in the only band of the data
const tempBand = pixels[0];
const p1 = pixels[0];
// Create empty arrays for each of the RGB bands to set on the pixelBlock
const rBand = new Uint8Array(p1.length);
const gBand = new Uint8Array(p1.length);
const bBand = new Uint8Array(p1.length);
if (mask == null) {
mask = new Uint8Array(p1.length); //mask = new Uint8Array(p1.length);
mask.fill(1);
pixelBlock.mask = mask;
}
// Loop through all the pixels in the view
for (let i = 0; i < numPixels; i++) {
// skip noData pixels
if (mask[i] === 0) {
continue;
}
const tempValue = tempBand[i];
const red = (tempValue - minVal) * factor;
mask[i] = p1[i] >= Math.floor(currentMin) && p1[i] <= Math.floor(currentMax) ? 1 : 0;
//apply color based on temperature value of each pixel
if (mask[i]) {
// p[i] = Math.floor((p1[i] - minVal) * factor);
rBand[i] = red;
gBand[i] = 0;
bBand[i] = 255 - red;
}
}
// Set the new pixel values on the pixelBlock
pixelData.pixelBlock.pixels = [rBand, gBand, bBand]; //assign rgb values to each pixel
pixelData.pixelBlock.statistics = null;
pixelData.pixelBlock.pixelType = "u8";
}
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.