Skip to content

Instantly share code, notes, and snippets.

@ivanfoong

ivanfoong/scenelayer.html

Last active August 23, 2017 05:35
Show Gist options
  • Save ivanfoong/0676741f3fb236757b341c37f977eb88 to your computer and use it in GitHub Desktop.
Save ivanfoong/0676741f3fb236757b341c37f977eb88 to your computer and use it in GitHub Desktop.
Download ZIP
ArcGIS 3D Building
Raw
scenelayer.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Visualize a Scene Layer with continuous color - 4.4</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#infoDiv {
background-color: rgba(255, 255, 255, 0.9);
padding: 10px;
}
h3 {
border-bottom: 1px solid black;
}
img {
max-height: 200px;
max-width: 200px;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.4/esri/css/main.css">
<script src="https://js.arcgis.com/4.4/"></script>
<script>
let x = -8240524;
let y = 4968129;
let z = 1000;
let spatialReference = 3857;
let heading = 58;
let tilt = 50;
let buildingColor = [72, 220, 192];
let highlightColor = [255, 255, 255];
require([
"esri/Map",
"esri/views/SceneView",
"esri/layers/SceneLayer",
"esri/renderers/SimpleRenderer",
"esri/symbols/MeshSymbol3D",
"esri/symbols/FillSymbol3DLayer",
"dojo/domReady!"
], function(Map, SceneView, SceneLayer,
SimpleRenderer, MeshSymbol3D, FillSymbol3DLayer
) {
// Create default MeshSymbol3D for symbolizing SceneLayer
// a new FillSymbol3DLayer is created by default within the symbol
var symbol = new MeshSymbol3D(
new FillSymbol3DLayer({
material: {
color: buildingColor
}
})
);
// Create the renderer and configure visual variables
var renderer = new SimpleRenderer({
symbol: symbol
});
// Create SceneLayer and add to the map
var sceneLayer = new SceneLayer({
url: "https://tiles.arcgis.com/tiles/V6ZHFr6zdgNZuVG0/arcgis/rest/services/NYCatt/SceneServer",
title: "New York City buildings",
popupEnabled: false,
renderer: renderer, // Set the renderer to sceneLayer
});
sceneLayer.opacity = 0.7;
// Create Map
var map = new Map({
basemap: "dark-gray-vector",
ground: "world-elevation",
layers: [sceneLayer]
});
// Create the SceneView and add the map
var view = new SceneView({
container: "viewDiv",
map: map,
camera: {
position: {
x: x,
y: y,
z: z,
spatialReference: spatialReference
},
heading: heading,
tilt: tilt
},
highlightOptions: {
color: highlightColor,
fillOpacity: 0.6
}
});
var highlight = null;
view.then(function() {
// retrieve the layer view of the scene layer
view.whenLayerView(sceneLayer)
.then(function(sceneLayerView) {
// register a click event on the view
view.on("click", function(event) {
// use hitTest to find if any graphics were clicked
view.hitTest(event)
.then(function(response) {
if (highlight) {
highlight.remove();
}
// check if a graphic is returned from the hitTest
if (response.results[0].graphic) {
console.log(response.results[0].graphic.attributes.OBJECTID);
var queryExtent = sceneLayer.createQuery({
objectIds: [response.results[0].graphic.attributes.OBJECTID]
});
sceneLayer.queryExtent(queryExtent)
.then(function (result) {
// zoom to the extent of the feature; we use the expand method as we don't want to zoom very close to it
view.goTo(result.extent.expand(7), { speedFactor: 0.5 });
}, function(error){
// This function is called when the promise is rejected
console.error(error); // Logs the error message
});
// if any, remove the previous highlights
// highlight the feature with the returned objectId
highlight = sceneLayerView.highlight([response.results[0].graphic.attributes.OBJECTID]);
view.goTo({
target: response.results[0].graphic,
});
/*
// Create query object
//
// by specifying objectIds, the query will return results only for
// the feature matching the graphic's objectid
console.log(response.results[0].graphic
.attributes.OBJECTID);
var query = new Query({
objectIds: [response.results[0].graphic
.attributes.OBJECTID
],
});
console.log(query);
// queryExtent() will return the 3D extent of the feature that satisfies the query
sceneLayerView.queryExtent(query)
.then(function(result) {
view.goTo({
target: result.extent.expand(2),
tilt: 60
}, {
duration: 1000,
easing: "out-expo"
});
}, function(error){
// This function is called when the promise is rejected
console.error(error); // Logs the error message
});
// queryFeatures() will return the feature that satisfies the query - we can then get all the attributes of the feature
sceneLayerView.queryFeatures(query)
.then(function(result) {
console.log(result);
showInfo(result.features[0].attributes);
}, function(error){
// This function is called when the promise is rejected
console.error(error); // Logs the error message
});
*/
} else {
console.log("exiting");
var cam = view.camera.clone();
// the position is autocast as an esri/geometry/Point object
cam.position = {
x: x,
y: y,
z: z,
spatialReference: spatialReference
}
cam.tilt = tilt;
view.goTo(cam);
console.log("exited");
}
}, function(error){
// This function is called when the promise is rejected
console.error(error); // Logs the error message
});
}, function(error){
// This function is called when the promise is rejected
console.error(error); // Logs the error message
});
}, function(error){
// This function is called when the promise is rejected
console.error(error); // Logs the error message
});
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
Raw
webscene.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Query SceneLayerView - 4.4</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#infoDiv {
background-color: rgba(255, 255, 255, 0.9);
padding: 10px;
}
h3 {
border-bottom: 1px solid black;
}
img {
max-height: 200px;
max-width: 200px;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.4/esri/css/main.css">
<script src="https://js.arcgis.com/4.4/"></script>
<script>
require([
"esri/WebScene",
"esri/views/SceneView",
"esri/tasks/support/Query",
"dojo/dom",
"dojo/domReady!"
], function(WebScene, SceneView, Query, dom) {
// load web scene from ArcGIS Online
var webScene = new WebScene({
portalItem: {
id: "7248a5c1582041948d893d0b3d8a6a17"
}
});
// create the scene view
var view = new SceneView({
container: "viewDiv",
map: webScene,
environment: {
lighting: {
ambientOcclusionEnabled: true
}
}
});
// wait until the webscene finished loading
webScene.then(function() {
// retrieve the scene layer from the webscene - in this case it is the first layer
var sceneLayer = webScene.layers.getItemAt(0);
// retrieve the layer view of the scene layer
view.whenLayerView(sceneLayer)
.then(function(sceneLayerView) {
// register a click event on the view
view.on("click", function(event) {
// use hitTest to find if any graphics were clicked
view.hitTest(event)
.then(function(response) {
console.log(response);
// check if a graphic is returned from the hitTest
if (response.results[0].graphic) {
// Create query object
//
// by specifying objectIds, the query will return results only for
// the feature matching the graphic's objectid
console.log(response.results[0].graphic
.attributes.OBJECTID);
var query = new Query({
objectIds: [response.results[0].graphic
.attributes.OBJECTID
],
});
console.log(query);
// queryExtent() will return the 3D extent of the feature that satisfies the query
sceneLayerView.queryExtent(query)
.then(function(result) {
view.goTo({
target: result.extent.expand(2),
tilt: 60
}, {
duration: 1000,
easing: "out-expo"
});
}, function(error){
// This function is called when the promise is rejected
console.error(error); // Logs the error message
});
// queryFeatures() will return the feature that satisfies the query - we can then get all the attributes of the feature
sceneLayerView.queryFeatures(query)
.then(function(result) {
console.log(result);
showInfo(result.features[0].attributes);
}, function(error){
// This function is called when the promise is rejected
console.error(error); // Logs the error message
});
}
});
})
});
});
// function that displays some of the attributes of the feature in an HTML element
function showInfo(attributes) {
dom.byId("infoDiv").innerHTML = "<h3>" + attributes.Building_N +
"</h3>" +
"<p> Address: " + attributes.Address + "</p>" +
"<p> City: " + attributes.City + "</p>" +
"<p> Construction year: " + attributes.Construction + "</p>" +
"<img src='" + attributes.AA2_Photo + "' alt=''>";
}
// add HTML element to the view
view.ui.add(dom.byId("infoDiv"), "top-right");
});
</script>
</head>
<body>
<div id="infoDiv">Click on a building to zoom to it and get more information</div>
<div id="viewDiv"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment