web 场景 - 幻灯片

尝试一下在线预览

此示例演示如何从 GeoScene Portal 项目加载 WebScene 并使用其幻灯片。幻灯片存储场景可视化状态的快照，以后可以重新应用到场景中。幻灯片包含视点、图层可见性、底图和环境（以及标题和缩略图）的属性，以便 3D 应用程序的用户可以轻松地导航场景并准确地重新创建该场景的存储视图。此外，该示例还展示了如何在给定当前视图的情况下创建新幻灯片并将它们存储在 WebScene 的演示文稿中。

此 WebScene 描述了波特兰市的一个虚构城市发展项目，其中包含几张幻灯片。每张幻灯片都会切换不同层的可见性或包含不同的开发观点。

WebScene 实例具有处理场景幻灯片的演示文稿属性。幻灯片的属性可用于创建 DOM 元素来表示每个视点。

// The view must be ready (or resolved) before you can
// access the properties of the WebScene
view.when(() => {
  // The slides are a collection inside the presentation
  // property of the WebScene
  const slides = scene.presentation.slides;

  // Loop through each slide in the collection
  slides.forEach((slide) => {
    // Create a new <div> element for each slide and place the title of
    // the slide in the element.
    const slideElement = document.createElement("div");
    slideElement.id = slide.id;
    slideElement.classList.add("slide");

    // Create a <div> element to display the slide title text.
    const title = document.createElement("div");
    title.innerText = slide.title.text;
    slideElement.appendChild(title);

    // Create a new <img> element and place it inside the newly created <div>.
    // This will reference the thumbnail from the slide.
    const img = new Image();
    img.src = slide.thumbnail.url;
    img.title = slide.title.text;
    slideElement.appendChild(img);
  });
});

为每张幻灯片创建新的 DOM 元素后，您可以设置一个单击事件处理程序以将幻灯片的设置应用于视图。这是通过幻灯片的 applyTo() 方法完成的。

slideElement.addEventListener("click", () => {
  slide.applyTo(view);
});

WebScene

SceneView

Portal

Slides

GeoScene API for JavaScript示例中心

web 场景 - 幻灯片