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

transcript

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

Outline

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

LayersLayersLayers

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>

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

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

});});

</script></head><body>

});});

var map = new Map("map", {viewType: "3d",basemap: "topo",extent: new Extent({"xmin":-74.03,"ymin":40.77,"xmax":-73.83,"ymax":40.88,

"spatialReference":{"wkid":4326}})});

var url = "http://tiles.arcgis.com/.../services/New_York_City_1836/MapServer";var layer = new ArcGISTiledMapServiceLayer(url);

map.add(layer);

Working with Map layers

var map = new Map("map", {viewType: "3d",basemap: "topo",extent: new Extent({"xmin":-74.03,"ymin":40.77,"xmax":-73.83,"ymax":40.88,

"spatialReference":{"wkid":4326}})});

var url = "http://tiles.arcgis.com/.../services/New_York_City_1836/MapServer";var layer = new ArcGISTiledMapServiceLayer(url);

map.add(layer);

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

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

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

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