Upload
others
View
10
Download
0
Embed Size (px)
Citation preview
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