ArcGIS API for JavaScript——加载多源数据（BIM模型、白模、倾斜摄影、点云数据）

1、多元数据资源案例地址

1、倾斜摄影数据https://developers.arcgis.com/javascript/latest/sample-code/layers-scenelayer-texture/

2、BIM数据https://developers.arcgis.com/javascript/latest/showcase/building-viewer/

3、白模数据https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=widgets-line-of-sight

4、点云数据https://developers.arcgis.com/javascript/latest/sample-code/layers-pointcloud-portal/

2、加载多元数据，并用combox切换场景

在这里需要注意的是加载BIM图层用的是BuildingSceneLayer

<template>
  <div id="viewDiv">
    <div id="el-select">
      <el-select v-model="value" placeholder="请选择" @change="basemapChange">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
  </div>
</template>
<script>
/*
添加图层，切换视点
*/
import Map from "@arcgis/core/Map";
import SceneLayer from "@arcgis/core/layers/SceneLayer";
import BuildingSceneLayer from "@arcgis/core/layers/BuildingSceneLayer";
import esriConfig from "@arcgis/core/config";
import SceneView from "@arcgis/core/views/SceneView";
import PointCloudLayer from "@arcgis/core/layers/PointCloudLayer";
import Locator from "@arcgis/core/tasks/Locator";
export default {
  name: "test005",
  data() {
    return {
      options: [
        {
          value: "view1",
          label: "倾斜摄影"
        },
        {
          value: "view2",
          label: "波士顿白模"
        },
        {
          value: "view3",
          label: "BIM模型"
        },
        {
          value: "view4",
          label: "点云数据"
        },
      ],
      value: "",
      view: null,
      dicViews: {
        "view1":{
            position: [4.84361, 45.75561, 270],
            tilt: 82,
            heading: 304,
          },
        "view2":{
            position: [-71.054, 42.348, 270],
            tilt: 82,
            heading: 304,
          },
        "view3": {
            position: [-117.184, 34.058, 270],
            tilt: 82,
            heading: 304,
          },
        "view4":{
            heading: 210,
            tilt: 78,
            position: {
              x: -8249335,
              y: 4832005,
              z: 50.7,
              spatialReference: {
                wkid: 3857,
              },
            },
          }
      },
    };
  },
  methods: {
    init() {
      esriConfig.apiKey =
        "your api key";
      //倾斜摄影数据
      var sceneLayer01 = new SceneLayer({
        portalItem: {
          id: "b66b02861afa4e8dbf9655d05bc89afc",
        },
      });

      //白模数据
      //在美国波士顿
      var sceneLayer02 = new SceneLayer({
        portalItem: {
          id: "2d913b3b8caf4f3d87be84ff19d77ac7",
        },
      });

      //bim数据
      const sceneLayer03 = new BuildingSceneLayer({
        url:
          "https://tiles.arcgis.com/tiles/V6ZHFr6zdgNZuVG0/arcgis/rest/services/BSL__4326__US_Redlands__EsriAdminBldg_PublicDemo/SceneServer",
        title: "Administration Building, Redlands - Building Scene Layer",
      });
      //   var sceneLayer03=new BuildingSceneLayer({
      //       portalItem:{
      //           id:'b5c7c99489b44f9c8759e3b847147a9a'
      //       }
      //   })

      //3Dmax数据
      var sceneLayer04 = new SceneLayer({
        portalItem: {
          id: "fdfa7e3168e74bf5b846fc701180930b",
        },
      });

      //点云数据
      var pointCloudLayer = new PointCloudLayer({
        portalItem: {
          // autocasts as new PortalItem()
          id: "fc3f4a4919394808830cd11df4631a54",
        },
      });

      var map = new Map({
        basemap: "hybrid",
        ground: "world-elevation",
        layers: [
          sceneLayer01,
          sceneLayer02,
          sceneLayer03,
          sceneLayer04,
          pointCloudLayer,
        ],
      });

      this.view = new SceneView({
        map: map,
        camera: {
          position: [4.84361, 45.75561, 270],
          tilt: 82,
          heading: 304,
        },
        container: "viewDiv",
      });
      this.view.ui.add("el-select", "top-right");
      var locatorTask = new Locator({
        url:
          "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer",
      });

      this.view.popup.autoOpenEnabled = false;
      let temView = this.view;
      this.view.on("click", function (event) {
        // Get the coordinates of the click on the view
        var lat = Math.round(event.mapPoint.latitude * 1000) / 1000;
        var lon = Math.round(event.mapPoint.longitude * 1000) / 1000;

        temView.popup.open({
          // Set the popup's title to the coordinates of the location
          title: "Reverse geocode: [" + lon + ", " + lat + "]",
          location: event.mapPoint, // Set the location of the popup to the clicked location
        });

        var params = {
          location: event.mapPoint,
        };

        // Display the popup
        // Execute a reverse geocode using the clicked location
        locatorTask
          .locationToAddress(params)
          .then(function (response) {
            // If an address is successfully found, show it in the popup's content
            temView.popup.content = response.address;
          })
          .catch(function (error) {
            // If the promise fails and no result is found, show a generic message
            temView.popup.content = "No address was found for this location";
          });
      });
    },
    basemapChange(value) {
      console.log(value);
      if (value) {
        this.view.goTo(this.shiftCamera(this.dicViews[value]), {
          speedFactor: 6,
          easing: "linear",
        });
      }
    },
    shiftCamera(value) {
      var camera = this.view.camera.clone();
      camera.position = value.position;
      camera.tilt = value.tilt;
      camera.heading = value.heading;
      return camera;
    },
  },
  mounted() {
    this.init();
  },
};
</script>
<style scoped>
#viewDiv {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}
</style>