Cesium 相机功能(打开页面直接展示目标位置)

  • 首先是页面基础模版
  • 然后创建一个笛卡尔坐标
  • 当打开页面直接跳转到这个坐标,就用
    viewer.camera.xxxxx()这函数,这里的xxx可以替换成代码里的模式
<template>
    <div id="cesiumContainer">
      
    </div>
  </template>
<script setup>
  import { ref ,onMounted} from 'vue'
  import * as Cesium from 'cesium'
  onMounted(()=>{
    // Cesium Token
    Cesium.Ion.defaultAccessToken = "这里写自己的token"
    const viewer = new Cesium.Viewer("cesiumContainer",{})
    // 经纬度 转 笛卡尔坐标
    const position = Cesium.Cartesian3.fromDegrees(120,30,2000)

    // setView 通过自定义目的地(方向),直接跳转到目的地(没有动画)

// ------------ 其他的相机方式只需要更换这里
     viewer.camera.setView({
      destination: position,
      orientation: { // 默认 (0,-90,0)
        heading: Cesium.Math.toRadians(0),
        pitch: Cesium.Math.toRadians(-90),
        roll: Cesium.Math.toRadians(0)
      } 
   
 // -------------
// 带有飞行动画,可以设置角度 和 飞行时间
    /*
    viewer.camera.flyTo({
        destination:position,
        orientation: {
            heading: Cesium.Math.toRadians(0),
            pitch: Cesium.Math.toRadians(-50),
            roll: Cesium.Math.toRadians(0)
        },
        duration:3, // 单位秒
    })
    */
// 固定相机 lookAt (不能改变位置,可以选择视角)
    /*
    这是重新创建了一个笛卡尔坐标
    const position2 = Cesium.Cartesian3.fromDegrees(120,30);
    viewer.camera.lookAt(
        position2,
        new Cesium.HeadingPitchRange(
            Cesium.Math.toRadians(0),
            Cesium.Math.toRadians(-90),
            2000
            )
        );
*/
 }) // 这是生命周期的结束括号
  </script>
  
  <style scoped>
  #cesiumContainer {
    position:absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }
  </style>
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容