Vue3+CesiumJS相机定位camera

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()]
})
效果展示:
这里推荐一个cesium学习的博客:右弦GISercesium实战系列总目录(详细实用)(不断更新中,现120篇)_cesium实战目录-CSDN博客 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/875957.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

C++《类和对象》(下)

在之前类和对象&#xff08;中&#xff09;我们学习了类当中的6大默认成员函数&#xff0c;我们了解了6大成员函数的结构特征和特点以及在不同情况各个成员函数是如何调用的&#xff0c;那么接下来我们在本篇当中将继续学习之前在学习构造函数中未了解的初始化列表&#xff0c;…

【Python】生成图片验证码

1. 首先安装第三方库PIL&#xff08;图像处理库&#xff09; pip install pillow 2. 编写生成验证码代码 这里字体 SimHei.ttf 文件要放在该文件目录下。 import random from PIL import Image, ImageDraw, ImageFont, ImageFilterdef check_code(width128, height30, char…

ros学习笔记.4 Path Planning Part 2 (避障)

避障是如何工作的什么是局部规划器&#xff1f;什么是局部成本图&#xff1f;路径规划回顾如何使用动态重新配置和其他 Rviz 工具 局部规划器 一旦全局规划器计算出要遵循的路径&#xff0c;该路径就会发送给局部规划器。然后&#xff0c;局部规划器将执行全局规划的每个部分&…

比较stl库的ostringstream与Qt的QString::arg(),QString::number()

需求&#xff1a; 显示一个float或者double类型的数&#xff0c;要求小数点后的数字位数为定值。 考虑STL库的ostringstream或者Qt的QString::arg(), number 对于stringstream,使用比较繁琐&#xff0c;要联合使用std::fixed和std::setprecision才能实现固定小数位数显示&am…

UE5-俯视角色移动(蓝图)01

效果如下&#xff1a; 蓝图节点如下&#xff1a; 使用示例自带的移动蓝图&#xff0c;发现角色只能平移&#xff0c;不会转向。必须勾选以下选项&#xff1a; 点击蓝图-》组件-》SpringArm节点。在细节中找到摄像机设置&#xff0c;勾选以下&#xff1a; 在 点击蓝图-》组件-…

PowerShell install 一键部署Oracle21c-xe

Oracle21c-xe前言 无论您是开发人员、DBA、数据科学家、教育工作者,还是仅仅对数据库感兴趣,Oracle Database Express Edition (XE) 都是理想的入门方式。它是全球企业可依赖的强大的 Oracle Database,提供简单的下载、易于使用和功能齐全的体验。您可以在任何环境中使用该…

Qt多语言/多语种详细开发教程

Qt作为跨平台的开发工具&#xff0c;早已应用到各行各业的软件开发中。 今天讲讲&#xff0c;Qt开发的正序怎么做多语言开发。就是说&#xff0c;你设置中文&#xff0c;就中文显示&#xff1b;设置英语就英文显示&#xff0c;设置繁体就繁体显示&#xff0c;设置发育就显示法语…

Vue3+TS项目给el-button统一封装一个点击后转圈效果的钩子函数按钮防抖

前言 每个按钮都要单独定义一个loading变量&#xff0c;并且在接口请求前修改为true&#xff0c;接口响应后再修改为false&#xff0c;封装后这段重复的逻辑就可以统一管理不用每次都写一遍了。 效果 新建一个公共的src\common.ts import { ref } from "vue"expor…

Azure web app has no access to openai private endpoint in virtual network

题意&#xff1a;"Azure Web 应用无法访问虚拟网络中的 OpenAI 私有端点。" 问题背景&#xff1a; I am trying to host a web application similar to a private ChatGPT instance within a secluded virtual network, ensuring that theres no external internet …

服务器环境搭建-5 Nexus搭建与使用介绍

背景 本文介绍nexus的安装、配置和使用&#xff0c;之后通过案例的方式演示使用过程。 1.下载和安装 本文使用Nexus 3.x版本进行演示 下载地址&#xff1a;Download Nexus Repository OSS | Sonatype 国外网站下载速度较慢&#xff0c;也可以通过百度网盘下载(提取码:9999): …

