3D Visualization with the ArcGIS API for...
Transcript of 3D Visualization with the ArcGIS API for...
![Page 1: 3D Visualization with the ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/proc17/tech-workshops/tw_540... · the ArcGIS API for JavaScript Kristian Ekenes Javier Gutierrez.](https://reader031.fdocuments.in/reader031/viewer/2022011801/5ae5dd737f8b9a6d4f8bdbc1/html5/thumbnails/1.jpg)
3D Visualization with the ArcGIS API for JavaScriptKristian Ekenes
Javier Gutierrez
![Page 2: 3D Visualization with the ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/proc17/tech-workshops/tw_540... · the ArcGIS API for JavaScript Kristian Ekenes Javier Gutierrez.](https://reader031.fdocuments.in/reader031/viewer/2022011801/5ae5dd737f8b9a6d4f8bdbc1/html5/thumbnails/2.jpg)
Renderers, symbols, symbol layers…
API Overview
![Page 3: 3D Visualization with the ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/proc17/tech-workshops/tw_540... · the ArcGIS API for JavaScript Kristian Ekenes Javier Gutierrez.](https://reader031.fdocuments.in/reader031/viewer/2022011801/5ae5dd737f8b9a6d4f8bdbc1/html5/thumbnails/3.jpg)
MapImageLayer
FeatureLayer
SceneLayer
CSVLayerPointCloudLayer
StreamLayer
Includes 2D data sources
![Page 4: 3D Visualization with the ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/proc17/tech-workshops/tw_540... · the ArcGIS API for JavaScript Kristian Ekenes Javier Gutierrez.](https://reader031.fdocuments.in/reader031/viewer/2022011801/5ae5dd737f8b9a6d4f8bdbc1/html5/thumbnails/4.jpg)
What can we
visualize?
• Location
• Types
• Data (numbers)
• Combinations of the above
![Page 5: 3D Visualization with the ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/proc17/tech-workshops/tw_540... · the ArcGIS API for JavaScript Kristian Ekenes Javier Gutierrez.](https://reader031.fdocuments.in/reader031/viewer/2022011801/5ae5dd737f8b9a6d4f8bdbc1/html5/thumbnails/5.jpg)
And symbol layers
Symbols
![Page 6: 3D Visualization with the ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/proc17/tech-workshops/tw_540... · the ArcGIS API for JavaScript Kristian Ekenes Javier Gutierrez.](https://reader031.fdocuments.in/reader031/viewer/2022011801/5ae5dd737f8b9a6d4f8bdbc1/html5/thumbnails/6.jpg)
3D Symbols
PointSymbol3D
based on geometry type
LineSymbol3D MeshSymbol3DPolygonSymbol3D
Points Lines Polygons Mesh
![Page 7: 3D Visualization with the ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/proc17/tech-workshops/tw_540... · the ArcGIS API for JavaScript Kristian Ekenes Javier Gutierrez.](https://reader031.fdocuments.in/reader031/viewer/2022011801/5ae5dd737f8b9a6d4f8bdbc1/html5/thumbnails/7.jpg)
3D Symbols
Flat Volumetric
Each must be composed of one or more symbol layers
Size is expressed in
screen unitsSize is expressed in
real-world units
LineSymbol3DLayer
IconSymbol3DLayer
FillSymbol3DLayer
PathSymbol3DLayer
ExtrudeSymbol3DLayer
ObjectSymbol3DLayer
![Page 8: 3D Visualization with the ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/proc17/tech-workshops/tw_540... · the ArcGIS API for JavaScript Kristian Ekenes Javier Gutierrez.](https://reader031.fdocuments.in/reader031/viewer/2022011801/5ae5dd737f8b9a6d4f8bdbc1/html5/thumbnails/8.jpg)
3D Symbols
![Page 9: 3D Visualization with the ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/proc17/tech-workshops/tw_540... · the ArcGIS API for JavaScript Kristian Ekenes Javier Gutierrez.](https://reader031.fdocuments.in/reader031/viewer/2022011801/5ae5dd737f8b9a6d4f8bdbc1/html5/thumbnails/9.jpg)
Data-driven visualization
• Renderers & Visual Variables
1. Field value(s)TOTAL_POP
2. Arcade expressionRound( ($feature.BACHELOR + $feature.MASTER) / $feature.POP_25UP) );
3. JavaScript functionfunction (graphic){
return graphic.attributes.POP_DENSITY;
}
![Page 10: 3D Visualization with the ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/proc17/tech-workshops/tw_540... · the ArcGIS API for JavaScript Kristian Ekenes Javier Gutierrez.](https://reader031.fdocuments.in/reader031/viewer/2022011801/5ae5dd737f8b9a6d4f8bdbc1/html5/thumbnails/10.jpg)
Renderers
![Page 11: 3D Visualization with the ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/proc17/tech-workshops/tw_540... · the ArcGIS API for JavaScript Kristian Ekenes Javier Gutierrez.](https://reader031.fdocuments.in/reader031/viewer/2022011801/5ae5dd737f8b9a6d4f8bdbc1/html5/thumbnails/11.jpg)
Renderers
SimpleRenderer
UniqueValueRenderer
ClassBreaksRenderer
![Page 12: 3D Visualization with the ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/proc17/tech-workshops/tw_540... · the ArcGIS API for JavaScript Kristian Ekenes Javier Gutierrez.](https://reader031.fdocuments.in/reader031/viewer/2022011801/5ae5dd737f8b9a6d4f8bdbc1/html5/thumbnails/12.jpg)
RenderersSimpleRenderer
UniqueValueRenderer
ClassBreaksRenderer• …and PointCloud Renderers
![Page 13: 3D Visualization with the ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/proc17/tech-workshops/tw_540... · the ArcGIS API for JavaScript Kristian Ekenes Javier Gutierrez.](https://reader031.fdocuments.in/reader031/viewer/2022011801/5ae5dd737f8b9a6d4f8bdbc1/html5/thumbnails/13.jpg)
RenderersVisual Variables
• Color
• Size
• Height
• Width
• Depth
• Rotation
• Opacity
• A property of the
renderer
• For numeric data-
driven continuous
visualizations
![Page 14: 3D Visualization with the ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/proc17/tech-workshops/tw_540... · the ArcGIS API for JavaScript Kristian Ekenes Javier Gutierrez.](https://reader031.fdocuments.in/reader031/viewer/2022011801/5ae5dd737f8b9a6d4f8bdbc1/html5/thumbnails/14.jpg)
RenderersVisual Variables
![Page 15: 3D Visualization with the ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/proc17/tech-workshops/tw_540... · the ArcGIS API for JavaScript Kristian Ekenes Javier Gutierrez.](https://reader031.fdocuments.in/reader031/viewer/2022011801/5ae5dd737f8b9a6d4f8bdbc1/html5/thumbnails/15.jpg)
Examples
![Page 16: 3D Visualization with the ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/proc17/tech-workshops/tw_540... · the ArcGIS API for JavaScript Kristian Ekenes Javier Gutierrez.](https://reader031.fdocuments.in/reader031/viewer/2022011801/5ae5dd737f8b9a6d4f8bdbc1/html5/thumbnails/16.jpg)
Points of interest
![Page 17: 3D Visualization with the ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/proc17/tech-workshops/tw_540... · the ArcGIS API for JavaScript Kristian Ekenes Javier Gutierrez.](https://reader031.fdocuments.in/reader031/viewer/2022011801/5ae5dd737f8b9a6d4f8bdbc1/html5/thumbnails/17.jpg)
Colorized building textures
![Page 18: 3D Visualization with the ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/proc17/tech-workshops/tw_540... · the ArcGIS API for JavaScript Kristian Ekenes Javier Gutierrez.](https://reader031.fdocuments.in/reader031/viewer/2022011801/5ae5dd737f8b9a6d4f8bdbc1/html5/thumbnails/18.jpg)
Renderers and more
PointCloudVisualization
![Page 19: 3D Visualization with the ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/proc17/tech-workshops/tw_540... · the ArcGIS API for JavaScript Kristian Ekenes Javier Gutierrez.](https://reader031.fdocuments.in/reader031/viewer/2022011801/5ae5dd737f8b9a6d4f8bdbc1/html5/thumbnails/19.jpg)
Extrusions
![Page 20: 3D Visualization with the ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/proc17/tech-workshops/tw_540... · the ArcGIS API for JavaScript Kristian Ekenes Javier Gutierrez.](https://reader031.fdocuments.in/reader031/viewer/2022011801/5ae5dd737f8b9a6d4f8bdbc1/html5/thumbnails/20.jpg)
Smart mapping in custom apps
Data exploration
![Page 21: 3D Visualization with the ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/proc17/tech-workshops/tw_540... · the ArcGIS API for JavaScript Kristian Ekenes Javier Gutierrez.](https://reader031.fdocuments.in/reader031/viewer/2022011801/5ae5dd737f8b9a6d4f8bdbc1/html5/thumbnails/21.jpg)
Resources• Get started with visualization
• ArcGIS Blog
• Icons, lines, fills
• Objects, paths, extrusion
• Real world sizes
• Documentation
• Renderer
• Symbol3D
• Symbol3DLayer
![Page 22: 3D Visualization with the ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/proc17/tech-workshops/tw_540... · the ArcGIS API for JavaScript Kristian Ekenes Javier Gutierrez.](https://reader031.fdocuments.in/reader031/viewer/2022011801/5ae5dd737f8b9a6d4f8bdbc1/html5/thumbnails/22.jpg)
Please Take Our Survey on the Esri Events App!
Select the session you attended
Scroll down to find the survey
Complete Answersand Select “Submit”
Download the Esri Events app and find
your event
![Page 23: 3D Visualization with the ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/proc17/tech-workshops/tw_540... · the ArcGIS API for JavaScript Kristian Ekenes Javier Gutierrez.](https://reader031.fdocuments.in/reader031/viewer/2022011801/5ae5dd737f8b9a6d4f8bdbc1/html5/thumbnails/23.jpg)