Leveraging Image Services in JavaScript/HTML5 Applications. Wenxue Ju, Hong Xu

Transcription

1 Leveraging Image Services in JavaScript/HTML5 Applications Wenxue Ju, Hong Xu

2 Schedule Image service introduction Web applications with image services - Server side image processing - Client side image processing - Multidimensional data Summary and tips

3 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

4 Image Service Sources Image services can be published from raster datasets and mosaic datasets Raster datasets Mosaic datasets Multidimensional mosaic dataset

5 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

6 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

7 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

8 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)

9 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

10 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);

11 Avalanche Risk Analysis and Flood Risk Demos Service: elevation

12 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

13 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

14 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; }

15 Explore Information with Scatter Plot and Pie Chart Services: landsat NLCD (National Land Cover Data)

16 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= t=5

17 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)

18 Multidimensional Data Multi-dimension Slider Widget mdslider = new MdSlider({ map: mymap, dimension: depth, layout: MdSlider.LAYOUT_VERTICAL, thumbcount: 1, showplaybutton: true }, "mdslider"); mdslider.startup();

19 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

20 Visualize Sea Temperature Time [69] Vertical dimension [40] and profile

21 Visualize Image Services with Vector Symbols

22 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

23 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);

24 Web Viewer with Vector Symbol

25 Wind Map from Image Service Service: NDFD_wind on

26 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

27 Rate This Session More samples and API reference: