Intro to WCSLayer | Sample | ArcGIS Maps SDK for JavaScript

This sample shows how to add an instance of WCSLayer to a map. This WCSLayer contains a variety of oceanographic variables including sea temperature.

The RasterStretchRenderer is applied to the layer to change the data visualization.

      // Create raster-stretch renderer using three standard deviations and multipart color ramps.
      const renderer = {
        type: "raster-stretch",
        stretchType: "min-max",
        customStatistics: [{ min: 0.236999, max: 29.722, avg: 1, stddev: 1 }],
        numberOfStandardDeviations: 3,
        colorRamp: {
          type: "multipart",
          colorRamps: [
            { fromColor: [0, 0, 255], toColor: [0, 255, 255] },
            { fromColor: [0, 255, 255], toColor: [255, 255, 0] },
            { fromColor: [255, 255, 0], toColor: [255, 0, 0] },
          ],
        },
      };

The layer is loaded before it is added to the map so fullExtent can be used for the map constraints beforehand, preventing a visible shift on load. The time and depth dimensions for the water_temp variable are set in the layer’s multidimensionalDefinition property to display a single slice of data.

      // Create the WCS layer with a renderer and custom parameters.
      const layer = new WCSLayer({
        url: "https://sampleserver6dev.arcgisonline.com/arcgis/services/Multidimensional_Transposed_CRF/ImageServer/WCSServer",
        title: "Sea temperature",
        opacity: 0.5,
        renderer: renderer,
        multidimensionalDefinition: [
          // Display slices for 2013 March 17 at 18:00 GMT.
          { variableName: "water_temp", dimensionName: "StdTime", values: [1363543200000], isSlice: true },
          // Display slices with a depth of 0 meters — the surface.
          { variableName: "water_temp", dimensionName: "StdZ", values: [0], isSlice: true },
        ],
      });

      // Load the layer before the map so that its fullExtent property is already available.
      await layer.load();

      // Apply extent and scale constraints to the map.
      viewElement.constraints = { geometry: layer.fullExtent, minScale: 40000000 };