|
|
|
# ArcGIS Earth
|
|
|
|
ArcGIS Earth is a desktop application similar to Google Earth, with a digital globe. You can add your dataset, if you want to check the results on your local PC. After filling out the form on the website you can download the software and run it on your computer.
|
|
|
|
|
|
|
|
https://www.esri.com/en-us/arcgis/products/arcgis-earth/overview
|
|
|
|
|
|
|
|
You can also upload your own scene in the [ArcGIS online]( http://www.arcgis.com/home/signin.html) account or directly from ArcGIS Pro, if you want to use it with the ArcGIS API for JavaScript. Links for the help topics:
|
|
|
|
|
|
|
|
https://pro.arcgis.com/en/pro-app/help/sharing/overview/scene-layer-package.htm
|
|
|
|
|
|
|
|
https://enterprise.arcgis.com/en/portal/latest/use/publish-scenes.htm
|
|
|
|
|
|
|
|
# ArcGIS API for JavaScript
|
|
|
|
The JavaScript library is much bigger than the one form Cesium but is focusing additionally on the creation of 2D maps and map applications. It has similar functions to cesiumJS for the visualization of 3D models and also has to be included into the HTML code of the website. Sample codes, guides and tutorials can be found on the ESRI website:
|
|
|
|
|
|
|
|
https://developers.arcgis.com/javascript/.
|
|
|
|
|
|
|
|
https://developers.arcgis.com/javascript/latest/sample-code/layers-scenelayer/index.html
|
|
|
|
|
|
|
|
https://developers.arcgis.com/javascript/latest/sample-code/intro-sceneview/index.html
|
|
|
|
|
|
|
|
|
|
|
|
# Sample code
|
|
|
|
The following code is an adapted sample from ESRI and shows how a hosted I3S dataset is added to the viewer. Coordinates for the initial view can be selected here: https://epsg.io/.
|
|
|
|
|
|
|
|
```html
|
|
|
|
<!DOCTYPE html>
|
|
|
|
<html>
|
|
|
|
<head>
|
|
|
|
<meta charset="utf-8" />
|
|
|
|
<style>
|
|
|
|
html,
|
|
|
|
body,
|
|
|
|
#viewDiv {
|
|
|
|
padding: 0;
|
|
|
|
margin: 0;
|
|
|
|
height: 100%;
|
|
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
<link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css" />
|
|
|
|
<script src="https://js.arcgis.com/4.15/"></script>
|
|
|
|
<script>
|
|
|
|
require(["esri/Map", "esri/views/SceneView","esri/layers/SceneLayer"], function(Map, SceneView,SceneLayer) {
|
|
|
|
var map = new Map({
|
|
|
|
basemap: "streets",
|
|
|
|
ground: "world-elevation"
|
|
|
|
});
|
|
|
|
var view = new SceneView({
|
|
|
|
container: "viewDiv",
|
|
|
|
map: map,
|
|
|
|
scale: 5000,
|
|
|
|
center: [-74.013090, 40.702049]
|
|
|
|
|
|
|
|
});
|
|
|
|
var sceneLayer = new SceneLayer({
|
|
|
|
url: "https://tiles.arcgis.com/tiles/P3ePLMYs2RVChkJx/arcgis/rest/services/Buildings_NewYork_17/SceneServer/layers/0"
|
|
|
|
});
|
|
|
|
map.add(sceneLayer);
|
|
|
|
});
|
|
|
|
</script>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div id="viewDiv"></div>
|
|
|
|
</body>
|
|
|
|
</html>
|
|
|
|
```
|
|
|
|
|
|
|
|
# Styling
|
|
|
|
The ArcGIS API uses renderer objects to style the layer content.
|
|
|
|
|
|
|
|
https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-Renderer.html
|
|
|
|
|
|
|
|
# Sample code
|
|
|
|
Add a SimpleRenderer object to your code to style the 3D model according to its visualVariables.
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
var renderer = {
|
|
|
|
type: "simple",
|
|
|
|
symbol: {
|
|
|
|
type: "mesh-3d"
|
|
|
|
},
|
|
|
|
visualVariables: [
|
|
|
|
{
|
|
|
|
type: "color",
|
|
|
|
field: "NUM_FLOORS",
|
|
|
|
stops: [
|
|
|
|
{
|
|
|
|
value: 0,
|
|
|
|
color: "#e6ffcc"
|
|
|
|
},
|
|
|
|
{
|
|
|
|
value: 110,
|
|
|
|
color: "#ff0000"
|
|
|
|
}
|
|
|
|
]
|
|
|
|
}
|
|
|
|
]
|
|
|
|
};
|
|
|
|
sceneLayer.renderer= renderer;
|
|
|
|
```
|
|
|
|
|
|
|
|
**Hint**: Set the popupEnabled property of your sceneLayer object to true. Now attribute information will popup if you click on the 3D model features.
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
|
|
|
var sceneLayer = new SceneLayer({
|
|
|
|
url: "https://tiles.arcgis.com/tiles/P3ePLMYs2RVChkJx/arcgis/rest/services/Buildings_NewYork_17/SceneServer/layers/0",
|
|
|
|
popupEnabled: true
|
|
|
|
});
|
|
|
|
``` |
