Developing Advanced Web Applications Which Utilize Image Services and the JS API. Naila Khan, Wenxue Ju

Transcription

1 Developing Advanced Web Applications Which Utilize Image Services and the JS API Naila Khan, Wenxue Ju

2 What are we talking about today ArcGIS Online and Portal for ArcGIS ArcGIS API for JavaScript Web AppBuilder for ArcGIS Q&A

3 Image Services: Data + Visualization + Analysis An image service provides fast access to raster data through a web service Raster data and it s processing capabilities can be shared through ArcGIS Server Can be accessed by any device that supports connecting to a web service - Desktop, tablets, smartphones, laptops etc. Image Service Server

4 Image Service: Capabilities Visualization - Fast dynamic display Image catalog - Identify - Query Processing - Well-known server-side raster functions - Register raster models with image service - Client-side processing Server Raster Data Processing

5 Image Services in ArcGIS Online

6 Image Services in ArcGIS Enterprise 10.5

7 Raster Analysis in ArcGIS Enterprise 10.5 ArcGIS has a new way to quickly extract information by executing spatial analysis and dynamic raster models which leverage distributed storage and analytics - Works with your existing GIS data and imagery - register your data and go, importing existing data to distributed storage is not mandatory - Uses ArcGIS distributed storage - CRF (Cloud Raster Format) - multi-band, block based, multiple readers, multiple writers, fast - CRF is a format optimized for Raster Analytics computations - Designed for users, developers, and system integrators - can be accessed by desktop clients (ArcGIS Pro) and web clients (map viewer) - have a REST API to access the services

8 Raster Analysis in ArcGIS Enterprise 10.5 Easy to get started, it is out of the box analytics - install on nodes - setup Raster Analysis server - configure raster data store - ready to use WebMap viewer user experience - Now includes 11 new raster analysis tools Results are immediately available in your Web GIS - no publishing workflow required

9 Raster Analysis in ArcGIS Enterprise

10 Image Collection in ArcGIS Enterprise 10.5 An Image Collection is a portable file that contains one or more images - Designed for Enterprise GIS users that want a simple way to - share downloadable images - publish single images or small collections of images as services without having to learn and use ArcGIS Desktop - New type of item in Portal for ArcGIS - Zip files to upload and publish - Can use Portal s sharing REST API

11 Image Collection in ArcGIS Enterprise

12 Working with Image Services in ArcGIS API for JavaScript

