首页 > 其他分享 >Cesium 相机

Cesium 相机

时间:2022-10-18 10:33:07浏览次数:48  
标签:false 旋转 相机 视口 new Cesium position

Cesium 相机包括:setView flyTo lookAt viewBoundingSphere

Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIxN2U5YjQ4Mi0yMzBjLTQ2YTAtYmNhYi01MTExYmI0YWQ5YmMiLCJpZCI6MTA3ODM1LCJpYXQiOjE2NjMzODIzOTZ9.mPq7a4YZgM7DyVhhbwrResOlwywZZezwzTiT00euXZk'
    const geeMetadata = new Cesium.GoogleEarthEnterpriseMetadata('http://www.example.com');
    const gee = new Cesium.GoogleEarthEnterpriseImageryProvider({
        metadata : geeMetadata
    });
    var viewer = new Cesium.Viewer("cesiumContainer",{
          animation:false,//动画小组件
            baseLayerPicker:false,//地图组件,请选择三维数字地球的底图(image and terrain)
            // ImageryProvider:gee,
            fullscreenButton:false,//全屏组件
            vrButton:false, // VR模式
            geocoder:false,//地理编码搜索组件
            homeButton:false,//首页 点击之后视图将跳转到默认视角
            infoBox:false,//信息框
            sceneModePicker:false,//场景模式 切换2D 3D和 Columbus View(cv)模式
            selectionIndicator:false,//是否显示选取指示组件
            navigationHelpButton:false,//帮助提示,如何操作数字地球
            // 如果最初应该看到导航说明,则为true,如果直到用户明确单击该按钮,则该按钮提示不显示,否则为true
            navigationInstructionsInitiallyVisible:false,
            skyBox:new Cesium.SkyBox({
                mapProjection:new Cesium.WebMercatorProjection(),
            }),//天空盒效果
            timeline:false,//时间轴
    });


    // ImageryProvider  加载影响
     //隐藏左下角logo
        viewer._cesiumWidget._creditContainer.style.display ='none'





        // Cesium 相机系统  setView flyTo lookAt viewBoundingSphere
        const position = Cesium.Cartesian3.fromDegrees(116.39,39.91,400);
        // viewer.camera.setView({
        //   destination:position, //目的地位置
        //   orientation:{ // 视口方向
        //     heading:Cesium.Math.toRadians(0), // 控制视口方向的水平旋转,也就是沿着y轴旋转,当数值为0时,则代表是正北方向
        //     pitch:Cesium.Math.toRadians(-90), // 控制视口的上下旋转,即沿x轴进行旋转,当数值为-90时,则是俯视朝向地面
        //     roll:0 // 控制视口的翻转角度 即沿着z轴进行翻转,数值为0不翻转
        //   }
        // })
      // flyTo 具有空中飞行逐步切换视域的效果
        // viewer.camera.flyTo({
        //   destination:position, //目的地位置
        //   orientation:{ // 视口方向
        //     heading:Cesium.Math.toRadians(0), // 控制视口方向的水平旋转,也就是沿着y轴旋转,当数值为0时,则代表是正北方向
        //     pitch:Cesium.Math.toRadians(-90), // 控制视口的上下旋转,即沿x轴进行旋转,当数值为-90时,则是俯视朝向地面
        //     roll:0 // 控制视口的翻转角度 即沿着z轴进行翻转,数值为0不翻转
        //   },
        //   duration:5 // 设置相机的飞机时间
        // })
        //lookAt 方法一般用于锁定某个场景的视角

        const center = Cesium.Cartesian3.fromDegrees(116.39,39.91)
        // 设置一个水平旋转方向的角度
        const heading = Cesium.Math.toRadians(50)
        // 设置一个垂直旋转视口的角度
        
        const pitch =  Cesium.Math.toRadians(-90)
        // 设置相机距离目标点的高度
        const range = 2500 
        viewer.camera.lookAt(center,new Cesium.HeadingPitchRange(heading,pitch,range))

        // viewBoundingSphere 没有飞行的过渡效果,而是直接切换到视口指定的目的地,但是它可以给一个指定的目标点,让我们可以从多个角度更好的观测,如我们要观察一架在空中的飞机,将目标点设置在飞机的中心,并给到一定的观察距离,即可从各个角度观测到物体的样式和状态

        // 加载模型需要entity
        var orienttation =  Cesium.Transforms.headingPitchRollQuaternion(position,new Cesium.HeadingPitchRoll(-90,0,0)) // 模型朝向 参数:1 位置信息 2 旋转角度信息  这里设定模型的垂直旋转和翻转均为0,以达到飞机飞行的效果
        var entity =  viewer.entities.add({
          position:position,
          orientation:orienttation,
          model:{// model属性用于存储模型的各种信息
              uri:"../../static/Apps/SampleData/models/CesiumAir/Cesium_Air.glb",// 用于放入模型的路径链接
              minimumPixelSize:100,//设置模型缩放最小情况下的大小
              maximumScale:10000,// 设置模型缩放最大比例
              show:true //  显示与否
          }
        })
        // new Cesium.viewBoundingSphere(position,20) 第一个参数用于设置视点的位置, 第二个控制与物体的距离 viewBoundingSphere的第二个参数设置的是相机的朝向
        viewer.camera.viewBoundingSphere(new Cesium.BoundingSphere(position,20),new Cesium.HeadingPitchRange(0,0,0))

 

标签:false,旋转,相机,视口,new,Cesium,position
From: https://www.cnblogs.com/h5it/p/16801753.html

相关文章