Skip to content

Instantly share code, notes, and snippets.

@nixta

nixta/animatedotwithwebscene.js

Created May 14, 2017 01:05
Show Gist options
  • Save nixta/8d9d2e38a0c357365e4eb989e68429ca to your computer and use it in GitHub Desktop.
Save nixta/8d9d2e38a0c357365e4eb989e68429ca to your computer and use it in GitHub Desktop.
Download ZIP
Animate a dot in a graphics layer having loaded a web scene.
Raw
animatedotwithwebscene.js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Load a basic web scene - 4.3</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.3/esri/css/main.css">
<script src="https://js.arcgis.com/4.3/"></script>
<script>
require([
"esri/views/SceneView",
"esri/WebScene",
"esri/layers/GraphicsLayer",
"esri/Graphic",
"esri/geometry/Point",
"esri/geometry/Polyline",
"esri/geometry/Polygon",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/WebStyleSymbol",
"dojo/dom",
"dojo/domReady!"
], function(
SceneView, WebScene,
GraphicsLayer,
Graphic, Point, Polyline, Polygon,
SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, WebStyleSymbol,
dom
) {
var titleDiv = dom.byId("titleDiv");
/************************************************************
* Creates a new WebScene instance. A WebScene must reference
* a PortalItem ID that represents a WebScene saved to
* arcgis.com or an on-premise portal.
*
* To load a WebScene from an on-premise portal, set the portal
* url in esriConfig.portalUrl.
************************************************************/
var scene = new WebScene({
portalItem: { // autocasts as new PortalItem()
id: "01135fa3c8164635ad5520903bd45022"
}
});
/************************************************************
* Set the WebScene instance to the map property in a SceneView.
************************************************************/
var view = new SceneView({
map: scene,
container: "viewDiv",
padding: {
top: 40
}
});
view.then(function() {
// when the scene and view resolve, display the scene's
// title in the DOM
var title = scene.portalItem.title;
titleDiv.innerHTML = title;
});
/*********************
* Add graphics layer
*********************/
var graphicsLayer = new GraphicsLayer();
scene.add(graphicsLayer);
/*************************
* Add a 3D point graphic
*************************/
// London
markerSymbol = new SimpleMarkerSymbol({
color: [226, 119, 40],
outline: { // autocasts as new SimpleLineSymbol()
color: [255, 255, 255],
width: 2
}
});
var pointGraphic;
function addPoint(x,y) {
var point = new Point({
x: x,
y: y
});
//graphicsLayer.remove(pointGraphic);
pointGraphic = new Graphic({
geometry: point,
symbol: markerSymbol
});
graphicsLayer.add(pointGraphic);
}
// -8236099.103545825, 4969602.200684823
// -0.178,51.48791
// -73.98613706238304, 40.709603865398066
var initX = -73.98613706238304;
var initY = 40.709603865398066;
addPoint(initX, initY);
var xOff = 0;
window.setInterval(function () {
// Update the x/y
addPoint(initX+xOff, initY);
xOff += 0.00001;
}, 100);
});
</script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#titleDiv {
background-color: lightgray;
color: black;
padding: 5px;
position: absolute;
z-index: 2;
top: 0;
right: 0;
font-size: 20pt;
font-weight: bolder;
width: 100%;
height: 30px;
text-align: center;
opacity: 0.75;
}
</style>
</head>
<body>
<div id="viewDiv">
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment