ArcGIS API for JavaScript - Esri · • Core objects (Map, Layer) are Promises ... ArcGIS API for...

ArcGIS API for JavaScriptBuilding 3D Web Apps

Jeremy Bartley, Javier Gutierrez, Johannes Schmid

Outline

• From 3.x to 4.0• Simple examples: map and layers• Web3D symbology

- Introduction- Examples- Elevation mode

• 3D view configuration

View-specific interfacePrimary public interfaceUnified for 2D and 3D

Extending the ArcGIS JavaScript API to 3D

• ArcGIS API for JavaScript 4.0- One API for 2D and 3D

Map

LayersLayersLayers

View

LayersLayersLayerViews

View-specific implementation

View2D | View3D

General changes from 3.x to 4.0

• Unified property access with dojo/Stateful

Old (3.x) New (4.0)Read map.property or map.getProperty() map.get("property")

Write map.property = 10 or map.setProperty(10) map.set("property", 10)

Change event map.on("property-change", ...) map.watch("property", ...)


• Unified property access with dojo/Stateful• Core objects (Map, Layer) are Promises

- Promise fulfilled when object is fully initialized

map.on("load", function() {// map is initialized

});

map.then(function() {// map is initialized

});

ArcGIS API 3.x ArcGIS API 4.0


• Unified property access with dojo/Stateful• Core objects (Map, Layer) are Promises• map.addLayer(layer) map.add(layer)

Outline




Create a Map with a 3D View

<!DOCTYPE html><html><head>

<link rel="stylesheet" href="http://jsdev.arcgis.com/4.0beta1/esri/css/esri.css"/><style> html, body, #map { height: 100%; width: 100%; margin: 0; padding: 0; } </style><script src="http://jsdev.arcgis.com/4.0beta1/"></script><script>

require(["esri/Map", "dojo/domReady!"], function(Map) {var map = new Map("map", {

viewType: "3d",basemap: "satellite"

});});

</script></head><body>

<div id="map"></div></body></html>

Working with Map layers

on(dom.byId("visible"), "change", function() {var state = layer.get("visible");layer.set("visible", !state);

});

on(dom.byId("transparent"), "change",function() {var old = layer.get("opacity");var new = curState < 1 ? 1 : 0.5;layer.set("opacity", new);

});

Elevation layers

• Elevation services- Tiled image service- Format: LERC (Limited Error Raster Compression)

• New layer type: ArcGISElevationLayer

- Multiple elevation layers will overlay just as map layers would- Planned: elevation data queries

var layer = new ArcGISElevationLayer(url);map.add(layer);

Scene Layers

• 3D objects served in i3s format- Spatially indexed- Automatic level of detail

• New layer type: SceneLayer

var layer = new SceneLayer(url);map.add(layer);

Feature layers

var url = "http://services.arcgis.com/.../05_HurricaneAndrew_1992/FeatureServer/0";var layer = new FeatureLayer(url, {

mode: FeatureLayer.MODE_SNAPSHOT});

map.add(layer);

Outline




Web 3D Symbology

• Modern and simple specification• Inherits concepts from JavaScript and Pro symbology• Design with 3D and 2D in mind future proof, flexible and extensible

Existing 2D Symbology

Renderer

SymbolsSymbols2D Symbols

New 3D Symbology

Renderer

SymbolsSymbols

3D Symbols

Symbol LayersSymbol LayersSymbol Layers

Web3D Symbology: Symbol vs Symbol Layers

• A symbol is a collection of symbol layers• The actual visualization is determined by the symbol layers• Each symbol layer is applied separately and independently

Symbol SymbolLayersSymbolLayersSymbolLayers

Web3D Symbology: flat vs. volumetric

Visualization type Web3D “flat” symbol layer Web3D “volumetric” symbol layer

Marker Icon Object

Line Line Path

Fill Fill Extrude

Web3D Symbology: API Classes

Symbol

Symbol3D

PointSymbol3D

PolygonSymbol3D

LineSymbol3D

MeshSymbol3D

SymbolLayer

Symbol3DLayer

IconSymbol3DLayer

ObjectSymbol3DLayer

LineSymbol3DLayer

PathSymbol3DLayer

FillSymbol3DLayer

1 1..*

Web3D Symbology

• Allowed Symbol – Symbol Layer combinations

Icon Object Line Path FillPointSymbol3D LineSymbol3D PolygonSymbol3D MeshSymbol3D

Outline




Feature layers

var url = "http://services.arcgis.com/.../05_HurricaneAndrew_1992/FeatureServer/0";var layer = new FeatureLayer(url, {

mode: FeatureLayer.MODE_SNAPSHOT});

map.add(layer);

Web3D Symbology

var symbolLayer = new ObjectSymbol3DLayer({resource: {

primitive: "cylinder"},material: {

color: [255, 64, 64] },width: 80000, // in metersheight: 500000 // in meters

});var symbol = new PointSymbol3D(symbolLayer);var renderer = new SimpleRenderer(symbol);

