E-Learning for the GIS Professional Any Time, Any...
79
Lesson 1: Introduction E-Learning for the GIS Professional – Any Time, Any Place! geospatialtraining.com
Transcript of E-Learning for the GIS Professional Any Time, Any...
Lesson 1: IntroductionE-Learning for the GIS Professional – Any Time, Any Place!
geospatialtraining.com
Course Overview
• Lesson 1: Introduction
• Lesson 2: Programming Constructs
• Lesson 3: Maps, Views, and Layers
• Lesson 4: 3D Mapping with Scenes
2
Agenda
• What is version 4.0 of the ArcGIS API for JavaScript?
• What can you do with it?
• What can’t you do with it?
• Where to look for help
3
What Is Version 4 All About?
• A radical update of the ArcGIS API for JavaScript
• Add new features, including
– 3D capability powered by Web Scenes
– Layer Items, so you can choose which individual map layers appear in your application
– Better, more customizable widgets
– Powerful thematic mapping in both 2D and 3D
– Local geometry engine, for fast geoprocessing operations
• Simplify the API
– A new programming pattern
• Promises
• Autocasting
4
3D Support With Web Scenes
• Web scenes are core to 3D mapping across ArcGIS
– Create with ArcGIS Pro and ArcGIS Online using the Scene Builder
– Use existing web scenes on ArcGIS Online: http://goo.gl/OAGLU9
– Support large datasets, optimized for any view
• Stored as JSON (JavaScript Object Notation)
– Easy to use within the ArcGIS API for JavaScript as Scene Layers
• Visualize data:
– 3D symbology
– Change camera angle, position
– Change environment: lighting/atmosphere
5
Layer Items
• Similar to web maps:
– Support initial extent, rendering, popups, and other settings
• But, settings are defined for individual layers and not the entire map
– Choose individual layers for your application
– Share with others easily
6
Better Widgets
• Separation of core logic and presentation
– Easier positioning with the viewAPI
– Easier styling/theming
– Create and customize widgets with standard 3rd
party frameworks like Boostrap, React, or
Jquery
• Adapt to any screen resolution
– Ideal for mobile devices
• Improved widgets
– Map preserves center when screen size changes
– Better popups!
7
Thematic Mapping
• 2D and 3D renderers
– Color
– Size
– Opacity
8
Local Geometry Engine
• Execute geometry service operations locally
– Buffer
– Project
– Intersect
– Measurement, and more
• Will support radical new implementation of
editing functionality in the near future
9
Vector Tile Layers
• Similar to image tiles, but with vector data
– Drawn on the client
– Great performance
– Can customize appearance programmatically
– Adapt to any display resolution
• Create as a vector tile package in ArcGIS Pro
– Publish to ArcGIS Online as a hosted tile layer
10
Limitations
• Does not include all the
functionality available in 3.x
• Notable omissions:
– Editing
– Certain GIS functionality
widgets
– Printing
– OGC layers
• See functionality matrix:
http://goo.gl/xj1yTQ
11
Activity
• 1-1: Accessing the API documentation and samples
12
Lesson 2: Programming ConstructsE-Learning for the GIS Professional – Any Time, Any Place!
geospatialtraining.com
Agenda
• Constructors
• Properties
• Collections
• Promises
14
Constructors
• One constructor per object
• Can set all object properties from within the constructor
• No constructors accept JSON. Use Class.fromJSON() instead, for example:
15
var view = new MapView({
container: "viewDiv",
map: map,
zoom: 4,
center: [25, 45]
});
var view = new MapView();
view.center = [25, 45];
view.scale = 122000;
var graphic = Graphic.fromJSON({ ... });
Property Getters
• object.propertyName, or object.get()
16
var basemapTitle = null;
/* Check for existence of basemap property
before retrieving its title */
if (map.basemap) {
basemapTitle = basemap.title;
}
// get() does the check for you
var basemapTitle = map.get("basemap.title");
Property Setters
• Set a property’s value directly on the object
• Use .set(), which also lets you set multiple property values simultaneously
17
view.center = [-120, 60];
view.zoom = 6;
var viewProperties = {
center: [-120, 60],
zoom: 7
};
view.set(viewProperties);
Monitoring Property Changes
• Instead of wiring up handlers, watch() lets you monitor property changes directly
• Use object.watch(propertyName, callback)
– Example:
– Console output:
18
// watch handler – current basemap is ‘streets’
var handle = map.watch('basemap.title', function(newValue, oldValue, property, object) {
console.log("New value: ", newValue); // The new property value
console.log("Old value: ", oldValue); // The previous property value
console.log("Watched property: ", property); // The property being watched
console.log("Watched object: ", object); // The object with the property
});
map.basemap = 'hybrid';
Watching Multiple Properties
• Handler for watching multiple property values
• Map pan
• Map zoom
19
view.watch("center, scale", (value, oldValue, property) => {
if (property === "center") {
// Log the x & y of center
console.log("center: " + value.x + "," + value.y);
} else {
// Log the scale
console.log("scale: " + value);
}
});
esri/core/watchUtils
• Utility methods for watching properties
– Includes whenTrue(), whenFalse(), whenDefined(), pausable() etc.
• Example using whenTrue():
• Example using whenTrueOnce():
• init(): triggered for the initial value of a property and all subsequent changes
• pausable(): allows you to pause() and then resume() a watch handler
20
watchUtils.whenTrue(view, "interacting", function(){
console.log("User is interacting with the map view");
});
watchUtils.whenTrueOnce(view, "interacting", function(){
console.log("User is interacting with the map for the first time");
});
Autocasting
• Where the API loads the required modules and calls their constructors for you
• Only available for types flagged as autocast in the API documentation
21
require([
"esri/Color",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleMarkerSymbol"
], function (
Color, SimpleLineSymbol, SimpleMarkerSymbol
) {
var symbol = new SimpleMarkerSymbol({
style: "diamond",
color: new Color([255, 128, 45]), // You typically
create the instance with the "new" keyword
outline: new SimpleLineSymbol({ // also here
style: "dash-dot",
color: new Color([255, 128, 45]) // and here
})
});
});
require([
"esri/symbols/SimpleMarkerSymbol"
], (
SimpleMarkerSymbol
) {
var symbol = new SimpleMarkerSymbol({
style: "diamond",
color: [255, 128, 45], // No need to write new
Color()
outline: { // No need for new SimpleLineSymbol()
style: "dash-dot",
color: [255, 128, 45] // No need for new Color()
}
});
});
Without autocasting With autocasting
Collections
• add: Add the specified item to the Collection.
• addMany: Add an array of objects to the Collection.
• clone: Duplicates the collection.
• ofType: Allows you to create typed Collections.
• remove: Remove the parameter item from the Collection.
• removeAll: Empty the Collection.
• removeAt: Remove an item from the Collection at a specific index.
• removeMany: Removes the items passed in as an array.
• reorder: Move an item to a new index position.
• toArray: Export the Collection to a normal JavaScript array.
22
Promises
• The Promise object is used for asynchronous operations
• A Promise represents a value that will be available later on
– Acts as a “placeholder” for that value
• A Promise is in one of three states
– Pending: waiting for operation to complete
– Resolved: handled by callback
– Rejected: handled by errback
• A Promise resolves as either
– A value
– Another Promise – allows “chaining” of promises
23
A Promise represents a value which may be available now, or in the future, or never.
Promises and .then()
• The .then() method is a convenient way to work with promises]
• Syntax of the .then() method:
• Example:
24
myAsyncFunction().then(function(resolvedVal){
// This is called when the promise resolves
console.log(resolvedVal); // Logs the value the promise resolves to
}, function(error){
// This function is called when the promise is rejected
console.error(error); // Logs the error message
});
myAsyncFunction().then(callback, errback);
Chaining Promises: Example
25
var firstMethod = function() {
var promise = new Promise(function(resolve, reject){
setTimeout(function() {
console.log('first method completed');
resolve({data: '123'});
}, 2000);
});
return promise;
};
var secondMethod = function(someStuff) {
var promise = new Promise(function(resolve, reject){
setTimeout(function() {
console.log('second method completed');
resolve({newData: someStuff.data + ' some more data'});
}, 2000);
});
return promise;
};
var thirdMethod = function(someStuff) {
var promise = new Promise(function(resolve, reject){
setTimeout(function() {
console.log('third method completed');
resolve({result: someStuff.newData});
}, 3000);
});
return promise;
};
firstMethod()
.then(secondMethod)
.then(thirdMethod);
Activity
• Activity 2-1: Watching properties
• Activity 2-2: Working with promises
26
Lesson 3: Maps, Views, and LayersE-Learning for the GIS Professional – Any Time, Any Place!
geospatialtraining.com
Agenda
• Maps and Views
• The different types of map Layer
• Accessing data via the LayerView
28
Maps and Views
29
Services
Map
Layers
SceneView (3D)MapView (2D)
LayerView LayerView
graphics graphics
Not
rendered
Rendered
Maps and Views
30
Services
Map
Layers
SceneView (3D)MapView (2D)
LayerView LayerView
graphics graphics
Not
rendered
Rendered
Maps and Views
31
Services
Map
Layers
SceneView (3D)MapView (2D)
LayerView LayerView
graphics graphics
Not
rendered
Rendered
Maps and Views
32
Services
Map
Layers
SceneView (3D)MapView (2D)
LayerView LayerView
graphics graphics
Not
rendered
Rendered
The Map as a Datasource
Data
33
Map
ViewVisualization of
the data
Using the MapView for 2D Rendering
34
WebMaps
35
Manipulating Web Map Data
• To manipulate WebMap data before displaying it in a view, call webmap.load()
– E.g. to filter the information in a layer
– The view normally executes this step for you
36
var webmap = new WebMap({
portalItem: {
id: "f2e9b762544945f390ca4ac3671cfa72"
}
});
webmap.load().then() {
// manipulate the data
}
var view = new MapView({
map: webmap,
container: "viewDiv"
});
Maps and Layers
37
Services
Map
Layers
SceneView (3D)MapView (2D)
LayerView LayerView
graphics graphics
Not
rendered
Rendered
Layers
• A layer is a datasource
• Limited number of layers supported so far in v4:
– GraphicsLayer
– FeatureLayer
– MapImageLayer
– SceneLayer
– VectorTileLayer
• To access a map’s layers:
– map.layers: returns a collection of operational layers
– map.basemap: returns the basemap
– map.allLayers: returns operational layers and basemaps38
GraphicsLayer
• Provides the ability to “mark up” the map with graphics
• Unlike v3 of the API:
– Supports graphics of different geometries
– You cannot associate a renderer with the graphics layer
• Symbology, popups, etc must be defined for each graphic
• If you want this ability, use a FeatureLayer
• Initializing the Graphics Layer
• Adding graphics to the Graphics Layer
39
var graphicsLayer = new GraphicsLayer({
graphics: // define graphics here if you wish
})
map.add(graphicsLayer);
// add a single graphic
graphicsLayer.add(graphic);
// add an array of graphics
graphicsLayer.addMany([graphic1, graphic2, graphic3]);
FeatureLayer
•Create via a URL
•Create via a Portal Item
•From a FeatureCollection
40
var featureLayer = new FeatureLayer({
url: // url
});
var featureLayer = new FeatureLayer({
portalItem: {
id: // id
}
});
var featureLayer = new FeatureLayer({
objectIdField: "item_id",
geometryType: "point",
// Define the fields of the graphics in the
FeatureLayer
fields: [{
name: "item_id",
alias: "Item ID",
type: "oid"
}, {...}],
// Define a renderer for the layer
renderer: new SimpleRenderer({
type: "simple",
symbol: new SimpleMarkerSymbol({
...
})
}),
popupTemplate: {
title: "{title}",
content: "{description}"
},
// Collection of graphics
source: [graphic1, graphic2, graphic3]
})
MapImageLayer
•Previously known as ArcGISDynamicMapServiceLayer
•Easier to define visibility
of sublayers and filter
their content
41
var myMILayer = new MapImageLayer({
url: // url,
sublayers: [{
id: 0,
visible: true
}, {
id: 1,
visible: true
}, {
id: 2,
visible: true,
// filter layer contents with
definition expression
definitionExpression:
"pop2000 > 5000000"
}, {
id: 3,
visible: false
}]});
VectorTileLayer
• Based on the MapBox Vector Tile Specification
• Represents vector data in a format suitable for quick styling in the browser
– Rely on WebGL, which depends on video card and browser support
• A middle ground between dynamic and cached layers for performance
• Instantiate not with a URL of a map service, but with the URL of a style file
– The style file determines how the layer should be rendered
42
VectorTileLayer.ACCESS_TOKEN = "developer_access_token";
var tileLayer = new VectorTileLayer({
url: "mapbox://styles/mapbox/streets-v8"
});
var map = new Map({
layers: [tilelayer]
});
Group Layers
• Group multiple layers of the same or different types
• For example, to control visibility of related layers
43
var layers = {
new FeatureLayer({...}},
new FeatureLayer({...}),
new GraphicsLayer({...})
}
var groupLayer = new GroupLayer({
layers });
var map = new Map({
basemap: "streets",
layers: [groupLayer]
});
Scene Layer
• Provides 3D capability, using a scene ser vice
• Very similar workflow to the other layers
44
Maps and Views
45
Services
Map
Layers
SceneView (3D)MapView (2D)
LayerView LayerView
graphics graphics
Not
rendered
Rendered
Accessing Feature Layer Data from the LayerView
• Wait until the LayerView has finished loading the graphics by handling the promise
returned by layerView.whenLayerView()
– For a feature layer, this returns a FeatureLayerView
– Other types include GraphicsLayerView, ImageryLayerView
• Use the.queryFeatures() method on the returned FeatureLayerView object
to access the feature layer’s features
46
view.whenLayerView(layer).then(function(layerView) {
/* The LayerView has finished drawing the graphics,
so access them here */
watchUtils.whenTrueOnce(layerView, "updating",
function() {
layerView.queryFeatures().then(function(graphics) {
// do something with the graphics
});
});
});
Useful Methods for Working with Feature Layers
These include:
• .queryFeatures() – Access the FeatureLayer’s graphics objects (I.e. individual
features)
• .queryExtent() – Returns the extent of the features in the LayerView
• .queryFeatureCount() – Returns the number of features in the LayerView
• .queryObjectIds() – Returns an array of Object IDs for the features in the
LayerView
47
Activities
• 3-1: Create a simple 2D map
• 3-2: Create a web map
• 3-3: Access feature layer data
• 3-4: Work with a vector tile layer
48
Lesson 4: 3D Mapping with ScenesE-Learning for the GIS Professional – Any Time, Any Place!
geospatialtraining.com
Agenda
• Scenes and Webscenes
• Customizing the SceneView
– Camera and environment
• Adding layers
• Symbology and rendering
50
Working with Scenes
• Scene Viewer is an app built into ArcGIS Online and Portal for creating and interacting
with 3D scenes, called WebScenes
– Author WebScenes in this environment with Scene Viewer
• Can also author and publish scene services and WebScenes from the desktop with ArcGIS
Pro
• Scenes can be either global (worldwide) or local (smaller extent)
– Local scenes can be in any projected coordinate system
51
Adding a WebScene to Your Application
• Use the WebScene Portal Item ID
52
require([
"esri/views/SceneView",
"esri/WebScene",
"dojo/dom",
"dojo/domReady!"
], function(
SceneView, WebScene, dom
) {
// reference Portal Item ID
var scene = new WebScene({
portalItem: { // autocasts as new PortalItem()
id: "3a9976baef9240ab8645ee25c7e9c096"
}
});
// configure the SceneView map property
var view = new SceneView({
map: scene,
container: "viewDiv“
});
});
Creating a 3D Map
1. Create the Map
a) Configure basemap property
b) Specify elevation data in Map’s ground property
2. Create the SceneView
a) Specify the viewingMode (global or local)
b) Specify center and scale
c) Optionally set properties for camera and elevation
3. Add Layers
a) Apply symbology
53
Simple 3D Map
54
require([
"esri/Map",
"esri/views/SceneView",
"dojo/domReady!"
], function(Map, SceneView) {
var map = new Map({
basemap: "satellite",
ground: "world-elevation"
});
var view = new SceneView({
container: "sceneDiv",
map: map,
center: [-98.5, 29.4],
scale: 50000000,
viewingMode: 'global'
});
});
Elevation Data
• Specify elevation data in the Map’s ground property
• If you “world-elevation”, you get Esri’s default World Elevation Service
• Otherwise, you must specify an instance of Ground, which contains a collection of
ElevationLayer objects in its layers property
– ElevationLayer is specifically for elevation data. Don’t use as an operational layer.
• Adding ElevationLayer to the map:
55
var layer = new ElevationLayer({
url:
"//elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/
Terrain3D/ImageServer"
});
map.ground.layers.add(layer);
SceneView: Camera Property
• The camera property lets you define the field of view using
– Location
– Orientation
– Angle of tilt
• Example
56
var view = new SceneView({
camera: {
position: [
-122, // longitude
38, // latitude
50000 // elevation in meters
],
heading: 95
}
});
var view = new SceneView({
camera: {
position: {
x: -100, // lon
y: 45, // lat
z: 10654 // elevation in meters
},
tilt: 65
}
});
1 2
Animating the Camera
• Use the Camera object’s clone() method to update only the new values:
• Use the SceneView’s goto() method for a smooth transition:
– Specify the new Camera object
– You can chain these animations
57
var newCam = view.camera.clone();
newCam.heading = 180;
view.camera = newCam;
view.goTo(newCam);
view.goTo(graphic1)
.then(function() {
return view.goTo(graphic2);
})
.then(function() {
return view.goTo(graphic3);
});
SceneView: Environment Property
• lighting: Enables you to control the position of the sun
• starsEnabled (Boolean, default: true) - Whether or not
to show stars
– The position of the stars is accurate to the date!
• atmosphereEnabled (Boolean, default: true) – Enable
atmospheric visualization
– atmosphere (“low” or “high”, default: “low”) – quality of
the visualization
58
atmosphere: “low”
atmosphere: “high”
Controlling Sun and Shadows
• SceneView.environment.lighting
– date: Current date and time for the
simulated sun
– cameraTrackingEnabled: Update
sun date and time while the camera
changes. Enabled by default.
– directShadowsEnabled: Show
shadows cast by the sun. Enabled by
default.
– ambientOcclusionEnabled:
Calculate how light reflects off surfaces.
Disabled by default.
59
Local Scenes
• Useful for smaller extents
• Renders the surface on a flat plane
• Must be in a projected coordinate system
• Define in SceneView’s viewingMode
property (viewingMode: “local”)
• Can navigate underground
– Disable using SceneView’s
constraints property
• Can define the extent using SceneView’s
clippingArea property
60
Adding SceneLayers
• SceneLayer is a layer time optimized for streaming 3D data
– Based on a Scene Service
• Supports:
– Points and 3D Objects (buildings)
– Renderers (including visual variables)
– Popups
• Defining a SceneLayer
61
sceneLayer = new SceneLayer({
url:
"http://scene.arcgis.com/arcgis/rest/services/Hosted/Building_Hamburg/
SceneServer/layers/0";
});
3D Symbology
• Main symbol classes
– Points (PointSymbol3D)
– Lines (LineSymbol3D)
– Polygons (PolygonSymbol3D)
– Mesh (MeshSymbol3D)
– Labels (LabelSymbol3D)
• Each must be associated with a symbol Layer
• All descend from Symbol3D class
62
PointSymbol3D
63
LineSymbol3D
64
PolygonSymbol3D
65
LabelSymbol3D
66
IconSymbol3DLayer
• Uses flat 2D icon for rendering
• Draped vs billboarded
– Draped:
FeatureLayer.elevationInfo.mode=“on-
the-ground”
– Billboarded:
FeatureLayer.elevationInfo.mode=
“relative-to-ground”
67
var symbol = new PointSymbol3D({
symbolLayers: [new IconSymbol3DLayer({
size: 8, // points
resource: { primitive: "circle" },
material: { color: "red" }
})]
});
ObjectSymbol3DLayer
• Render points or polygons as a volumetric 3D shape
68
var symbol = new PointSymbol3D({
symbolLayers: [new ObjectSymbol3DLayer({
width: 5, // diameter of the object from east to
west in meters
height: 20, // height of the object in meters
depth: 15, // diameter of the object from north to
south in meters
resource: { primitive: "cylinder" },
material: { color: "red" }
})]
});
TextSymbol3DLayer
• Draw text labels for any geometry type
69
var labelClass = new LabelClass({
labelExpressionInfo: {
value: "{COUNTY}" // Text for labels comes
from COUNTY field
},
symbol: new LabelSymbol3D({
symbolLayers: [new TextSymbol3DLayer({
material: { color: [ 49,163,84 ] },
size: 12 // points
})]
})
});
// Add labels to the feature layer
featureLayer.labelsVisible = true;
featureLayer.labelingInfo = [ labelClass ];
LineSymbol3DLayer
• Renders polylines with flat 2D lines in a 3D view
• Can also be used with polygons for outlines
70
var symbol = new LineSymbol3D({
symbolLayers: [new LineSymbol3DLayer({
size: 2, // points
material: { color: "black" }
})]
});
PathSymbol3DLayer
• Renders polylines with a volumetic tube in 3D
71
var symbol = new LineSymbol3D({
symbolLayers: [new PathSymbol3DLayer({
size: 20, // 20 meters in diameter
material: { color: "#ff7380" }
})]
});
• Use for polygons and meshes in a scene view
72
var symbol = new PolygonSymbol3D({
symbolLayers: [new FillSymbol3DLayer({
material: { color: "red" }
})]
});
ExtrudeSymbol3DLayer
• Extrudes polygons up from the ground
73
var symbol = new PolygonSymbol3D({
symbolLayers: [new ExtrudeSymbol3DLayer({
size: 1000 // Height of the extrusion in meters
material: { color: "blue" }
})]
});
MeshSymbol3D
74
var symbol = new MeshSymbol3D({
symbolLayers: [new FillSymbol3DLayer({
material: { color: "green" }
})]
});
sceneLayer.renderer = new
SimpleRenderer({
symbol: symbol
});
Visual Variables
• SimpleRenderer object, visualVariables property
• Easily render underlying attribute data using continuous ramps of color, size, opacity,
rotation
• Use for:
– Thematic mapping
– Displaying real world sizes of features
75
Activities
• 4-1: Creating a 3D global map
• 4-2: Creating a 3D local map
• 4-3: Applying 3D symbology and rendering
76
Lesson 5: ConclusionE-Learning for the GIS Professional – Any Time, Any Place!
geospatialtraining.com
Going further
• Version 4 of the ArcGIS API for JavaScript is evolving
• Follow the ArcGIS Developer blog:
– https://blogs.esri.com/esri/arcgis/category/developer/
• Watch the Developer Summit tech sessions:
– 2016: http://video.arcgis.com/series/261/2016-esri-developer-summit-tech-sessions
• Read the API documentation and experiment!
– https://developers.arcgis.com/javascript/
• Watch out for webinars and other tech sessions from Geospatial Training
– http://geospatialtraining.com/upcoming-webinars/
78
Thank you
• Thank you for attending this class
• Any questions, please contact us:
– http://geospatialtraining.com/contact-us/
79
![[Arcgis] Riset ArcGIS JS & Flex](https://static.fdocuments.in/doc/165x107/55cf96d7550346d0338e2017/arcgis-riset-arcgis-js-flex.jpg)