13 ArcGIS API for JavaScript: Image Service Layers esri/layers/* Server Side Processing & Rendering Client Side Processing & Rendering Browser Support Note ArcGISImageServiceLayer Yes No IE8, Edge, Chrome, Firefox, Safari ArcGISTiledMapServiceLayer No No IE8, Edge, Chrome, Firefox, Safari RasterLayer (ImageryLayer4x) Yes Yes IE11, Edge, Chrome, Firefox, Safari ArcGISImageServiceVectorLayer Yes Yes IE10+, Edge, Chrome, Firefox, Safari <img> <img>, Tile API only <canvas> OGC: WCSLayer <svg> or <canvas> Vector Field data (UV/MagDir) only

14 Image Service Layers: Constructor var imagelayer = new ArcGISImageServiceLayer(url, options) = new RasterLayer(url, options) = new ArcGISImageServiceVectorLayer(url, options) = new ArcGISTiledMapServiceLayer(url) - url: - options: - opacity - visible - usemaptime - ImageServiceParameters (format, bandids, compressionquality, interpolation, nodata, timeextent, renderingrule, mosaicrule)

15 Raster Dataset Mosaic Dataset (MD) MultiDimensional MD Image Service Layers: Common Properties and Methods Format Interpolation Rendering Rule GetRasterAttribut etable GetKeyProperties + MosaicRule QueryVisibleRast ers + MultiDimensional Info Dimensional Definition

16 Image Service Layers: Processing esri/layers/rasterfunction var remaprf = new RasterFunction(); remaprf.functionname = "Remap"; remaprf.functionarguments = { "InputRanges" : [-3,10,11,37], //remap pixels with values -3 to 10 to now have value of 1 "OutputValues" : [1,2] //remap pixel values from 11 to 37 to have a value of 2 }; remaprf.outputpixeltype = "U8"; rasterlayer.setrenderingrule(remaprf);

17 Image Service Layers: Processing esri/layers/rasterfunction

18 Server side processing

19 RasterLayer: Format esri/layers/rasterlayer var myparams = new ImageServiceParameters(); myparams.format=jpg; //jpgpng, png, etc. var remaprf = new RasterLayer(url,imageServiceParameters: myparams); equivalent to: var remaprf = new ArcGISImageServiceLayer(url);

20 Raster Layer: LERC Limited Error Raster Compression Request raster data from server (10.3+) Decode raster data (typed arrays, JS API 3.13+) Manipulate pixels Put RGBA data to canvas LERC On Github (Apache 2.0 License)

21 Raster Layer: Raster API and PixelBlock esri/layers/raster Used for accessing pixels Decodes the returned data Supports LERC, JPG, PNG, BIL, BSQ format PixelBlock stores the pixels { width : 746, height : 2059, pixels : [], pixeltype : U8, statistics : [], mask : [] } (esri/layers/pixelblock) Raster Read(options, callback, errback) Decode(arrayBuffer, options):dfd

22 Raster Layer: PixelFilter RasterLayer setpixelfilter PixelBlock var israsterlayer = new RasterLayer(isUrl, { opacity: 1, pixelfilter: maskpixels }); function maskpixels(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; } }

23 Raster Layer: Client side manipulation Pixel Filters: Rendering raster data on the map Statistics: Charting pixels

24 Pixel Filter, WebGL, Pie Chart

25 WCSLayer esri/layers/wcslayer Enable Web 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.

26 Arctic Elevation

27 ArcGISImageServiceVectorLayer: Symbology esri/layers/arcgisimageservicevectorlayer Vector field data: wind force, Ocean current (2 bands, float) Draws vector field data using vectors: Single Arrow, Simple Scalar. Wind Barbs, Beaufort Wind, Ocean Current Auto conversion (U-V -> Magnitude-Direction) Var isvectorlayer = new ArcGISImageServiceVectorLayer(isUrl, { imageserviceparameters: params, symboltilesize: 60, rendererstyle: "single_arrow" });

28 Multidimensional Data - APIs esri/layers/dimensionaldefinition setmosaicrule(mr) MosaicRule multidimensionaldefinition ArcGISImageServiceVectorLayer getmultidimensionalinfo MultidimensionalDefinition DimensionalDefinition var mr = new MosaicRule(); var mddef = []; mddef.push(new DimensionalDefinition({ variablename: "Salinity", dimensionname: "StdZ", values: [-20] })); mr.multidimensionaldefinition = mddef; layer.setmosaicrule(mr)

29 Vector Field Data

30 Image Services in ArcGIS API for JavaScript 4.x

31 ArcGIS API for JavaScript 4.x: ImageryLayer Renders image data Retrieves data as pixels Supports LERC, BIL, BSQ, JPG, PNG formats View Popups Query Load webmap Apply client side processing using PixelFilters Define server side processing using raster functions Multi-dimensional API Supports 2D & 3D visualization

32 ArcGIS API for JavaScript 4.x: ImageryLayer pixelfilter ImageryLayer mosaicrule renderingrule

33 2D and 3D in ArcGIS for JS API 4.x

34 Documentation Resources ArcGIS API for JavaScript: ArcGIS API for JavaScript 4.x

35 Image Services in Web AppBuilder for ArcGIS

36 Web AppBuilder for ArcGIS Enables new apps to be created without coding Interactive user experience Runs on any device; in a web browser Built using ArcGIS API for JavaScript and HTML 5 technology Extensible Fully integrated with the ArcGIS Platform

37 Available Imagery widgets Layer List Legend Query Attribute Table Popups Image Measurement* Oblique viewer* * Specifically designed to work with image services

38 Imagery Custom Widgets: Designed to work specifically with image services Live apps Download and unzip the file Follow instructions in the WEBAPP BUILDER USER DOC.docx

39 Landsat Explorer

40 Road Ahead ArcGIS Online: map viewer - Raster Symbology Editor Portal for ArcGIS: Raster Analytics Support for applying a custom RFT Raster Function Editor ArcGIS API for JavaScript: - Client-side raster functions and renderers - Imagery vector layer in 4.x

41 Summary Capabilities of image services in ArcGIS Online Raster Analytics and Image Collection in ArcGIS Enterprise 10.5 ArcGIS API for JavaScript: - Different layer types - Client-side processing using pixel filters - Raster API and decoders - Multi-dimensional API 2D and 3D imagery support in ArcGIS API for JavaScript 4.x Image centric widgets in Web AppBuilder for ArcGIS

42 Thank you Please fill out the session survey in your mobile app Search and select the session Developing Advanced Web Applications Which Utilize Image Services and the JS API in the mobile app Go to the feedback section and let us know how we did today. Q & A