Building 3D Web Applications with ArcGIS

Moxie Zhang | Javier Gutierrez

Topics

Introduce Web 3D

- Why Web 3D for ArcGIS - Use cases - What is Web 3D for

ArcGIS - Web 3D Architecture

What’s New and Road Ahead

- Scene Service - Web Scene - Elevation - Symbology

Develop Web 3D Apps

- Create 3D map environment

- Add 3D data - Visualize feature data - Use geoprocess - Render 3D Symbols - More …

Why Web 3D

Our users are solving real life problems using 3D tools, on the Web

WE LIVE IN A 3D WORLD

Introduce

Web 3D for ArcGIS

Web 3D initiative Enable 3D GIS on mobile devices & browsers

Story Telling in 3D

Asset Management in 3D

Situational Awareness in 3D

Esri is developing 3D technologies around world and around the clock

Redlands Zurich

Beijing

Develop Web 3D Applications

Web 3D – Overview New 3D Service, Viewer, Apps and APIs

3D Scene Service

ArcGIS Platform

ArcGIS Server, Online, Portal

Web Scene

ArcGIS Professional

ArcGIS Online/Portal

Developers

ArcGIS API for JavaScript

ArcGIS Runtime SDKs 3rd Party

tools

Web Scene Layer

Web 3D Client Architecture

Loosely coupled

implementation(s)

Abstracted public

API methods

Web 3D Client Architecture

• ArcGIS API for JavaScript with 3D capabilities

- New internal architecture but same* public JS API classes

* 99% backwards compatible code + new classes for 3D

Viewport(s) LayerView(s)

Map Layer

Loosely coupled

implementation(s)

Abstracted public

API methods

Web 3D Client Architecture

• Developers now need to choose between a Viewport type:

- 2D, 3D WebGL or 3D Plugin

* 99% backwards compatible code + new classes for 3D

2D Viewport

Layer Map

3D Viewport

2D LayerView

3D LayerView

Demo: Map and Viewport

Demo: Map and Viewport

New ArcGIS API for Javascript 3D Capabilities

• Same Javascript class model extended with - New 3D Layer (Scene Service Layer) - New 3D Symbology - New 3D Mesh geometry type - Added Z values to geometries

• Same programming pattern that has been taught, learned and used for many years

• The 3D core and rendering technologies are transparent to developers and browser-independent

Let’s Code

Create a Map

Add a Basemap

Add 3D Scene Service Layer

Add A Dynamic Map Layer

Add a Graphic Layer

Add a Feature Service Layer

3D Symbology

Running a Geoprocess

Demo: Elevation

The latest and more…

Intro to ArcGIS Scene Service

• New service type in ArcGIS Server • For 3D vector data (mesh, point, line, polygon) • Based on vector cache (i3s)

- Spatial index - Level of detail - Optimized data encoding

• Data streaming through REST • Client-side rendering

Consuming ArcGIS Scene Service

• JS API - Scene Service Layer • How does it work?

- Quad-tree node traversal - Based on distance to camera - Level of Detail support - 3D Geometry / Textures

• How to use it?

Demo: Scene Service Layer

Web Scene

Web Scene

Desktop Web Device

Server Online Content and Services

• New in ArcGIS Online and Portal

• Mash-up of 3D / 2D layers

• Web Scene Viewer and Author

• Built with the JavaScript API

Web Scene – designed for 3D

- 3D Layers - 3D Symbology - 3D Labels - Table of Contents - 3D Popups - Tours - …

Demo: Web Scene viewer

ArcGIS WebApp Builder for 3D Demo

2014 Developer Summit

2014 User Conference

2014 ArcGIS 10.x

Road Ahead

Building 3D Web Applications �with ArcGISTopicsSlide Number 3Our users are solving real life problems using 3D tools, on the WebSlide Number 5Web 3D initiativeSlide Number 7Slide Number 8Web 3D – OverviewWeb 3D Client ArchitectureWeb 3D Client ArchitectureWeb 3D Client ArchitectureSlide Number 13Slide Number 14New ArcGIS API for Javascript 3D CapabilitiesSlide Number 16Create a MapAdd a BasemapSlide Number 19Add 3D Scene Service LayerSlide Number 21Add A Dynamic Map LayerSlide Number 23Add a Graphic LayerAdd a Feature Service LayerSlide Number 26Slide Number 273D SymbologySlide Number 29Running a GeoprocessSlide Number 31Slide Number 32Slide Number 33Intro to ArcGIS Scene Service Consuming ArcGIS Scene Service Slide Number 36Web SceneWeb Scene – designed for 3DSlide Number 39ArcGIS WebApp Builder�for 3DSlide Number 41Slide Number 42Slide Number 43