Оглавление
Чтобы использовать ArcGIS API for JavaScript для загрузки и отображения трехмерной Земли в Vue 3, вам необходимо использовать класс SceneView, предоставляемый ArcGIS. Класс SceneView — это класс ArcGIS API for JavaScript, используемый для рендеринга и управления 3D-сценами. Давайте сначала разберемся с общими свойствами и методами класса SceneView.
Общие свойства класса SceneView
container: Установите элемент-контейнер представления сцены, например элементdiv.map: Установить или получить карту, используемую в виде сцены.spatialReference: Получает или задает пространственную привязку вида сцены.zoom: Получает или задает уровень масштабирования вида сцены.camera: получить или установить положение камеры и ориентацию вида сцены.center: Получает или задает центральную точку вида сцены.constraints: получение или установка набора ограничений, таких как диапазон уровня масштабирования, диапазон наклона камеры и т. д.interacting: узнать, взаимодействует ли вид сцены.navigating: выполняется ли навигация по виду (например, при панорамировании).navigation: параметры для настройки поведения навигации по представлению.Viewpoint: Получите или установите точку обзора сцены, включая положение, уровень масштабирования, ориентацию камеры и другую информацию.
Общие методы класса SceneView
when: выполнить функцию обратного вызова после загрузки представления сцены и всех связанных ресурсов. Вы можете использовать этот метод для выполнения некоторых операций после загрузки сцены.goTotarget: переместить вид в указанное положение. Для указания положения можно указать параметры, такие как координаты широты и долготы, диапазон слоев и т. д.hitTest: выполнить проверку попадания по заданной экранной координате, чтобы найти изображение или функцию совпадения.toMap: Преобразование экранных координат в географические координаты, соответствующие системе координат сцены.toScreen: Преобразовать координаты сцены в координаты экрана.takeScreenshot: получить снимок экрана текущего вида сцены.
Используйте класс SceneView для создания трехмерной земли в vue3.
Подготовка проекта
-
Создайте проект 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
Добавьте модуль ArcGIS API for JavaScript в компонент Vue: В компоненте Vue, которому необходимо использовать землю, используйте оператор импорта, чтобы представить ArcGIS API:
import Map from '@arcgis/core/Map.js';
import SceneView from "@arcgis/core/views/SceneView.js";
Создать компонент Vue
- Создайте компонент vue и создайте новый компонент 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 = [];
}
Вызовите функцию инициализации initArcGisMap в OnMounted.
Представьте функцию жизненного цикла OnMounted vue и вызовите в ней метод initArcGisMap, определенный выше:
import {
onMounted } from 'vue'
onMounted(() => {
initArcGisMap()
})
Запустите браузер, и вы увидите, что в браузере представлена 3D-земля.
Полный код выглядит следующим образом:
<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>
Создать объект камеры
В SceneView камера определяется путем создания объекта Camera и установки его в качестве свойства камеры SceneView. Объект Camera будет определять свойства камеры, которые будут использоваться в SceneView, такие как положение, ориентация, проекция и т. д.
- Знакомство с объектом «Камера»
Чтобы использовать объект «Камера», вам необходимо сначала импортировать модуль «Камера».
import Camera from "@arcgis/core/Camera.js"; - Создайте экземпляр камеры.
Создайте экземпляр камеры с помощью нового метода Camera().
var camera = new Camera({
position: {
// 相机位置
x: -123.12,
y: 40.57,
z: 2000 // 高度
},
tilt: 60, // 相机俯仰角
heading: 0 // 相机偏航角
});
- Установите для свойства камеры экземпляра SceneView указанный выше экземпляр камеры.
view = new SceneView({
center: [-118.80500, 34.02700],
zoom: 4,
container: "viewDiv",
map: map,
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
});
Общие методы камеры
clone(): Создать копию камеры. Например:var clonedCamera = camera.clone();fromJSON(): В соответствии с входящим объектом JSON извлеките из него значения атрибутов и используйте эти значения атрибутов для создания нового объекта камеры. Это упрощает восстановление сохраненных свойств камеры для объектов 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 = [];
}
В приведенном выше коде мы создаем объект JSON cameraJson, содержащий информацию о камере, а затем преобразуем его в объект Camera с помощью метода fromJSON(). Это быстро восстанавливает сохраненную информацию о камере в действенные объекты.
Следует отметить, что метод fromJSON() можно использовать только для инициализации объекта Camera из объекта JSON, созданного продуктами ArcGIS. Этот метод может вызвать ошибку, если переданный объект JSON не соответствует структуре свойств камеры. Убедитесь, что переданный объект JSON соответствует ожидаемой структуре свойства камеры.
Используя метод fromJSON(), вы можете легко передать состояние камеры из одного приложения в другое или сохранить свойства камеры в постоянном хранилище для использования в будущем.
Хорошо, давайте остановимся на этом разделе. Для получения дополнительной информации друзья могут перейти на официальный сайт ArcGIS, чтобы просмотреть и изучить.