Upload
others
View
45
Download
0
Embed Size (px)
Citation preview
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
• 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", ...)
General changes from 3.x to 4.0
• 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
General changes from 3.x to 4.0
• Unified property access with dojo/Stateful• Core objects (Map, Layer) are Promises• map.addLayer(layer) map.add(layer)
Outline
• From 3.x to 4.0• Simple examples: map and layers• Web3D symbology
- Introduction- Examples- Elevation mode
• 3D view configuration
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>
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>
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>
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
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
• From 3.x to 4.0• Simple examples: map and layers• Web3D symbology
- Introduction- Examples- Elevation mode
• 3D view configuration
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
• From 3.x to 4.0• Simple examples: map and layers• Web3D symbology
- Introduction- Examples- Elevation mode
• 3D view configuration
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);
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
• From 3.x to 4.0• Simple examples: map and layers• Web3D symbology
- Introduction- Examples- Elevation mode
• 3D view configuration
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
});
Web3D Symbology: Elevation
• Mode: Absolute height
Web3D Symbology: Elevation
• Mode: On The Ground
Outline
• From 3.x to 4.0• Simple examples: map and layers• Web3D symbology
- Introduction- Examples- Elevation mode
• 3D view configuration
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