要在Vue 3中使用ArcGIS API for JavaScript加載和展示三維地球，需要用到ArcGIS提供的SceneView類。SceneView類是ArcGIS API for JavaScript中用于呈現和操作3D場景的類。下面我們先來了解下SceneView類的常用屬性和方法

SceneView類的常用屬性

1. container：設置場景視圖的容器元素，比如一個div元素。
2. map：設置或獲取場景視圖中使用的地圖。
3. spatialReference：獲取或設置場景視圖的空間參考。
4. zoom：獲取或設置場景視圖的縮放級別。
5. camera：獲取或設置場景視圖的相機位置和朝向。
6. center：獲取或設置場景視圖的中心點。
7. constraints：獲取或設置一組約束條件，如縮放級別范圍，相機傾角范圍等。
8. interacting：獲取場景視圖是否正在交互。
9. navigating：是否正在導航視圖（例如平移時）。
10. navigation：用于配置視圖導航行為的選項。
11. Viewpoint：獲取或設置場景視圖的視圖點，包括位置、縮放級別、相機朝向等信息。

SceneView類的常用方法

1. when：在場景視圖及其所有相關資源加載完成后執行一個回調函數。可以通過該方法來執行一些場景加載完成后的操作。
2. goTo：移動視圖到指定位置，可以指定target參數來指定位置，如經緯度坐標、圖層范圍等。
3. hitTest：從給定的屏幕坐標處執行一次命中測試，以查找命中的圖形或要素。
4. toMap：將屏幕坐標轉換為場景坐標系對應的地理坐標。
5. toScreen：將場景坐標轉換為屏幕坐標。
6. takeScreenshot：獲取當前場景視圖的屏幕截圖。

vue3中使用SceneView類創建三維地球

項目準備

• 創建Vue 3項目：
  使用vite構建工具創建一個新的Vue項目，運行以下命令：

  npm create vite@latest
  

  創建vite項目，輸入項目名稱vite-vue3-arcgis,選擇vue框架，并選中JavaScript語音創建項目，創建成功后，進入vite-vue3-arcgis文件夾，并使用npm i 安裝依賴

• 安裝ArcGIS JS API依賴包：
  在項目目錄下，運行以下命令安裝需要的依賴包：

  npm install @arcgis/core
  

引入ArcGIS API

在Vue組件中引入ArcGIS API for JavaScript模塊：在需要使用地球的Vue組件中，使用import語句引入ArcGIS API：

import Map from '@arcgis/core/Map.js'; 
import SceneView from "@arcgis/core/views/SceneView.js";

創建Vue組件

• 創建vue組件，在components文件夾下新建ArcGisMap.vue組件
• 準備三維地球展示的容器元素：
  在ArcGisMap.vue組件的模板中，準備一個div元素作為地球的容器：

  <template><div id="viewDiv"></div>
  </template>
  

• 創建一個初始化函數initArcGisMap()用于創建Map實例和SceneView實例：

const initArcGisMap = () => {const map = new Map({basemap: "topo-vector"});view = new SceneView({center: [-118.80500, 34.02700],zoom: 4,container: "viewDiv",map: map});view.ui.components = [];
}

在OnMounted中調用初始化函數initArcGisMap

引入vue的OnMounted生命周期函數，并在其中調用上面定義的initArcGisMap方法，

import { onMounted } from 'vue'
onMounted(() => {initArcGisMap()
})

運行瀏覽器，可以看到三維地球已經呈現在了瀏覽器中

完整代碼如下：

<template><div id="viewDiv"></div>
</template><script setup>
import { onMounted } from 'vue'
import Map from '@arcgis/core/Map.js'; 
import SceneView from "@arcgis/core/views/SceneView.js";
let view
onMounted(() => {initArcGisMap()
})const initArcGisMap = () => {const map = new Map({basemap: "topo-vector"});view = new SceneView({center: [-118.80500, 34.02700],zoom: 4,container: "viewDiv",map: map});view.ui.components = [];
}
</script>
<style scoped>  #viewDiv {width: 100%;height: 100vh;}
</style>

創建Camera對象

在 SceneView 中，可以通過創建 Camera 對象并將其設置為 SceneView 的 camera 屬性來定義相機。Camera 對象將定義要在 SceneView 中使用的相機屬性，如位置、方向、投影方式等。

• 引入Camera對象
  要使用Camera對象，需要先引入Camera模塊
  import Camera from "@arcgis/core/Camera.js";
• 創建Camera實例
  通過new Camera()方法來創建Camera的實例

  var camera = new Camera({position: { // 相機位置x: -123.12,y: 40.57,z: 2000 // 高度},tilt: 60, // 相機俯仰角heading: 0 // 相機偏航角});

• 將SceneView實例的camera屬性設置為上面的camera實例

  view = new SceneView({center: [-118.80500, 34.02700],zoom: 4,container: "viewDiv",map: map,camera: camera // 設置相機});

運行瀏覽器，可以看到，地圖視角已經按照camera設置的參數顯示了

Camera的常用屬性

1. position：相機的位置，可以使用 x、y 和 z 坐標表示。例如：camera.position = { x: -118, y: 34, z: 5000 };
2. heading：相機的偏航角，表示相機繞其位置的垂直軸旋轉的角度。例如：camera.heading = 180;
3. tilt：相機的俯仰角，表示相機繞其位置的水平軸旋轉的角度。例如：camera.tilt = 45;
4. fov：相機的視場角，表示可視范圍的大小。例如：camera.fov = 60;
   示例代碼如下：

 var camera = new Camera({position: {x: -118,y: 34,z: 5000},heading: 180,tilt: 45,fov: 60});

Camera的常用方法

1. clone()：創建相機的副本。例如：var clonedCamera = camera.clone();
2. fromJSON() ：根據傳入的 JSON 對象，提取其中的屬性值，并使用這些屬性值創建一個新的 Camera 對象。這可以方便地將已存儲的相機屬性還原為 Camera 對象。
3. toJSON()：將相機屬性轉換為 JSON 對象。例如：var cameraJson = camera.toJSON();

下面的代碼我們使用 fromJSON() 方法來初始化 Camera 對象：

const initArcGisMap = () => {const map = new Map({basemap: "topo-vector"}); var cameraJson = {"position": {"x": -118,"y": 34,"z": 5000},"heading": 180,"tilt": 45,"fov": 60,"near": 0.1,"far": 100000
}; 
// 使用 fromJSON() 方法創建一個新的 Camera 實例
var camera = Camera.fromJSON(cameraJson);
console.log(camera) view = new SceneView({center: [-118.80500, 34.02700],zoom: 4,container: "viewDiv",map: map,camera: camera // 設置相機});view.ui.components = []; 
}

在上面的代碼中，我們創建了一個包含相機信息的 JSON 對象 cameraJson，然后通過 fromJSON() 方法將其轉換為 Camera 對象 camera。這樣可以快速將已存儲的相機信息還原為可操作的對象。

需要注意的是，fromJSON() 方法只能用于從 ArcGIS 產品生成的 JSON 對象初始化 Camera 對象。如果傳入的 JSON 對象不符合相機屬性的結構，則該方法可能會拋出錯誤。確保傳入的 JSON 對象與相機屬性的期望結構相匹配。

通過使用 fromJSON() 方法，可以輕松地將相機的狀態從一個應用程序傳遞到另一個應用程序，或者將相機屬性保存到持久存儲中以備將來使用。

好啦，這節就先到這里吧，更多內容小伙伴們可以上ArcGIS的官網進行查看學習。