cesium学习(相机)

这篇具有很好参考价值的文章主要介绍了cesium学习(相机)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

飞到一个地方

如果你知道位置的经纬度和高度,你可以使用相机的flyTo功能直接飞到CesiumJS中的那个位置。

viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(-117.16, 32.71, 15000.0),
});

更改相机的方向

flyTo要在完成后更改相机的方向,请添加一个orientation选项:

viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(-117.16, 32.71, 15000.0),
    orientation: {
      // 航向:相对于东
      heading: Cesium.Math.toRadians(20.0),
      // 俯仰:相对于北
      pitch: Cesium.Math.toRadians(-35.0),
      // 翻滚:相对于上
      roll: 0.0,
    },
});

获取一个点位置

如果您知道要飞往的地点的名称但不确定该地点的坐标是什么,您可以使用pickPosition来查找。
以下代码片段将在点击时打印出某个点的位置Cartesian3:

var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
handler.setInputAction(function (event) {
  var pickedPosition = viewer.scene.pickPosition(event.position);
  if (Cesium.defined(pickedPosition)) {
    console.log(pickedPosition);
  }
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

cesium学习(相机)

飞往已添加资源

如果你已经将资源添加到场景,并希望将相机聚焦在它上面。
viewer.flyTo 函数接受 Entity、 EntityCollection、 DataSource、 Cesium3DTilset等等。

// 添加一个矩形到场景
var rectangle = viewer.entities.add({
  rectangle: {
      coordinates: Cesium.Rectangle.fromDegrees(-90.0, 38.0, -87.0, 40.0),
  },
});
// 将相机飞往这个矩形
viewer.flyTo(rectangle);

控制相机飞行运动

相机的一个选项camera.flyTo功能easingFunction。
以下代码示例将缓动函数设置为QUADRATIC_IN_OUT从东京晴空塔飞到西雅图太空针塔

viewer.camera.flyTo({
  destination: new Cesium.Cartesian3(
    -3961951.575572026,
    3346492.0945766014,
    3702340.5336036095
  ),
  orientation: {
    direction: new Cesium.Cartesian3(
      0.8982074415844437,
      -0.4393530288745287,
      0.013867512433959908
    ),
    up: new Cesium.Cartesian3(
      0.12793638617798253,
      0.29147314437764565,
      0.9479850669701113
    ),
  },
  complete: function () {
    setTimeout(function () {
      viewer.camera.flyTo({
        destination: new Cesium.Cartesian3(
          -2304817.2435183465,
          -3639113.128132953,
          4688495.013644141
        ),
        orientation: {
          direction: new Cesium.Cartesian3(
            0.3760550186878076,
            0.9007147395506565,
            0.21747547189489164
          ),
          up: new Cesium.Cartesian3(
            -0.20364591529594356,
            -0.14862471084230877,
            0.9676978022659334
          ),
        },
        easingFunction: Cesium.EasingFunction.QUADRATIC_IN_OUT,
        duration: 5,
      });
    }, 1000);
  },
});

锁定相机

将相机锁定到一个点,将摄像机的移动限制在某个区域或资源。
使用相机的 lookAtTransform 功能。以下代码片段将相机锁定在日本富士山:

const center = Cesium.Cartesian3.fromRadians(
  2.4213211833389243,
  0.6171926869414084,
  3626.0426275055174
);
const transform = Cesium.Transforms.eastNorthUpToFixedFrame(center);
viewer.scene.camera.lookAtTransform(
  transform,
  new Cesium.HeadingPitchRange(0, -Math.PI / 4, 2900)
);

围绕一个点运行

将相机锁定到一个点后,您可以创建一个相机轨道来展示您的资源。这可以通过使用带有事件侦听器的相机功能来实现: lookAtTransform

// Lock camera to a point
const center = Cesium.Cartesian3.fromRadians(
  2.4213211833389243,
  0.6171926869414084,
  3626.0426275055174
);
const transform = Cesium.Transforms.eastNorthUpToFixedFrame(center);
viewer.scene.camera.lookAtTransform(
  transform,
  new Cesium.HeadingPitchRange(0, -Math.PI / 8, 2900)
);

// Orbit this point
viewer.clock.onTick.addEventListener(function (clock) {
  viewer.scene.camera.rotateRight(0.005);
});

screenSpaceCameraController(屏幕空间相机控制器)

将 ScreenSpaceCameraController 用户输入(例如鼠标和触摸)从窗口坐标转换为相机运动。它包含用于启用和禁用不同类型的输入、修改惯性量以及最小和最大缩放距离的属性。
例如,你可以使用 来 ScreenSpaceCameraController 控制是否允许摄像头进入地下:文章来源地址https://www.toymoban.com/news/detail-497219.html

// Disable camera collision to allow it to go underground
viewer.scene.screenSpaceCameraController.enableCollisionDetection = false;

到了这里,关于cesium学习(相机)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Cesium 中那些改变视角的方法,带你彻底了解 cesium 相机

    对于 cesium 的初学者来讲,相机是不可饶过的一部分知识,这篇文章我们就来彻底的玩一下 cesium 里的相机。 首先要搞清楚一个问题,cesium 视角的变动不止一个方法可以完成哦,viewer 本身就是有 flyTo 的方法的。不过 viewer 的 flyTo 和 camera 的 flyTo 还是有些区别的。 首先 viewe

    2024年02月07日
    浏览(31)
  • element表格tooltip内容换行展示(本人第一次写帖子效果图在最后如果是各位想要的效果请点个赞,写的不好的地方也可以指导一下万分感谢)

    前言 在使用element的table中咱们有可能会遇到后端返回的单个字段有多个内容这个时候想一个单元格展示换行其实很简单直接就是template加个块标签v-for就可以了如果是很多的话这样表格就不美观如下图,这个时候大家会想到是show-overflow-tooltip,但是如果说数据跟我的一样是时

    2024年02月15日
    浏览(28)
  • Cesium 相机的三种放置方式

    Cesium 提供了三种方式对相机的位置进行摆放 第一种:setView 计算视角 1. Cartesian3 方式

    2024年02月11日
    浏览(24)
  • Cesium屏幕中心、相机坐标和距离计算

    moveRotation方法参数中第一个参数step是移动步长,第二个参数i是判断是否是俯仰角还是航向角进行绕中心点进行翻滚,entity可以另外分离出来做一个方法,这样避免每次调用moveRotation方法都生成一个entity覆盖物。 该方法的参数distance接受正负数,对应上升和下降

    2024年01月18日
    浏览(27)
  • 【Cesium创造属于你的地球】相机系统

    相机系统里面有 setView,flyTo,lookAt,viewBoundingsphere 这几种方法,以下是相关的使用方法,学起来!!! 该方法可以直接切换相机视口,从而不需要通过一个飞入的效果切换 flyTo该方法可以直接切换相机视口,从而不需要通过一个飞入的效果切换 方法使用,lookAt方法一般适用

    2024年02月06日
    浏览(34)
  • cesium相机视角跳转定位方法汇总

           下面汇总的相机视角跳转方法有很多种,都是 根据某一个经纬度高程坐标[x,y,z],Entity实体或者矩形四至范围[west , south , east , north] 作为视图跳转到目标范围的中心,然后在该位置上设置相机相对的偏移量,这个偏移量主要是设置相机的偏航角、航向角和翻滚角或者椭

    2024年04月24日
    浏览(26)
  • vue2 使用 cesium 【第二篇-相机视角移动+添加模型】

    搞了一阵子 cesium,小白入门,这东西很牛逼,但是感觉这东西好费劲啊!网上资料不多,每个人的用法又不一样,操作起来真的是绝绝子。之前写了一篇 vue2 使用 cesium 的博文,没有写完,本来想继续写来着,想了一下还是重新开一篇吧。上一篇说到了事件,今天不想写事件

    2024年02月11日
    浏览(28)
  • 数据结构—顺序表(如果想知道顺序表的全部基础知识点,那么只看这一篇就足够了!)

            前言:学习完了C语言的基础知识点之后,我们就需要使用我们所学的知识来进一步对存储在内存中的数据进行操作,这时候我们就需要学习数据结构。而这篇文章为数据结构中顺序表的讲解。 ✨✨✨ 这里是秋刀鱼不做梦的BLOG ✨✨✨ 想要了解更多内容可以访问我的

    2024年04月13日
    浏览(33)
  • 【Cesium】调整3DTile/tileset的位置到某个经纬度/某个地点/城市

    前提: 模型本身有地理位置信息,模型本身就能显示在地球表面了(而不是在地表下的球心或其他奇奇怪怪的位置) 以下是将tileset的位置调整到北京(在WGS84坐标系下)的正确代码: 在以上代码中,我们首先获取tileset的中心点坐标,并将其转换为WGS84坐标系下的经纬度。然后,我

    2024年02月12日
    浏览(31)
  • 【WebGIS实例】(10)Cesium开场效果(场景、相机旋转,自定义图片底图)

    漫游效果视频: 【WebGIS实例】(10)Cesium开场效果(场景、相机 点击鼠标后将停止旋转并正常加载影像底图: 可以直接看代码,注释写得应该比较清楚了: 调用: 刚进入时就是直接加载这种图片作为SingleTileImageryProvider的,因为这样能够很快得加载出完整效果,而且不会像

    2024年02月12日
    浏览(29)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包