Leveraging Image Services in JavaScript/HTML5 Applications

Wenxue Ju, Hong Xu

Schedule

• Image service introduction

• Web applications with image services- Server side image processing- Client side image processing- Multidimensional data

• Summary and tips

What is an Image Service?

• A service that shares raster data and processing capabilities through ArcGIS Server and Portal

- Visualization - Processing and analysis

• Supports many clients - Desktop, mobile, WMS/WCS/WTS- Web, REST, etc

Server

Portal

Image Service Sources

• Image services can be published from raster datasets and mosaic datasets

Raster datasets

Mosaic datasets Multidimensional mosaic dataset

• Define process algorithms- Terrain analysis (slope, hillshade, aspect, curvature)- Raster analysis (Local function : A + B, A > B, etc)- Image processing (NDVI, pansharpen, image classification, etc)

• Process on-the-fly• Can be chained and avoid intermediate results• Stored as .rft.xml (RFT) and register with image service

Raster Functions

Orthorectification Stretch Pansharpen

NDVI

CompositeBands

Image Service Capabilities

• Visualization- Speed up with cached image service

• Image catalog and search services

• Server side processing - Well-known server raster functions - Register RFT with image service- Process on server and deliver in JPEG, TIFF, PNG, etc

• Client side processing- Server can deliver raw data in LERC format,- ArcGIS JavaScript decodes LERC

Javascript Web APIs for Accessing Image Services

Server side processing, transfer data in PNG, JPEG, TIFF, etc

Server side processing, transfer data in LERC format, support client side processing

Transfer data in LERC, pixel filtering and draw vector symbols

Retrieve and display cached image tiles

ArcGISImageServiceLayer

RasterLayer (beta)

ArcGISImageServiceVectorLayer

ArcGISTiledMapServiceLayer

Sample Applications

• Flood risk analysis (RasterLayer + ArcGISImageServiceLayer)

• Avalanche risk analysis (RasterLayer + ArcGISImageServiceLayer + WebGL)

• Pixel charting (RasterLayer )

• Visualize multidimensional data (ArcGISImageServiceLayer)

• Visualize wind using vector symbol (ArcGISImageServiceVectorLayer)

Server Side Processing

• Process data on server using raster function- Built-in raster functions- RFTs

• Transmit processed and compressed data• Fast per request• Leverage the well established RFT

- Written in C++ and extensible through python or COM

JPEG, PNG, TIFF, LERC, etc

Server

Raster Data RFT

Server Side Processing - APIs

var rasterFunction = new esri.layers.RasterFunction();rasterFunction.functionName = "Hillshade";var arguments = {};arguments.Azimuth = 315;arguments.Altitude = 45;arguments.ZFactor = 1;rasterFunction.arguments = arguments; rasterFunction.variableName = "Raster";imageServiceLayer.setRenderingRule(rasterFunction);

MosaicRule

RenderingRule

ImageServiceParameters

RasterFunctionArcGISImageServiceLayerRasterLayer

Avalanche Risk Analysis and Flood Risk Demos

Service: elevation

Client Side Processing

• Retrieve raw data in LERC format• Responsive interactive processing

- Javascript (simple task) or WebGL (complicated)

• Developer needs to know processing algorithms

Pixel Filter

LERC

Server

Raster Data RFT

PixelBlock

Canvas