layer.set("renderer", renderer);

Web3D Symbology

var renderer = new UniqueValueRenderer(null, "CategoryLegend");

var symbolLayer = new ObjectSymbol3DLayer({material: {color: [197, 0, 255]},resource: {primitive: "cylinder"},width: 110000

});renderer.addValue("Category 5 Hurricane", new PointSymbol3D(symbolLayer));

// add other values

layer.set("renderer", renderer);

Visual Variables

renderer.setSizeInfo({field:"WIND_SPEED",minSize: 3,maxSize: 20,minDataValue: 5,maxDataValue: 50

});

renderer.setColorInfo({field: "M086_07",minDataValue: 0,maxDataValue: 100,colors: [new Color([255, 255, 255]),new Color([127, 127, 0])

]});

renderer.set("visualVariables", [{ type: "sizeInfo", // newaxis: "all", // newfield:"WIND_SPEED",minSize: 3,maxSize: 20,minDataValue: 5,maxDataValue: 50

}, {type: "colorInfo", // newfield: "M086_07",minDataValue: 0,maxDataValue: 100,colors: [new Color([255, 255, 255]),new Color([127, 127, 0])

]}

]);

ArcGIS API 3.12 ArcGIS API 4.0

Web3D Symbology

renderer.set("visualVariables",[{

"type": "sizeInfo","field": "WIND_KTS","minDataValue": 20,"maxDataValue": 150,"minSize": 60000,"maxSize": 450000,"axis": "height"

},{

"type": "sizeInfo","field": "PRESSURE","minDataValue": 920,"maxDataValue": 1020,"minSize": 40000,"maxSize": 150000,"axis": "widthAndDepth"

}]);

Web3D Symbology

renderer.set("visualVariables",[{

"type": "colorInfo","field": "WIND_KTS","minDataValue": 20,"maxDataValue": 150,"colors": [

[64, 255, 64],[255, 64, 64]

]}

]);

Outline




Web3D Symbology: Elevation

• Elevation modes

• Setting the elevation behavior

Elevation mode Symbol elevation"onTheGround" Terrain"absoluteHeight" Geometry z + Offset"relativeToGround" Terrain + [Geometry z] + Offset

layer.set("elevationInfo", {mode: "relativeToGround",offset: 1000 // meters

});


• Mode: Absolute height


• Mode: On The Ground

Outline




3D View

View-specific interfacePrimary public interfaceUnified for 2D and 3D

Map

LayersLayersLayers

View3D

3D View

• 2D view properties- Center- Scale / Zoom- Extent- Rotation

• ...are supported in 3D view on "best effort" basis

3D View: Camera

• New class

- Heading: clockwise, 0 .. 360°

- Tilt: 0..180°

- 0°straight down- 90°horizontal- 180°straight up

new Camera({position: new Point({

x: -116.54, // longitudey: 33.83, // latitudez: 1000, // altitude in metersspatialReference: new SpatialReference(4326)}),

heading: 30, // in degreestilt: 45 // in degrees

})

3D View: Camera

• Getting and setting a camera

var myCamera = map.view.get("camera");myCamera.heading = 0;map.view.set("camera", myCamera);

3D View: Animation

• Simple view animations with animateTo:

• Target can be- Camera- [longitude, latitude] (in WGS84)- Any Geometry object, or an array of Geometry objects- Graphic, array of Graphic

map.view.animateTo(target, options);

3D View: Sunlight

• Set time/date

• Enable shadows

var date = new Date("01 Jan 2015 10:00 GMT-0800");map.view.environment.lighting.set("date", date);

map.view.environment.lighting.setTimeForCurrentLocation(hours, minutes);

map.view.environment.lighting.set("shadows", true);

Conclusion

• ArcGIS API for JavaScript 4.0: an API that spans 2D and 3D- Unified where it makes sense- Different where necessary

• Layer types currently supported in 3D- ArcGISTiledMapServiceLayer- ArcGISDynamicMapServiceLayer- GraphicsLayer- FeatureLayer- ArcGISElevationLayer- SceneLayer

Outlook

• First beta release of API 4.0• Several updates throughout 2015

- Support for other layer types- New features in 3D symbology- Improved performance and visual quality- More view options for view configuration

Related Sessions

• How does the 3D Scene Viewer work?- Thursday, 1pm- Room: Mesquite GH

• ArcGIS API for JavaScript: The Road Ahead- Thursday, 5.30pm- Friday, 8.30am- Room: Primrose B

Questions?

Rate This Sessionwww.esri.com/RateMyDevSummitSession

ArcGIS API for JavaScript - Esri · • Core objects (Map, Layer) are Promises ... ArcGIS API for...

Documents

Transcript of ArcGIS API for JavaScript - Esri · • Core objects (Map, Layer) are Promises ... ArcGIS API for...