Getting Started with the JS API for Multidimensional Image Services. Hong Xu, Wenxue Ju

Transcription

1 Getting Started with the JS API for Multidimensional Image Services Hong Xu, Wenxue Ju

2 Outline How to publish a multidimensional image service - ArcGIS multidimensional data model JS API for multidimensional image services Sample web apps - Visualize and profile multidimensional data - On-the-fly multidimensional processing - Visualize wind or ocean current data

3 Multidimensional Raster Data Spatial, temporal, and vertical dimensions Data collected at multiple times and depths - Ocean temperature - Wind - Soil moisture t=7 Stored in multidimensional formats - netcdf, HDF, GRIB - Stores multiple measures (variables) - Dimension arrays t= t=5

4 ArcGIS Multidimensional Data Model Multidimensional Mosaic Dataset in Geodatabase Ingest variables from netcdf, HDF & GRIB using raster types - Aggregate multiple variables, multiple files Support on-the-fly processing

5 Data Model: Creating a Multidimensional Mosaic Dataset Using Geoprocessing Tools Create a empty mosaic dataset Add select variables

6 Data Model: Visualization Access by dimension and variable Animate time and vertical dimension using Time and Range sliders

7 Data Model: Serving Multidimensional Data Multidimensional Image Services Serve data (not a picture) LERC compression to maintain data quality Perform analysis and analysis through the web Multiple clients: - Desktop clients - Web Map Viewers - JavaScript etc. - WMS/WCS - Time=t1&Elevation=z1 - DIM_Time=t1&DIM_depth

8 Create a multi-d data model from NCOM and publish as an image service

9 Develop Web Apps with Multidimensional Image Services Explore multidimensional data - Layers to access services - Slider widgets for time and vertical dimensions - Pixel value range sliders - Profile data series Server side multidimensional computing - Wind chill, heat index - Statistics aggregation Visualize vector field data - Wind arrows, rose plot, etc.

10 Exploring Multidimensional Image Service (1) layers for accessing multidimensional image services Server Side Processing & Rendering Client Side Processing & Rendering Browser Support Note ArcGISImageServiceLayer (3.x only) RasterLayer (ImageryLayer in 4.x) (OGC: WCSLayer in 3.x) ArcGISImageServiceVectorLayer (4.x in future) Yes No IE8, Edge, Chrome, Firefox, Safari Yes Yes IE11, Edge, Chrome, Firefox, Safari Yes Yes IE10+, Edge, Chrome, Firefox, Safari Vector Field data (UV/MagDir) only

11 Exploring Multidimensional Image Service (2) esri/layers/arcgisimageservicelayer //optional parameters var params = new ImageServiceParameters(); params.format="jpgpng"; //optional, default is jpgpng params.renderingrule=<renderingrule>; //server side processing var layer = new ArcGISImageServiceLayer(imageserviceURL, { ImageServiceParameters: params}); //or RasterLayer map.addlayer(layer);

12 Exploring Multidimensional Image Service (3) esri/layers/rasterlayer RasterLayer setpicxelfilter PixelBlock var params = new ImageServiceParameters(); params.format="lerc"; //optional, default is lerc params.renderingrule=<renderingrule>; //server side processing var layer = new RasterLayer(imageserviceURL, { ImageServiceParameters: params, pixelfilter: myfilter}); map.addlayer(layer); Limited Error Raster Compression function myfilter(pixeldata) { var pixelblock = pixeldata.pixelblock; var pixels = pixelblock.pixels; var band1 = pixels[0]; var mask = pixelblock.mask; var numpixels = pixelblock.width * pixelblock.height; for (var i = 0; i < numpixels; i++) { mask[i] = (band1[i] >= Math.floor(currentMin) && band1[i] <= Math.floor(currentMax))? 1 : 0; } }