形态学算法(连通分量提取,区域最大值提取)

文章目录 二值图像形态学算法连通分量提取 灰度图形态学算法灰度重建区域最大值查找 本文先列举一些近期用到的形态学算法&#xff0c;以后可能会再进行补充。 二值图像形态学算法 连通分量提取 在上一篇文章中已经提到连通分量的概念&#xff0c;这里再进行回顾&#xff1a;…

Leetcode 寻找重复数

可以使用 位运算 来解决这道题目。使用位运算的一个核心思想是基于数字的二进制表示&#xff0c;统计每一位上 1 的出现次数&#xff0c;并与期望的出现次数做比较。通过这种方法&#xff0c;可以推断出哪个数字重复。 class Solution { public:int findDuplicate(vector<i…

abVIEW 可以同时支持脚本编程和图形编程

LabVIEW 可以同时支持脚本编程和图形编程&#xff0c;但主要依赖其独特的 图形编程 环境&#xff08;G语言&#xff09;&#xff0c;其中程序通过连线与节点来表示数据流和功能模块。不过&#xff0c;LabVIEW 也支持通过以下方式实现脚本编程的能力&#xff1a; 1. 调用外部脚本…

使用 PyCharm 新建 Python 项目详解

使用 PyCharm 新建 Python 项目详解 文章目录 使用 PyCharm 新建 Python 项目详解一 新建 Python 项目二 配置环境1 项目存放目录2 Python Interpreter 选择3 创建隔离环境4 选择你的 Python 版本5 选择 Conda executable 三 New Window 打开项目四 目录结构五 程序编写运行六 …

【资料分析】平均倍数类

平均 观察选项&#xff0c;差距较大&#xff0c;大胆约分即可 很少的情况下&#xff0c;选项相差很近不能随便约分 倍数 第N次注意增长率是否为下降&#xff01; 问的是基期倍数比哦 平均增长量 十三五这种明确问法&#xff0c;一定是五年 属于有往前推的A和不往前推的…

【QT】常用控件-下

欢迎来到Cefler的博客&#x1f601; &#x1f54c;博客主页&#xff1a;折纸花满衣 &#x1f3e0;个人专栏&#xff1a;QT 目录 &#x1f449;&#x1f3fb;QComboBox&#x1f449;&#x1f3fb; QSpinBox&#x1f449;&#x1f3fb;QDateTimeEdit&#x1f449;&#x1f3fb;QD…

第四届长城杯部分wp

还是太菜了&#xff0c;要经常练了 1.BrickGame 读源码可以看到时间的值是由js设定的&#xff0c;所以控制台将timeleft的时间改成999999 通过游戏就可以得到flag 2.SQLUP 一道文件上传的题目&#xff0c;在登陆页面我用admin和1登陆成功了&#xff0c;但是按照正常的应该是…

实战千问2大模型第三天——Qwen2-VL-7B(多模态)视频检测和批处理代码测试

画面描述:这个视频中,一位穿着蓝色西装的女性站在室内,背景中可以看到一些装饰品和植物。她双手交叉放在身前,面带微笑,似乎在进行一场演讲或主持活动。她的服装整洁,显得非常专业和自信。 一、简介 阿里通义千问开源新一代视觉语言模型Qwen2-VL。其中,Qwen2-VL-72B在大…

Spring Boot 集成 Redisson 实现消息队列

包含组件内容 RedisQueue&#xff1a;消息队列监听标识RedisQueueInit&#xff1a;Redis队列监听器RedisQueueListener&#xff1a;Redis消息队列监听实现RedisQueueService&#xff1a;Redis消息队列服务工具 代码实现 RedisQueue import java.lang.annotation.ElementTyp…

清理C盘缓存的垃圾,专业清理C盘缓存垃圾的步骤与策略

在维护计算机系统的过程中&#xff0c;定期清理C盘&#xff08;通常是系统盘&#xff09;中的缓存和垃圾文件是一项至关重要的任务。这不仅能有效释放磁盘空间&#xff0c;提升系统性能&#xff0c;还能减少因磁盘空间不足导致的程序运行缓慢或错误。以下是一系列专业且安全的步…