ImageryLayer - client side pixel filter

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

This sample uses an instance of ImageryLayer to visualize global sea temperature.

The rendering rule of the layer determines the method used to draw the layer in the view. It uses the range of values in the pixelBlock to determine the color of each pixel. The global sea temperature image service has two available raster functions that may be used to color the layer: Stretched and None. Setting the rendering rule to the None raster function gives the user the ability to get the actual value of the pixel (the sea temperature) without it being altered by another raster function or rendering rule. When None is used, the layer is colorized in a grayscale where white represents the highest value in the view, and black represents lowest value.

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 colorize(pixelData) {
  if (pixelData === null || pixelData.pixelBlock === null ||
    pixelData.pixelBlock.pixels === null) {
    return;
  }

  // The pixelBlock stores the values of all pixels visible in the view
  pixelBlock = pixelData.pixelBlock;

  // Get the min and max values of the data in the current view
  minValue = pixelBlock.statistics[0].minValue;
  maxValue = pixelBlock.statistics[0].maxValue;

  // The pixels visible in the view
  var pixels = pixelBlock.pixels;

  // The number of pixels in the pixelBlock
  var numPixels = pixelBlock.width * pixelBlock.height;

  // Calculate the factor by which to determine the red and blue
  // values in the colorized version of the layer
  factor = 255.0 / (maxValue - minValue);

  // Get the pixels containing temperature values in the only band of the data
  var tempBand = pixels[0];

  // Create empty arrays for each of the RGB bands to set on the pixelBlock
  var rBand = [];
  var gBand = [];
  var bBand = [];

  // Loop through all the pixels in the view
  for (i = 0; i < numPixels; i++) {
    // Get the pixel value (the temperature) recorded at the pixel location
    var tempValue = tempBand[i];
    // Calculate the red value based on the factor
    var red = (tempValue - minValue) * factor;

    // Sets a color between blue (coldest) and red (warmest) in each band
    rBand[i] = red;
    gBand[i] = 0;
    bBand[i] = 255 - red;
  }

  // Set the new pixel values on the pixelBlock
  pixelData.pixelBlock.pixels = [rBand, gBand, bBand];
  pixelData.pixelBlock.pixelType = "U8"; // U8 is used for color
}

var layer = new ImageryLayer({
  url: url,
  renderingRule: rf,
  pixelFilter: colorize,
  mosaicRule: mr
});

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.