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 Portal Server
Image Service Sources Image services can be published from raster datasets and mosaic datasets Raster datasets Mosaic datasets Multidimensional mosaic dataset
Raster Functions 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 NDVI Orthorectification Stretch Pansharpen Composite Bands
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 ArcGISImageServiceLayer Server side processing, transfer data in PNG, JPEG, TIFF, etc RasterLayer (beta) Server side processing, transfer data in LERC format, support client side processing ArcGISImageServiceVectorLayer Transfer data in LERC, pixel filtering and draw vector symbols ArcGISTiledMapServiceLayer Retrieve and display cached image tiles
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 ArcGISImageServiceLayer RasterLayer MosaicRule RenderingRule ImageServiceParameters RasterFunction 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);
Avalanche Risk Analysis and Flood Risk Demos Service: elevation
Client Side Processing Pixel Filter Retrieve raw data in LERC format Responsive interactive processing - Javascript (simple task) or WebGL (complicated) Developer needs to know processing algorithms PixelBlock LERC Server Raster Data RFT
Canvas var c=document.getelementbyid( canvas"); var ctx=c.getcontext("2d"); //web-gl, experimental-webgl var imgdata=ctx.createimagedata(width,height); var data = imgdata.data; for (var i=0; i < data.length; i++) { data[i*4+0]=100; //red data[i*4+1]=255; //greeen data[i*4+2]=100; //blue data[i*4+3]=255; //alpha 0 ~255 (255 is transparent) } ctx.putimagedata(imgdata,width,height); UInt8clampedArray
Client Side Processing - APIs RasterLayer setpicxelfilter PixelBlock 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; }
Explore Information with Scatter Plot and Pie Chart Services: landsat NLCD (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 t=7 MultidimensionInfo - - { Variables : [ } - name - unit -.] - dimensions [ ] t=6 141 241 341 441 142 242 342 442131 231 331 431 143 243 343 443 132 232 332 432121 221 321 421 133 233 333 433 122 222 322 422111 211 311 411 123 223 323 423 112 212 312 412 113 213 313 413 t=5
Multidimensional Data - APIs ArcGISImageServiceLayer setmosaicrule(mr) MosaicRule multidimensionaldefinition RasterLayer ArcGISImageServiceVectorLayer getmultidimensionalinfo MultidimensionalDefinition DimensionalDefinition var mr = new MosaicRule(); var mdmd = []; mdmd.push(new DimensionalDefinition({ variablename: "Salinity", dimensionname: "StdZ", values: [-20] })); mr.multidimensionaldefinition = mdmd; islayer.setmosaicrule(mr)
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 Service data type = esriimageservicedatatype-magdir Style Built-in class breaks: STYLE_WIND_BARB STYLE_SINGLE_ARROWS STYLE_CLASSIFIED_ARROW STYLE_BEAUFORT_KN STYLE_BEAUFORT_FEET STYLE_BEAUFORT_MILE STYLE_BEAUFORT_KM STYLE_BEAUFORT_METER STYLE_OCEAN_CURRENT_M STYLE_OCEAN_CURRENT_KN STYLE_SCALAR
Visualize Image Service with Vector Symbols ArcGISImageServiceVectorLayer VectorFieldRender setrenderer setmosaicrule MosaicRule setpixelfilter(func(pixeldata)) 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);
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 Session www.esri.com/ratemydevsummitsession More samples and API reference: https://developers.arcgis.com/javascript