This sample shows how to add images from an image service in image space instead of projecting them to map coordinates. Using the add method, an instance of ImageryLayer is added to a Map in its original image coordinate system. The image coordinate system (ICS) allows you to display images in a 2D map without any distortion. In some cases, converting images into map coordinates can cause your images to appear skewed or distorted because of various transformations and terrain corrections that are used. Many imagery-centric workflows require displaying images in image coordinate systems instead of map coordinates (geographic or projected coordinate systems). For example, oblique images are distorted significantly when displayed in map coordinates but can be shown without distortion in a top-up view using an image coordinate system.
The following two images show how the same image looks different when it is displayed in its original coordinate system versus WGS84.
| Image in WGS84 | Image in its coordinate system |
|---|---|
|
|
How it works
When the app loads, an Imagery is instantiated with a mosaic rule and added to the map. To initialize the layer and handle the selection of different images, set is called. In this function, getCatalogItemICSInfo() is called on the layer with the specified image ID. This method gets the image coordinate system which is used to set the map's spatialReference.
// New minimum = old center - half of new size
const newMin = (min, max, size) => (min + max - size) / 2;
const setViewIcsInfo = async (imageID = 1599) => {
const icsInfo = await layer.getCatalogItemICSInfo(imageID);
const newExtent = icsInfo.icsExtent.clone();
imageIDChip.innerHTML = `<b>Image ID:</b> ${imageID}`;
northDirectionChip.innerHTML = `<b>North direction:</b> ${Math.round(icsInfo.northDirection)}`;
const { height, width } = viewElement.getBoundingClientRect(); // Get the element's pixel size.
const scaleFactor = 5; // Control how far out the extent is set.
const scaledWidth = width * scaleFactor;
const scaledHeight = height * scaleFactor;
// Adjust the extent based on the raster image's scaled map dimensions.
newExtent.xmin = newMin(newExtent.xmin, newExtent.xmax, scaledWidth);
newExtent.xmax = newExtent.xmin + scaledWidth;
newExtent.ymin = newMin(newExtent.ymin, newExtent.ymax, scaledHeight);
newExtent.ymax = newExtent.ymin + scaledHeight;
viewElement.extent = newExtent; // Replace the component's current extent.
layer.mosaicRule.lockRasterIds = [imageID]; // Show only the chosen image.
};