<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1">
<title>San Fran Art</title>
<script src="https://js.arcgis.com/4.13/"></script>
<script>
require([
"esri/WebScene",
"esri/views/SceneView",
"esri/layers/SceneLayer",
"esri/core/watchUtils"
], function(WebScene, SceneView, SceneLayer, watchUtils) {
// you can tweak these parameters to change
// the style of the edges
const sketchEdges = {
type: "sketch",
color: [0, 0, 0, 0.8],
size: 2,
extensionLength: 10
};
// this renderers all the layers with semi-transparent white faces
// and displays the geometry with sketch edges
const renderer = {
type: "simple", // autocasts as new SimpleRenderer()
symbol: {
type: "mesh-3d",
symbolLayers: [{
type: "fill",
material: {
color: [255, 255, 255, 0.1],
colorMixMode: "replace"
},
edges: sketchEdges
}]
}
};
// load the scene layer from ArcGIS Online
// and set the renderer we defined above
const sceneLayer = new SceneLayer({
portalItem: {
id: "f5c497819a374941b0ce8d9b0e979819"
},
renderer: renderer,
popupEnabled: false
});
// I've created a webscene in ArcGIS Online
// the webscene has a transparent background,
// so that I can display the paper background
const webscene = new WebScene({
portalItem: {
id: "df4deb734f8d49d1a441d2fccd752628"
},
layers: [sceneLayer]
});
// define the view
const view = new SceneView({
container: "viewDiv",
map: webscene,
// this property should be set to true
// so that we can set a transparent background
alphaCompositingEnabled: true,
ui: {
components: []
}
});
// this part makes sure that the sceneLayer is rendered
// when we start the animation in the begining
view.whenLayerView(sceneLayer)
.then(function(layerView) {
watchUtils.whenFalseOnce(layerView, "updating", function(value) {
view.goTo(webscene.presentation.slides.getItemAt(0).viewpoint,
{
// make the animation really slow
speedFactor: 0.005,
// use the same speed all the time during the animation
easing: "linear"
});
});
});
window.view = view;
});
</script>
</head>
<body>
San Francisco - ArcGIS API for JavaScript 2018
</body>
</html>