cesium调整相机实现跳转到指定区域

huoyueyi

已于 2023-12-07 17:57:53 修改

阅读量639

点赞数 7

文章标签：前端 3d

于 2023-12-07 17:07:34 首次发布

本文链接：https://blog.csdn.net/kyrie_mvp/article/details/134850383

版权

最终实现效果如下 (1 2 3 4实现功能 , 5为拓展)

1 首先去cesium官网下载文件包并注册拿到token

官网地址 : 铯：3D 地理空间平台 (cesium.com)

1.1 下载后可以用vscode打开 , 目前我们用到了下面俩个文件夹

1.2 注册拿到token

2 新建一个cesium地图案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../Cesium/Cesium.js"></script>
    <link rel="stylesheet" href="../Cesium/Widgets/widgets.css">
    <style>
        html,
        body{
            margin: 0;padding: 0;
        }
    </style>
</head>
<body>
 <div id ="hyyCesium"></div>
 <script>
    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIxOGJmZmVjMy1hNGFiLTRmZDctODdkYy1kYmE3NzliZDI5NDciLCJpZCI6MTgyODQyLCJpYXQiOjE3MDE4NjM1NTJ9.2jTKo5Dx3V6aeYL-fZc1hcwbKXurR0xLQAoxrconvP8'
    // 第一参数放html的id,第二取消了自动动画和时间轴
    const viewer = new Cesium.Viewer('hyyCesium',{animation:false , timeline:false})
 </script>
</body>
</html>

2.1 目前文件夹结构如下

2.2 目前效果如下

注意 : 发现存在跨域问题 , 且有时候刷新地图也不显示 , 我跳转到了自己的跨域浏览器

3 flyTo缓缓跳转到故宫

 <script>
     ...


    // 其实地图是不会移动的 , 改变的只是相机的视角

    const position = Cesium.Cartesian3.fromDegrees(116.39,39.911,1500)  //必须要设置一个高度!

    // flyto比setview跳转效果更好 , 因为有缓冲时间
    viewer.camera.flyTo({
       destination:position,
       orientation:{
        heading:Cesium.Math.toRadians(0),   //沿着y轴旋转 , 0就是正北 , -90就是俯视向下
        pitch:Cesium.Math.toRadians(-90),   //沿着x轴旋转
        roll:0,                             //沿着z轴旋转的角度
       },
       duration:5                           //有飞行的过渡效果
    })


 </script>

4 viewBundingSphere直接跳转到飞机身上 , 视角定死在飞机身上 , 滚轮可放大缩小不能看其他区域

 <script>
     ...


    // 其实地图是不会移动的 , 改变的只是相机的视角

    const position = Cesium.Cartesian3.fromDegrees(116.39,39.911,1500)  //要设置一个高度

   // 直接跳转到飞机身上 , 视角定死在飞机身上 , 滚轮可放大缩小不能看其他
    const orientation = Cesium.Transforms.headingPitchRollQuaternion(position,new Cesium.HeadingPitchRoll(-90,0,0))  //用来控制飞机的朝向
    const entity = viewer.entities.add({
        position:position,
        orientation:orientation,
        model:{
            uri:'../Cesium/models/CesiumAir/Cesium_Air.glb',  // 注意这里是uri
            minimumPixeSize:100,                              // 模型缩放的一些属性
            maximumScale:100000,
            show:true
        }
    })
    viewer.camera.viewBoundingSphere(new Cesium.BoundingSphere(position,20),new Cesium.HeadingPitchRange(0,0,0)) //将相机视角定位到指定的位置并设置视野范围


 </script>

5 拓展 : lookAt直接跳转(无缓冲时间)到故宫 , 围绕故宫旋转 , 滚轮可放大缩小不能看其他区域

 <script>
     ...


    // 其实地图是不会移动的 , 改变的只是相机的视角

    // lookAt直接跳到故宫 , 旋转也是以故宫视角为主 , 滚轮可放大缩小不能看其他      
      const center = Cesium.Cartesian3.fromDegrees(116.39,39.91,500)
      const heading = Cesium.Math.toRadians(50)  // 沿着y轴旋转 , 0就是正北 , -90就是俯视向下
      const pitch = Cesium.Math.toRadians(-90)   //控制视口的上下旋转 === 沿着x轴旋转
      const range = 2500
      viewer.camera.lookAt(center,new Cesium.HeadingPitchRange(heading , pitch , range))  //让相机看向指定位置，并设置相机高度、俯仰角和方位角


 </script>