GaussianSplatLayer | Sample | ArcGIS Maps SDK for JavaScript

This sample shows how to add an instance of GaussianSplatLayer to a Scene.

A Gaussian splat layer enables highly realistic visualizations of complex geometry. It is well suited for thin and intricate structures such as bridges, telecom towers, powerline pylons, and vegetation, and can be combined with other geospatial content.

In this sample, a Gaussian splat layer visualizes an industrial area in Vietnam.

This Gaussian splat layer was produced with ArcGIS Reality and processed by Esri.

<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <title>GaussianSplatLayer | Sample | ArcGIS Maps SDK for JavaScript</title>  <script type="module" src="https://js.arcgis.com/5.0/"></script> <style> html, body { margin: 0; height: 100%; } </style> </head> <body> <arcgis-scene basemap="satellite" ground="world-elevation"> <arcgis-zoom slot="top-left"></arcgis-zoom> <arcgis-navigation-toggle slot="top-left"></arcgis-navigation-toggle> <arcgis-compass slot="top-left"></arcgis-compass> <div slot="top-right"> <calcite-button id="closeup">Close-up</calcite-button> <calcite-button id="overview">Overview</calcite-button> </div> </arcgis-scene> <script type="module"> // Import required modules const [GaussianSplatLayer, Camera] = await $arcgis.import([ "@arcgis/core/layers/GaussianSplatLayer.js", "@arcgis/core/Camera.js", ]); // Get a reference to the Scene component const viewElement = document.querySelector("arcgis-scene"); // Create Gaussian Splat Layer const layer = new GaussianSplatLayer({ portalItem: { id: "01596d71a5ce40ec8a6f21baad6e5b6f" }, elevationInfo: { mode: "absolute-height", offset: 10, }, }); // Define Cameras for two viewpoints const overview = new Camera({ position: { spatialReference: { latestWkid: 3857, wkid: 102100, }, x: 12110927.1, y: 1733100.8, z: 278.8, }, heading: 37.1, tilt: 71.9, }); const closeup = new Camera({ position: { spatialReference: { latestWkid: 3857, wkid: 102100, }, x: 12111082.4, y: 1733763.3, z: 122.4, }, heading: 45, tilt: 69, }); // Wait for the view, then add the layer await viewElement.viewOnReady(); viewElement.map.add(layer); // and set overview viewpoint as initial camera viewElement.camera = overview; // Call goTo viewpoint on button clicks document.getElementById("overview").addEventListener("click", () => { viewElement.goTo(overview, { duration: 3000 }); }); document.getElementById("closeup").addEventListener("click", () => { viewElement.goTo(closeup, { duration: 3000 }); }); </script> </body> </html>