<!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>