Vue3+CesiumJS相机定位camera

news2024/11/22 10:17:28

new Cesium.Camera (scene)

摄像机由位置，方向和视锥台定义。

方向与视图形成正交基准，上和右=视图x上单位矢量。

视锥由6个平面定义。每个平面都由 Cartesian4 对象表示，其中x，y和z分量定义垂直于平面的单位矢量，w分量是从原点/相机位置开始的平面。

官方文档示例：（链接：Camera - Cesium Documentation）

// Create a camera looking down the negative z-axis, positioned at the origin,
// with a field of view of 60 degrees, and 1:1 aspect ratio.
var camera = new Cesium.Camera(scene);
camera.position = new Cesium.Cartesian3();
camera.direction = Cesium.Cartesian3.negate(Cesium.Cartesian3.UNIT_Z, new Cesium.Cartesian3());
camera.up = Cesium.Cartesian3.clone(Cesium.Cartesian3.UNIT_Y);
camera.frustum.fov = Cesium.Math.PI_OVER_THREE;
camera.frustum.near = 1.0;
camera.frustum.far = 2.0;

示例：

使用Vue 3 <script setup> 语法和CesiumJS库来创建一个3D地球视图的示例。CesiumJS是一个用于创建3D地球、2D地图和2.5D视图的开源JavaScript库，广泛用于地理信息系统（GIS）和地球科学可视化。（这里用到的cesium版本为1.99）

引入依赖（其中注意要将token换成自己的）：

Cesium: 引入Cesium库，这是主要的地图渲染和交互功能提供者。
Cartographic: ，在下列代码中并没有直接使用Cartographic，Cesium的Cartographic类用于表示地理坐标（经度、纬度和高度），但在这个例子中，使用了Cesium.Cartesian3.fromDegrees来从经纬度创建笛卡尔坐标。
Viewer: 引入Cesium的Viewer类，这是创建和管理Cesium视图的主要接口。

vue组件：

<script setup>: Vue 3的Composition API的语法糖，允许你使用更简洁的语法来编写组件逻辑。
onMounted: Vue的生命周期钩子，用于在组件挂载到DOM后执行代码。这里，它用于初始化Cesium的Viewer。

<script setup>
import { onMounted } from 'vue'
import * as Cesium from 'cesium'
import Cartographic from 'cesium/Source/Core/Cartographic';
import Viewer from 'cesium/Source/Widgets/Viewer/Viewer';

onMounted(() => {
  Cesium.Ion.defaultAccessToken = 'your token'
  
  // viewer是所有api的开始
  const viewer = new Cesium.Viewer('cesiumContainer', {});

  const position1 = Cesium.Cartesian3.fromDegrees(110,20,20000);

1.setView通过定义相机目的地，直接跳转到目的地

直接跳转到指定位置

viewer.camera.setView({
    destination: position1,
    //视角，默认是（0,-90,0）
    orientation: {
      heading: Cesium.Math.toRadians(0),
      pitch: Cesium.Math.toRadians(0),
      Roll: Cesium.Math.toRadians(0)
    }
  })

2.flyTo快速切换视角，带飞行动画，可以设置飞行时长

带有动画效果地飞到指定位置

viewer.camera.flyTo({
    destination: position1,
    //视角，默认是（0,-90,0）
    orientation: {
       heading: Cesium.Math.toRadians(0),
       pitch: Cesium.Math.toRadians(-90),
       Roll: Cesium.Math.toRadians(0)
     },
     //飞行时间，单位秒
    duration: 3,
  })

3.lookAt将视角固定在所设置的目的地点上，可以任意旋转视角，但是不会改变位置

使用viewer.camera.lookAt方法将相机视角对准指定的位置（position2），并设置了一个朝向（通过HeadingPitchRange对象指定）。这里，朝向设置为朝向正北（heading为0度），向下看（pitch为-90度），并保持距离地面20000米。

const position2 = Cesium.Cartesian3.fromDegrees(-117.16,32.71)
  viewer.camera.lookAt(
    position2, 
    new Cesium.HeadingPitchRange(
    Cesium.Math.toRadians(0),
    Cesium.Math.toRadians(-90),
    20000,//中心点距离地面的距离
    // viewer.camera.lookAt(position1, new Cesium.Cartesian3(0.0, 0.0, 1000.0))
  ));

整体代码展示：

1.直接在终端运行即可：npm run dev

<script setup>
import { onMounted } from 'vue'
import * as Cesium from 'cesium'
import Cartographic from 'cesium/Source/Core/Cartographic';
import Viewer from 'cesium/Source/Widgets/Viewer/Viewer';

onMounted(() => {
  Cesium.Ion.defaultAccessToken = 'your token'
  
  // viewer是所有api的开始
  const viewer = new Cesium.Viewer('cesiumContainer', {});

  const position1 = Cesium.Cartesian3.fromDegrees(110,20,20000);


  // //setView通过定义相机目的地，直接跳转到目的地
  // viewer.camera.setView({
  //   destination: position1,
  //   //视角，默认是（0,-90,0）
  //   orientation: {
  //     heading: Cesium.Math.toRadians(0),
  //     pitch: Cesium.Math.toRadians(0),
  //     Roll: Cesium.Math.toRadians(0)
  //   }
  // })


  // //flyTo快速切换视角，带飞行动画，可以设置飞行时长
  // viewer.camera.flyTo({
  //   destination: position1,
  //   //视角，默认是（0,-90,0）
  //   orientation: {
  //      heading: Cesium.Math.toRadians(0),
  //      pitch: Cesium.Math.toRadians(-90),
  //      Roll: Cesium.Math.toRadians(0)
  //    },
  //    //飞行时间，单位秒
  //   duration: 3,
  // })


  //lookAt将视角固定在所设置的目的地点上，可以任意旋转视角，但是不会改变位置
  const position2 = Cesium.Cartesian3.fromDegrees(-117.16,32.71)
  viewer.camera.lookAt(
    position2, 
    new Cesium.HeadingPitchRange(
    Cesium.Math.toRadians(0),
    Cesium.Math.toRadians(-90),
    20000,//中心点距离地面的距离
    // viewer.camera.lookAt(position1, new Cesium.Cartesian3(0.0, 0.0, 1000.0))
  ));
  
})

</script>

<template>
  <div id="cesiumContainer">

  </div>
</template>

<style scoped>
#cesiumContainer {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
</style>

2.main.js:(element可以去掉，这里用不到)

import { createApp } from 'vue'
// import './style.css'
import App from './App.vue'

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

3.vite-config-js:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import cesium from 'vite-plugin-cesium'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),cesium()]
})