ArcGIS API for JavaScript——使用webscene的幻灯片

1、使用幻灯片的案例

https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=webscene-slides

2、参照以上案例，自己写个案例

上面的案例略微复杂，所以自己写个简单的vue组件的案例。

只有webscene才有幻灯片，遍历webscene的presentation.slides，创建幻灯片。

<template>
    <div id="viewDiv">
        <div id="slidesDiv" class="esri-widget"></div>
    </div>
</template>
<script>
import WebScene from "@arcgis/core/WebScene";
import SceneView from "@arcgis/core/views/SceneView";
import esriConfig from "@arcgis/core/config"
/*
创建幻灯片、试用webscene
*/
export default {
    name:"test002",
    data() {
        return {
            content:"Hello"
        }
    },
    created(){
        
    },
    methods:{

    },
    mounted(){

        esriConfig.apiKey = "your api key";
        var scene = new WebScene({
          basemap:"dark-gray-vector",
          ground:"world-elevation",
          portalItem: {
            // autocasts as new PortalItem()
            id: "3a9976baef9240ab8645ee25c7e9c096"
          }
        });

        var view = new SceneView({
          map: scene,
          container: "viewDiv",
          padding: {
            top: 40
          }
        })
        function createSlideUI(slide, placement) {
          var slideElement = document.createElement("div");
          // Assign the ID of the slide to the <span> element
          slideElement.id = slide.id;
          slideElement.classList.add("slide");

          var slidesDiv = document.getElementById("slidesDiv");
          if (placement === "first") {
            slidesDiv.insertBefore(slideElement, slidesDiv.firstChild);
          } else {
            slidesDiv.appendChild(slideElement);
          }

          var title = document.createElement("div");
          title.innerText = slide.title.text;
          // Place the title of the slide in the <div> element
          slideElement.appendChild(title);

          var img = new Image();
          // Set the src URL of the image to the thumbnail URL of the slide
          img.src = slide.thumbnail.url;
          // Set the title property of the image to the title of the slide
          img.title = slide.title.text;
          // Place the image inside the new <div> element
          slideElement.appendChild(img);

          /*********************************************************************
           * Set up a click event handler on the newly created slide. When clicked,
           * the code defined below will execute.
           *********************************************************************/
          slideElement.addEventListener("click", function() {
            /*******************************************************************
             * Remove the "active" class from all elements with the .slide class
             *******************************************************************/
            var slides = document.querySelectorAll(".slide");
            Array.from(slides).forEach(function(node) {
              node.classList.remove("active");
            });

            /*******************************************************************
             * Add the "active" class on the current element being selected
             *******************************************************************/
            slideElement.classList.add("active");

            slide.applyTo(view);
          });
        }
        view.ui.add(["slidesDiv"], "top-right");
        //发生在scene.when()之后
        view.when(()=>{
            console.log("所有图层和底图被加载");
            var slides = scene.presentation.slides;
            slides.forEach(createSlideUI);
        })
    }
}
</script>
<style scoped>
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
            #slidesDiv {
        background-color: white;
        opacity: 0.9;
        color: black;
        padding: 10px;
        visibility: visible;
        bottom: 20px;
        overflow-y: auto;
        text-align: center;
        height: 260px;
      }

      #slidesDiv .slide {
        /* Show cursor as pointer when on a slide */
        cursor: pointer;
        margin-bottom: 6px;
      }

      #slidesDiv .slide .title {
        /* Center the title text */
        text-align: center;
      }
      /* Draw active slide with a nice border around the thumbnail */

      #slidesDiv .slide.active img {
        box-shadow: 0px 0px 12px black;
        border-style: solid;
        border-width: thin;
        border-color: black;
      }
</style>