ArcGIS Maps SDK for JavaScript系列之三：在Vue3中使用ArcGIS API加载三维地球

SceneView类的常用属性

container：设置场景视图的容器元素，比如一个div元素。
map：设置或获取场景视图中使用的地图。
spatialReference：获取或设置场景视图的空间参考。
zoom：获取或设置场景视图的缩放级别。
camera：获取或设置场景视图的相机位置和朝向。
center：获取或设置场景视图的中心点。
constraints：获取或设置一组约束条件，如缩放级别范围，相机倾角范围等。
interacting：获取场景视图是否正在交互。
navigating：是否正在导航视图（例如平移时）。
navigation：用于配置视图导航行为的选项。
Viewpoint：获取或设置场景视图的视图点，包括位置、缩放级别、相机朝向等信息。

SceneView类的常用方法

when：在场景视图及其所有相关资源加载完成后执行一个回调函数。可以通过该方法来执行一些场景加载完成后的操作。
goTo：移动视图到指定位置，可以指定target参数来指定位置，如经纬度坐标、图层范围等。
hitTest：从给定的屏幕坐标处执行一次命中测试，以查找命中的图形或要素。
toMap：将屏幕坐标转换为场景坐标系对应的地理坐标。
toScreen：将场景坐标转换为屏幕坐标。
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的常用属性

position：相机的位置，可以使用 x、y 和 z 坐标表示。例如：camera.position = { x: -118, y: 34, z: 5000 };
heading：相机的偏航角，表示相机绕其位置的垂直轴旋转的角度。例如：camera.heading = 180;
tilt：相机的俯仰角，表示相机绕其位置的水平轴旋转的角度。例如：camera.tilt = 45;
fov：相机的视场角，表示可视范围的大小。例如：camera.fov = 60;
示例代码如下：

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

Camera的常用方法

clone()：创建相机的副本。例如：var clonedCamera = camera.clone();
fromJSON() ：根据传入的 JSON 对象，提取其中的属性值，并使用这些属性值创建一个新的 Camera 对象。这可以方便地将已存储的相机属性还原为 Camera 对象。
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 = []; 
}