Cesium教程01_实现Cartesian3 三维坐标操作

在 Vue 项目中使用 Cesium 实现 Cartesian3 三维坐标操作

一、引言

在现代 Web 地图应用中，三维地图和地理信息的可视化越来越重要。本文将介绍如何在 Vue 项目中使用 Cesium 实现三维空间的基本操作，包括通过 Cartesian3 进行点标注、距离计算和中点展示。

二、Cesium 与 Cartesian3 的优势

Cesium 是一个强大的开源三维地图引擎，Cartesian3 是 Cesium 提供的一个类，用于表示三维空间的点或向量。其主要优势包括：

高精度：适合复杂的空间计算。
易用性：提供丰富的工具类方法，如坐标转换、距离计算和中点计算。
可视化能力：与 Cesium 的其他模块无缝集成，支持高级渲染效果。

三、示例应用：在地图上标注和计算距离

1. 项目结构

本示例基于 Vue 框架，通过按钮实现视角切换，并使用 Cartesian3 类标注地图上的两个点，计算并显示它们之间的距离。

2. 主要代码实现

列举了实现的关键方法和功能，确保代码简洁清晰：

import { onMounted, ref } from 'vue';
import * as Cesium from 'cesium';export default {name: 'MapView',setup() {const cesiumContainer = ref(null);let viewer = null;onMounted(() => {Cesium.Ion.defaultAccessToken = 'YOUR_CESIUM_ION_ACCESS_TOKEN';viewer = new Cesium.Viewer(cesiumContainer.value);viewer.camera.setView({destination: Cesium.Cartesian3.fromDegrees(0, 0, 20000000),orientation: {heading: Cesium.Math.toRadians(0.0),pitch: Cesium.Math.toRadians(-90.0),roll: 0.0,},});});const showCartesian3Points = () => {const pointA = Cesium.Cartesian3.fromDegrees(-74.006, 40.7128, 0); // New York Cityconst pointB = Cesium.Cartesian3.fromDegrees(-122.4194, 37.7749, 0); // San Franciscoviewer.entities.add({ position: pointA, point: { pixelSize: 10, color: Cesium.Color.RED } });viewer.entities.add({ position: pointB, point: { pixelSize: 10, color: Cesium.Color.BLUE } });const distance = Cesium.Cartesian3.distance(pointA, pointB);console.log('Distance:', distance);viewer.entities.add({position: Cesium.Cartesian3.midpoint(pointA, pointB, new Cesium.Cartesian3()),label: {text: `Distance: ${distance.toFixed(2)} meters`,font: '14pt sans-serif',fillColor: Cesium.Color.YELLOW,},});};return {cesiumContainer,showCartesian3Points,};},
};