ArcGIS API for JavaScript: Creating Custom Layers and Layer Views · 2017-03-21 · Introduction to...
Transcript of ArcGIS API for JavaScript: Creating Custom Layers and Layer Views · 2017-03-21 · Introduction to...
![Page 1: ArcGIS API for JavaScript: Creating Custom Layers and Layer Views · 2017-03-21 · Introduction to Layers extensibility in 4.x •They don’t have a visual representation, they](https://reader031.fdocuments.net/reader031/viewer/2022011906/5f3e07616ac0c87053090e68/html5/thumbnails/1.jpg)
ArcGIS API for JavaScript:
Creating Custom Layers and Layer ViewsYann Cabon, Johannes Schmid
![Page 2: ArcGIS API for JavaScript: Creating Custom Layers and Layer Views · 2017-03-21 · Introduction to Layers extensibility in 4.x •They don’t have a visual representation, they](https://reader031.fdocuments.net/reader031/viewer/2022011906/5f3e07616ac0c87053090e68/html5/thumbnails/2.jpg)
Agenda
• Introduction to layers in 4.x
• Building a custom dynamic layer
• Building a custom tile layer
• Layer loading and attribution
• Custom Elevation Layer
• Using web workers
• Future work
![Page 3: ArcGIS API for JavaScript: Creating Custom Layers and Layer Views · 2017-03-21 · Introduction to Layers extensibility in 4.x •They don’t have a visual representation, they](https://reader031.fdocuments.net/reader031/viewer/2022011906/5f3e07616ac0c87053090e68/html5/thumbnails/3.jpg)
Yann Cabon
Introduction to Layers
![Page 4: ArcGIS API for JavaScript: Creating Custom Layers and Layer Views · 2017-03-21 · Introduction to Layers extensibility in 4.x •They don’t have a visual representation, they](https://reader031.fdocuments.net/reader031/viewer/2022011906/5f3e07616ac0c87053090e68/html5/thumbnails/4.jpg)
Introduction to Layers extensibility in 4.x
• They don’t have a visual representation, they are a data access
• Create a custom layer
- To connect to a service not supported (or not yet) by the API
- To work on the data client-side before it’s being displayed
- Because you can
• We will cover:
- Dynamic layer
- Tile
- Elevation
• 4.4 with introduce new layer classes designed for extensibility
![Page 5: ArcGIS API for JavaScript: Creating Custom Layers and Layer Views · 2017-03-21 · Introduction to Layers extensibility in 4.x •They don’t have a visual representation, they](https://reader031.fdocuments.net/reader031/viewer/2022011906/5f3e07616ac0c87053090e68/html5/thumbnails/5.jpg)
Yann Cabon
Custom Dynamic Layers
![Page 6: ArcGIS API for JavaScript: Creating Custom Layers and Layer Views · 2017-03-21 · Introduction to Layers extensibility in 4.x •They don’t have a visual representation, they](https://reader031.fdocuments.net/reader031/viewer/2022011906/5f3e07616ac0c87053090e68/html5/thumbnails/6.jpg)
Dynamic Layer
• displays an image that covers the view. At the end of a user interaction, a new image
is requested.
- 1 export in MapView
- 2 exports in SceneView
• Pro: One export on the service
• Con: Export is different each time, so cannot be cached in the browser cache
![Page 7: ArcGIS API for JavaScript: Creating Custom Layers and Layer Views · 2017-03-21 · Introduction to Layers extensibility in 4.x •They don’t have a visual representation, they](https://reader031.fdocuments.net/reader031/viewer/2022011906/5f3e07616ac0c87053090e68/html5/thumbnails/7.jpg)
Dynamic Layer
• Extensibility hooks:
- BaseDynamicLayer.getImageUrl
- Easiest method that creates a url for a extent and size
- BaseDynamicLayer.fetchImage
- Method that do the actual image fetching
- To extend if you need to transform data.
- Default implementation fetch the image at the URL returned by getImageUrl
• Example:
- WMS Layer from GeoBretagne.fr
- http://geobretagne.fr/mapfishapp/
- http://geobretagne.fr/geonetwork/apps/georchestra/?uuid=048622c5-b333-4c2b-94ec-40a41608dc06
![Page 8: ArcGIS API for JavaScript: Creating Custom Layers and Layer Views · 2017-03-21 · Introduction to Layers extensibility in 4.x •They don’t have a visual representation, they](https://reader031.fdocuments.net/reader031/viewer/2022011906/5f3e07616ac0c87053090e68/html5/thumbnails/8.jpg)
Yann Cabon
Custom Tile Layers
![Page 9: ArcGIS API for JavaScript: Creating Custom Layers and Layer Views · 2017-03-21 · Introduction to Layers extensibility in 4.x •They don’t have a visual representation, they](https://reader031.fdocuments.net/reader031/viewer/2022011906/5f3e07616ac0c87053090e68/html5/thumbnails/9.jpg)
Tile Layer
• Displays adjacent images stitched together to covers the view.
• New tiles are requested as the user interacts with the view
• Pro: really efficient as tiles are cacheable resources on the server and web browser
• Con: a tile resource has to less dynamic to have an efficient layer
![Page 10: ArcGIS API for JavaScript: Creating Custom Layers and Layer Views · 2017-03-21 · Introduction to Layers extensibility in 4.x •They don’t have a visual representation, they](https://reader031.fdocuments.net/reader031/viewer/2022011906/5f3e07616ac0c87053090e68/html5/thumbnails/10.jpg)
Tile Layer
• Extensibility hooks:
- BaseTileLayer.getTileUrl
- Easiest method that creates a url for a tile id: level / row / col
- BaseTileLayer.fetchImage
- Method that do the actual image fetching
- To extend if you need to transform data.
- Default implementation fetch the image at the URL returned by getTileUrl
• Example:
- Tiled WMS Layer from GeoBretagne.fr
- Tint Stamen tiles
![Page 11: ArcGIS API for JavaScript: Creating Custom Layers and Layer Views · 2017-03-21 · Introduction to Layers extensibility in 4.x •They don’t have a visual representation, they](https://reader031.fdocuments.net/reader031/viewer/2022011906/5f3e07616ac0c87053090e68/html5/thumbnails/11.jpg)
Yann Cabon
loading and integration
![Page 12: ArcGIS API for JavaScript: Creating Custom Layers and Layer Views · 2017-03-21 · Introduction to Layers extensibility in 4.x •They don’t have a visual representation, they](https://reader031.fdocuments.net/reader031/viewer/2022011906/5f3e07616ac0c87053090e68/html5/thumbnails/12.jpg)
Loading and integration
• Layers are loadable resources
• They need to fetch some information from a service before being ready
• Is the service exists and valid?
• What are the properties of the layer?
- Extent
- Title
- Attribution
- Others…
![Page 13: ArcGIS API for JavaScript: Creating Custom Layers and Layer Views · 2017-03-21 · Introduction to Layers extensibility in 4.x •They don’t have a visual representation, they](https://reader031.fdocuments.net/reader031/viewer/2022011906/5f3e07616ac0c87053090e68/html5/thumbnails/13.jpg)
Johannes Schmid
Custom Elevation Layers
![Page 14: ArcGIS API for JavaScript: Creating Custom Layers and Layer Views · 2017-03-21 · Introduction to Layers extensibility in 4.x •They don’t have a visual representation, they](https://reader031.fdocuments.net/reader031/viewer/2022011906/5f3e07616ac0c87053090e68/html5/thumbnails/14.jpg)
Custom Elevation Layers
• Derive from BaseElevationLayer and override fetchTile()
• Return a Promise that resolves to
{
values: Array | Float32Array; // height values in meters
width: number; // this.tileSize[0] + 1 (e.g. 257)
height: number; // this.tileSize[1] + 1
noDataValue: number; // Must be equal to options.noDataValue
}
![Page 15: ArcGIS API for JavaScript: Creating Custom Layers and Layer Views · 2017-03-21 · Introduction to Layers extensibility in 4.x •They don’t have a visual representation, they](https://reader031.fdocuments.net/reader031/viewer/2022011906/5f3e07616ac0c87053090e68/html5/thumbnails/15.jpg)
Custom Elevation Layers
• Map tiles
- [x0, y0, x1, y1] = this.getTileBounds(level, row, col);
- Number of values in one row or column: e.g. 256
x0 x1
y1
y0
y1 – y0 = rows * resolution
![Page 16: ArcGIS API for JavaScript: Creating Custom Layers and Layer Views · 2017-03-21 · Introduction to Layers extensibility in 4.x •They don’t have a visual representation, they](https://reader031.fdocuments.net/reader031/viewer/2022011906/5f3e07616ac0c87053090e68/html5/thumbnails/16.jpg)
Custom Elevation Layers
• Elevation tiles
- Pixels/samples are located at the corners of cell grid
- Number of values in one row or column: e.g. 257
- But: tileInfo.tileSize[*] = 256 !
![Page 17: ArcGIS API for JavaScript: Creating Custom Layers and Layer Views · 2017-03-21 · Introduction to Layers extensibility in 4.x •They don’t have a visual representation, they](https://reader031.fdocuments.net/reader031/viewer/2022011906/5f3e07616ac0c87053090e68/html5/thumbnails/17.jpg)
Custom Elevation Layers
• Elevation tiles
- Neighboring tiles have one row of overlapping samples
Tile (l, r, c) Tile (l, r, c + 1)
![Page 18: ArcGIS API for JavaScript: Creating Custom Layers and Layer Views · 2017-03-21 · Introduction to Layers extensibility in 4.x •They don’t have a visual representation, they](https://reader031.fdocuments.net/reader031/viewer/2022011906/5f3e07616ac0c87053090e68/html5/thumbnails/18.jpg)
Custom Elevation Layers
• Elevation tiles
- Don’t forget: Y coordinates are upside down
y0 + resolution
y0 + 2 * resolution
y0 + 3 * resolution
y0
y0 + 4 * resolution
Map coordinates Pixel coordinates
Row 0
Row 1
Row 2
Row 3
Row 4
![Page 19: ArcGIS API for JavaScript: Creating Custom Layers and Layer Views · 2017-03-21 · Introduction to Layers extensibility in 4.x •They don’t have a visual representation, they](https://reader031.fdocuments.net/reader031/viewer/2022011906/5f3e07616ac0c87053090e68/html5/thumbnails/19.jpg)
Custom Elevation Layers
• For more information on Esri Tiled Elevation Services:
https://developers.arcgis.com/documentation/tiled-elevation-service/
![Page 20: ArcGIS API for JavaScript: Creating Custom Layers and Layer Views · 2017-03-21 · Introduction to Layers extensibility in 4.x •They don’t have a visual representation, they](https://reader031.fdocuments.net/reader031/viewer/2022011906/5f3e07616ac0c87053090e68/html5/thumbnails/20.jpg)
Yann Cabon
Using Web Workers
![Page 21: ArcGIS API for JavaScript: Creating Custom Layers and Layer Views · 2017-03-21 · Introduction to Layers extensibility in 4.x •They don’t have a visual representation, they](https://reader031.fdocuments.net/reader031/viewer/2022011906/5f3e07616ac0c87053090e68/html5/thumbnails/21.jpg)
Using Web Workers
• Use worker to execute expensive work on data
- Avoid blocking the main thread
• We developed a worker framework
- https://developers.arcgis.com/javascript/latest/api-reference/esri-core-workers.html
• Example: Generating contour lines from elevation data
- http://blog.bruce-hill.com/meandering-triangles/
![Page 22: ArcGIS API for JavaScript: Creating Custom Layers and Layer Views · 2017-03-21 · Introduction to Layers extensibility in 4.x •They don’t have a visual representation, they](https://reader031.fdocuments.net/reader031/viewer/2022011906/5f3e07616ac0c87053090e68/html5/thumbnails/22.jpg)
Future work
![Page 23: ArcGIS API for JavaScript: Creating Custom Layers and Layer Views · 2017-03-21 · Introduction to Layers extensibility in 4.x •They don’t have a visual representation, they](https://reader031.fdocuments.net/reader031/viewer/2022011906/5f3e07616ac0c87053090e68/html5/thumbnails/23.jpg)
Future work
• Building useful examples
- Loading a TPK and other file types
- Drawing vector data on canvas
- Which ones would you like to see?
• Data refresh / update
• Custom LayerViews
![Page 24: ArcGIS API for JavaScript: Creating Custom Layers and Layer Views · 2017-03-21 · Introduction to Layers extensibility in 4.x •They don’t have a visual representation, they](https://reader031.fdocuments.net/reader031/viewer/2022011906/5f3e07616ac0c87053090e68/html5/thumbnails/24.jpg)