13 Exploring Multidimensional Image Service (4) esri/layers/multidimensionalinfo ArcGISImageServiceLayer setmosaicrule(mr) MosaicRule multidimensionaldefinition RasterLayer ArcGISImageServiceVectorLayer getmultidimensionalinfo MultidimensionalDefinition DimensionalDefinition var dimdef = new DimensionalDefinition({ variablename: "Salinity", dimensionname: "StdZ", values: [-20] }); var mr = new MosaicRule(); mr.multidimensionaldefinition = [dimdef, dimdef2, ]; islayer.setmosaicrule(mr)

14 Exploring Multidimensional Image Service (5) Time and Multidimension slider widgets var timeslider = new TimeSlider( ); timeextent = new TimeExtent();. timeslider.setthumbcount(2); timeslider.setlabels(labels); timeslider.startup(); var mdslider = new MultidimensionalSlider({ map: mymap, dimension: depth, layout: MdSlider.LAYOUT_VERTICAL, thumbcount: 1, showplaybutton: true }, "mdslider"); mdslider.startup();

15 Exploring Multidimensional Image Service (6) WCSLayer and WMSLayer Enable Web Mapping/Coverage Service on image services Get server info: coverages, formats, interpolations, versions, etc. var connect = new WCSConnection(url,{version:2.0.1}); WCS layer: var wcslyr = new WCSLayer(url,{coveageId: ""}); Method: identify, setpixelfilter Client side pixel filters too! By default, it applies StretchFilter.

16 Demo: Explore Multidimensional Image Services

17 Multidimensional Computing (1) Processing on-demand with raster functions Raster functions - Built-in : Stretch, hillshade, etc. - Functions can be chained - Stored as.rft.xml (RFT) - Extend through Python Raster Function - Fx = Unit Conversion Aggregate Statistics Apply RFT to Mosaic Dataset - Process each row - Process each group Processing by group

18 Multidimensional Computing (2) Raster function template (RFT): GroupName and Tag Mosaic dataset must contains - A field stores variable names (Tag) - A field defines groups (GroupName) RFT must have - Function: Temperature mean - tag and groupname field defined in property Raster Tag StdTime GroupName Temperature t1 1 mean t1 1 Temperature t2 2 mean t2 2 Temperature t3 3 mean t3 3 Temperature t4 4 mean t4 4

19 Multidimensional Computing (3) Add raster function template to mosaic dataset Add your function or RFT to mosaic dataset

20 Multidimensional Computing (4) APIs esri/layers/rasterfunction ArcGISImageServiceLayer RasterLayer MosaicRule RenderingRule ImageServiceParameters RasterFunction var rasterfunction = new RasterFunction(); rasterfunction.functionname = Local"; var rasterfunction = new RasterFunction(); rasterfunction.functionname = wind chill"; //template name imageservicelayer.setrenderingrule(rasterfunction); var args = {}; args.operation = 3; // * times args.rasters = [ $$, ]; //knots to m/s rasterfunction.arguments = args; imageservicelayer.setrenderingrule(rasterfunction);

21 NDFD weather model Anomaly model

22 Visualize Image Service with Vector Symbols Create Data Model Using Vector Field Template Choose Vector Field template Define variable types

23 Visualizing Image Service with Vector Symbols Vector field rendering mechanism User configured spacing Resample with vector average method Built in symbols Tile size Built in symbols WIND BARB ARROWS BEAUFORT OCEAN_CURRENT SCALAR

24 Visualize Image Service with Vector Symbols esri/layers/arcgisimageservicevectorlayer VectorFieldRender setrenderer ArcGISImageServiceVectorLayer setmosaicrule MosaicRule setpixelfilter(func(pixeldata)) var isvectorlayer = new ArcGISImageServiceVectorLayer(isUrl, { symboltilesize: 60, rendererstyle: "single_arrow" //one of the pre-defined symbology }); imageserviceparameters: params, var renderer = new VectorFieldRenderer({ style: VectorFieldRenderer.STYLE_BEAUFORT_KN, visualvariables: visualvariables, flowrepresentation: VectorFieldRenderer.FLOW_FROM }); isvectorlayer.setrenderer(renderer); //change to a different renderer

25 Visualize Wind

26 Help References JavaScript API help: - Sample services - Scientific data workflow document: - Thank you!