-
Notifications
You must be signed in to change notification settings - Fork 7
Create 3D Web Apps
Joe Bayles edited this page Jan 31, 2017
·
1 revision
This tutorial demonstrates how you can use HTML and the ArcGIS API for JavaScript to create a simple 3D application.
- First, set up a basic HTML document similar to the following:
- Inside the <head> tags, reference the ArcGIS API for JavaScript using <script> and <link> tags (this can be a locally hosted version of the API or from Esri's CDN):
- Use a second <script> tag to load specific modules from the API. Load the following modules using the syntax in the snippet below:
- Replace the line // Code to create the map and view will go here, with the code snippet to create a Map:
- Under the code to create the map add the ACO scene layer created in the Publish 3D Services section:
- Create a label class that will be used to label the stream services:
- Add your military and civilian stream services that were created in the configure GeoEvent Section. You will notice the code references a couple of icons (one for civilian aircraft and one for military aircraft) that you will need to host on your own server, these were created using the Joint military symbology explorer:
- Create a Scene view:
- Now the JavaScript needed to create a map and a view is complete! The next step is to add the associated HTML for viewing the map. For this example, the HTML is very simple: add a <body> tag, which defines what is visible in the browser, and a single <div> element inside the body where the view will be created.:
- Style the content of the page using <style> tags inside the <head>. To make the map fill the browser window, add the following CSS inside the page's <style>
- The final HTML code should look like the following:
- Host the html page and associated images (icons) on your web server.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Air Plan - Current Operations<title>
<head>
<html>
<link rel="stylesheet" href="https://js.arcgis.com/4.0/esri/css/main.css">
<script src="https://js.arcgis.com/4.0/"></script>
require([
"esri/Map",
"esri/views/SceneView",
"esri/layers/SceneLayer",
"esri/layers/StreamLayer",
"esri/layers/TileLayer",
"esri/Basemap",
"esri/renderers/SimpleRenderer",
"esri/symbols/PointSymbol3D",
"esri/symbols/IconSymbol3DLayer",
"esri/symbols/ObjectSymbol3DLayer",
"esri/layers/support/LabelClass",
"esri/symbols/TextSymbol",
"dojo/dom",
"dojo/on",
"dojo/_base/Color",
"dojo/domReady!"
], function(Map, SceneView, SceneLayer, StreamLayer, TileLayer, Basemap, SimpleRenderer, PointSymbol3D, IconSymbol3DLayer, ObjectSymbol3DLayer, LabelClass, TextSymbol, dom, on, Color)
{
// Code to create the map and view will go here
});
var map = new Map({
basemap: "streets",
ground: "world-elevation"
});
var ACOLayer = new SceneLayer({
url: 'https://airc2.esri.com/ags/rest/services/Hosted/ACO_3D/SceneServer/layers/0',
opacity: 0.5
});
map.add(ACOLayer);
var labelClass = new LabelClass({
labelExpressionInfo: { value: "{id}" },
symbol: new TextSymbol({
color: "black",
haloSize: 1,
haloColor: "white",
font: { // autocast as esri/symbols/Font
size: 8,
family: "sans-serif",
weight: "bolder"
}
})
});
var milStreamLayer = new StreamLayer('https://your.server.com/ags/rest/services/StreamServiceOut-MilitaryFlights-Default/StreamServer', {
purgeOptions: {
displayCount: 1000,
age: 0.1
}
});
var milSymbol = new PointSymbol3D({
symbolLayers: [new IconSymbol3DLayer({
size: 32, // points
resource: { href: "./10030100001101000000.png" },
})]
});
milSymbolRenderer = new SimpleRenderer({
symbol: milSymbol
});
milStreamLayer.renderer = milSymbolRenderer;
milStreamLayer.labelsVisible = true;
milStreamLayer.labelingInfo = [ labelClass ];
map.add(milStreamLayer);
var civStreamLayer = new StreamLayer('https://your.server.com/ags/rest/services/StreamServiceOut-CivilianFlights-Default/StreamServer', {
purgeOptions: {
displayCount: 1000,
age: 0.1
}
});
var civSymbol = new PointSymbol3D({
symbolLayers: [new IconSymbol3DLayer({
size: 32, // points
resource: { href: "./10040100001201000000.png" },
})]
});
civSymbolRenderer = new SimpleRenderer({
symbol: civSymbol
});
civStreamLayer.labelsVisible = true;
civStreamLayer.labelingInfo = [ labelClass ];
civStreamLayer.renderer = civSymbolRenderer;
map.add(civStreamLayer);
var view = new SceneView({
map: map,
container: "viewDiv",
camera: {
position: {
x: -124.521419, // lon
y: 35.034312, // lat
z: 125000 // elevation in meters
},
tilt: 75,
heading:60
}
})
});
<body>
<div id="viewDiv" />
</body>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0px;
height: 100%;
width: 100%;
}
</style>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Air Plan - Current Operations</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0px;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.0/esri/css/main.css">
<script src="https://js.arcgis.com/4.0/"></script>
<script>
require([
"esri/Map",
"esri/views/SceneView",
"esri/layers/SceneLayer",
"esri/layers/StreamLayer",
"esri/Basemap",
"esri/renderers/SimpleRenderer",
"esri/symbols/PointSymbol3D",
"esri/symbols/IconSymbol3DLayer",
"esri/symbols/ObjectSymbol3DLayer",
"esri/layers/support/LabelClass",
"esri/symbols/TextSymbol",
"dojo/dom",
"dojo/on",
"dojo/_base/Color",
"dojo/domReady!"
], function(
Map, SceneView, SceneLayer, StreamLayer, Basemap, SimpleRenderer, PointSymbol3D, IconSymbol3DLayer, ObjectSymbol3DLayer, LabelClass, TextSymbol, dom, on, Color
) {
var map = new Map({
basemap: "streets",
ground: "world-elevation"
});
var ACOLayer = new SceneLayer({
url: 'https://airc2.esri.com/ags/rest/services/Hosted/ACO_3D/SceneServer/layers/0',
opacity: 0.5
});
map.add(ACOLayer);
var labelClass = new LabelClass({
labelExpressionInfo: { value: "{id}" },
symbol: new TextSymbol({
color: "black",
haloSize: 1,
haloColor: "white",
font: { // autocast as esri/symbols/Font
size: 8,
family: "sans-serif",
weight: "bolder"
}
})
});
var milStreamLayer = new StreamLayer('https://airc2.esri.com/ags/rest/services/StreamServiceOut-MilitaryFlights-Default/StreamServer', {
purgeOptions: {
displayCount: 1000,
age: 0.1
}
});
var milSymbol = new PointSymbol3D({
symbolLayers: [new IconSymbol3DLayer({
size: 32, // points
resource: { href: "./10030100001101000000.png" },
})]
});
milSymbolRenderer = new SimpleRenderer({
symbol: milSymbol
});
milStreamLayer.renderer = milSymbolRenderer;
milStreamLayer.labelsVisible = true;
milStreamLayer.labelingInfo = [ labelClass ];
map.add(milStreamLayer);
var civStreamLayer = new StreamLayer('https://airc2.esri.com/ags/rest/services/StreamServiceOut-CivilianFlights-Default/StreamServer', {
purgeOptions: {
displayCount: 1000,
age: 0.1
}
});
var civSymbol = new PointSymbol3D({
symbolLayers: [new IconSymbol3DLayer({
size: 32, // points
resource: { href: "./10040100001201000000.png" },
})]
});
civSymbolRenderer = new SimpleRenderer({
symbol: civSymbol
});
civStreamLayer.labelsVisible = true;
civStreamLayer.labelingInfo = [ labelClass ];
civStreamLayer.renderer = civSymbolRenderer;
map.add(civStreamLayer);
var view = new SceneView({
map: map,
container: "viewDiv",
camera: {
position: {
x: -124.521419, // lon
y: 35.034312, // lat
z: 125000 // elevation in meters
},
tilt: 75,
heading:60
}
})
});
</script>
</head>
<body>
<div id="viewDiv" />
</body>
</html>