• var c=document.getElementById(“canvas"); var ctx=c.getContext("2d"); //web-gl, experimental-webglvar imgData=ctx.createImageData(width,height);var data = imgData.data;for (var i=0; i < data.length; i++){data[i*4+0]=100; //reddata[i*4+1]=255; //greeendata[i*4+2]=100; //bluedata[i*4+3]=255; //alpha 0 ~255 (255 is transparent)}

ctx.putImageData(imgData,width,height);

• UInt8clampedArray

Client Side Processing - APIs

var isRasterLayer = new RasterLayer(isUrl, { opacity: 1, pixelFilter: maskPixels });function maskPixels(pixelData) {

var pixelBlock = pixelData.pixelBlock;var pixels = pixelBlock.pixels;var mask = pixelBlock.mask;var numPixels = pixelBlock.width * pixelBlock.height;

for (var i = 0; i < numPixels; i++) {mask[i] = (p1[i] >= Math.floor(currentMin) && p1[i] <= Math.floor(currentMax)) ? 1 : 0;

}return pixelData;

}

RasterLayer PixelBlocksetPicxelFilter

Explore Information with Scatter Plot and Pie Chart

Services: landsatNLCD (National Land Cover Data)

Multidimensional Data – Image Services

• Variables and dimensions (time and vertical)- Sea temperature captured from time [t1, t2, t3] and depth at [-10, -20]- Humidity and wind every 3 hours

• MultidimensionInfo- { “Variables”: [

- “name”- “unit”- ….]- “dimensions”[…]

- }

141 241 341 441131 231 331 431121 221 321 421111 211 311 411

142 242 342 442132 232 332 432122 222 322 422112 212 312 412

143 243 343 443133 233 333 433123 223 323 423113 213 313 413

t = 5t = 6

t = 7

Multidimensional Data - APIs

var mr = new MosaicRule(); var mdmd = [];mdmd.push(new DimensionalDefinition({

variableName: "Salinity", dimensionName: "StdZ", values: [-20] }));

mr.multidimensionalDefinition = mdmd; isLayer.setMosaicRule(mr)

ArcGISImageServiceLayerRasterLayerArcGISImageServiceVectorLayer MultidimensionalDefinition

DimensionalDefinition

MosaicRule multidimensionalDefinitionsetMosaicRule(mr)

getMultidimensionalInfo

Multidimensional Data – Multi-dimension Slider Widget

mdSlider = new MdSlider({

map: mymap,

dimension: “depth”,

layout: MdSlider.LAYOUT_VERTICAL,

thumbCount: 1,

showPlayButton: true

}, "mdSlider");

• mdSlider.startup();

Multidimensional Data – Web Viewer

• Multidimensional Filter to access variables at given time and vertical dimension values

• Multi-dimension Slider to visualize data at given depth and animate

Visualize Sea Temperature

Time [69] Vertical dimension [40] and profile

Visualize Image Services with Vector Symbols

Visualize Raster Data with Vector Symbols

Tile size Style

STYLE_WIND_BARBSTYLE_SINGLE_ARROWSSTYLE_CLASSIFIED_ARROWSTYLE_BEAUFORT_KNSTYLE_BEAUFORT_FEETSTYLE_BEAUFORT_MILESTYLE_BEAUFORT_KMSTYLE_BEAUFORT_METERSTYLE_OCEAN_CURRENT_MSTYLE_OCEAN_CURRENT_KNSTYLE_SCALAR

• Built-in class breaks:

Service data type = esriImageServiceDataType-MagDir

Visualize Image Service with Vector Symbols

Var isVectorLayer = new ArcGISImageServiceVectorLayer(isUrl, { imageServiceParameters: params, symbolTileSize: 60, rendererStyle: "single_arrow“

}); var renderer = new VectorFieldRenderer({

style: VectorFieldRenderer.STYLE_BEAUFORT_KN,visualVariables: visualVariables,flowRepresentation: VectorFieldRenderer.FLOW_FROM

});isVectorLayer.setRenderer(renderer);

ArcGISImageServiceVectorLayer

VectorFieldRendersetRenderersetMosaicRule

MosaicRulesetPixelFilter(func(pixelData))

Web Viewer with Vector Symbol

Wind Map from Image Service

Service: NDFD_wind on http://sampleserver6.arcgisonline.com

Tips/Summary

• Server side processing in general - Rich built-in raster functions- Written in c++, efficiently- Data to transfer is smaller

• Client side processing for apps that require instant responsiveness• Combine server side and client side processing

- Use RasterLayer

• Use ArcGISTiledMapServiceLayer to access the cached image service tiles• Use ArcGISImageServiceVectorLayer to draw with vector symbols

- Create mosaic dataset with 32 bit float type

Rate This Sessionwww.esri.com/RateMyDevSummitSession

More samples and API reference: https://developers.arcgis.com/javascript