4.cesium+vue3坐标转换，相机，飞行动画

一只小菜鸡耶

已于 2024-09-13 11:49:35 修改

阅读量88

点赞数 1

文章标签：数码相机

于 2024-09-12 10:58:14 首次发布

本文链接：https://blog.csdn.net/m0_49684635/article/details/142168263

版权

坐标转换

<script setup>
import { onMounted} from 'vue'
import * as Cesium from 'cesium'
console.log(Cesium);
onMounted(()=>{
  // token
  Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI1MjEzMTIyZS0wZTYxLTRmYmUtOTAwMC02OTI0YTUzYjNhMDciLCJpZCI6MjMyMjU3LCJpYXQiOjE3MjI1ODkxNjh9.ojMT5Gn6hJUBUywEzDwdZnR3-8rEO7vJ8z6bSB4HxEY'
  // viewer所有api的开始
  const viewer = new Cesium.Viewer('cesiumContent',{})
  // 返回一个笛卡尔坐标 z不等于高度
  let cartesian = Cesium.Cartesian3.fromDegrees(110,20,20) //经度 纬度 高度
  let cartesian2 = Cesium.Cartesian3.fromDegrees(110,20,30) //经度 纬度 高度
  console.log(cartesian,cartesian2);
  
  // 笛卡尔转弧度坐标再转经纬度 两步
  // 经纬度转弧度坐标
  let cartographic = Cesium.Cartographic.fromCartesian(cartesian)
  // 弧度坐标转角度坐标
  let lon =Cesium.Math.toDegrees(cartographic.longitude)
  let lat = Cesium.Math.toDegrees(cartographic.latitude)
  console.log(cartographic,lon,lat);
  
})
</script>

相机

设置相机的位置
**viewer.camera.setView({destination: 笛卡尔坐标}) **

<script setup>
import { onMounted} from 'vue'
import * as Cesium from 'cesium'
console.log(Cesium);
onMounted(()=>{
  // token
  Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI1MjEzMTIyZS0wZTYxLTRmYmUtOTAwMC02OTI0YTUzYjNhMDciLCJpZCI6MjMyMjU3LCJpYXQiOjE3MjI1ODkxNjh9.ojMT5Gn6hJUBUywEzDwdZnR3-8rEO7vJ8z6bSB4HxEY'
  // viewer所有api的开始
  const viewer = new Cesium.Viewer('cesiumContent',{})
  // position为笛卡尔坐标
  const position = Cesium.Cartesian3.fromDegrees(110,20,20000)
  viewer.camera.setView({
    destination: position
  })
})
</script>

设置相机的方向
在这里插入图片描述

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

<script setup>
import { onMounted} from 'vue'
import * as Cesium from 'cesium'
console.log(Cesium);
onMounted(()=>{
  // token
  Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI1MjEzMTIyZS0wZTYxLTRmYmUtOTAwMC02OTI0YTUzYjNhMDciLCJpZCI6MjMyMjU3LCJpYXQiOjE3MjI1ODkxNjh9.ojMT5Gn6hJUBUywEzDwdZnR3-8rEO7vJ8z6bSB4HxEY'
  // viewer所有api的开始
  const viewer = new Cesium.Viewer('cesiumContent',{})
  // 相机
  // position为笛卡尔坐标
  const position = Cesium.Cartesian3.fromDegrees(110,20,20000)
  viewer.camera.setView({
    destination: position,
    orientation:{
      // 默认
      // heading:Cesium.Math.toRadians(0), 
      // pitch:Cesium.Math.toRadians(-90), 
      // roll:Cesium.Math.toRadians(0),
      heading:Cesium.Math.toRadians(0), //左右摇头
      pitch:Cesium.Math.toRadians(0),  //上下点头
      roll:Cesium.Math.toRadians(0), //歪头
    }
  })
})
</script>

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

飞行动画

viewer.camera.flyTo({destination: 笛卡尔坐标,duration:飞行时间（s秒），orientation: 相机方向三个属性})

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

<script setup>
import { onMounted} from 'vue'
import * as Cesium from 'cesium'
console.log(Cesium);
onMounted(()=>{
  // token
  Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI1MjEzMTIyZS0wZTYxLTRmYmUtOTAwMC02OTI0YTUzYjNhMDciLCJpZCI6MjMyMjU3LCJpYXQiOjE3MjI1ODkxNjh9.ojMT5Gn6hJUBUywEzDwdZnR3-8rEO7vJ8z6bSB4HxEY'
  // viewer所有api的开始
  const viewer = new Cesium.Viewer('cesiumContent',{})
  const position = Cesium.Cartesian3.fromDegrees(110,20,20000)
  // 飞行动画
  viewer.camera.flyTo({
   destination:position,
   duration:3, //设置飞行时长 单位秒
   orientation:{
        heading:Cesium.Math.toRadians(0), //左右摇头
        pitch:Cesium.Math.toRadians(0),  //上下点头
        roll:Cesium.Math.toRadians(0), //歪头
      }
  })
})
</script>

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

飞行动画 lookAt 视角固定可改变视角（相机方向）但不能改变相机位置

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

<script setup>
import { onMounted} from 'vue'
import * as Cesium from 'cesium'
console.log(Cesium);
onMounted(()=>{
  // token
  Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI1MjEzMTIyZS0wZTYxLTRmYmUtOTAwMC02OTI0YTUzYjNhMDciLCJpZCI6MjMyMjU3LCJpYXQiOjE3MjI1ODkxNjh9.ojMT5Gn6hJUBUywEzDwdZnR3-8rEO7vJ8z6bSB4HxEY'
  // viewer所有api的开始
  const viewer = new Cesium.Viewer('cesiumContent',{})
  const position = Cesium.Cartesian3.fromDegrees(110,20,20000)
  // 飞行动画 lookAt 
  const position2 = Cesium.Cartesian3.fromDegrees(110,20)
  viewer.camera.lookAt(
   position2,
   new Cesium.HeadingPitchRange(
    Cesium.Math.toRadians(0),
    Cesium.Math.toRadians(-90),
    20000
   )
  )
})
</script>

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