cesium从头开始一个项目-无人机飞行-3-初始化位置/设置初始视角

最新推荐文章于 2024-05-21 14:15:14 发布

Zacharium_

最新推荐文章于 2024-05-21 14:15:14 发布

阅读量1.3k

点赞数 1

分类专栏：无人机飞行 cesium 集群效果展示文章标签： javascript node.js html5

本文链接：https://blog.csdn.net/weixin_45656079/article/details/121315329

版权

cesium 同时被 3 个专栏收录

5 篇文章 0 订阅

订阅专栏

无人机飞行

4 篇文章 0 订阅

订阅专栏

集群效果展示

4 篇文章 0 订阅

订阅专栏

2021年11月14日

目标效果是这样的

即我们希望运行代码加载过后，视角不再是一整个地球，而是我们场景发生的地方

这里我选择的是北京故宫

前几天北京下雪了，雪后的故宫是真好看

不会的函数一定要去查文档！

比较简单直接上代码

var Beijing = Cesium.Cartesian3.fromDegrees(116.3875,39.9009,900) 
var BeijingX = Beijing.x
var BeijingY = Beijing.y
var BeijingZ = Beijing.z

viewer.camera.flyTo({ //设置为北京上空
    destination:{
        x: BeijingX,
        y: BeijingY,
        z: BeijingZ
    },
     orientation:{ 
         heading: 0.3884413259732771, //旋转角 正东为90°
         pitch: Cesium.Math.toRadians(-45), //俯仰角，水平为0°
         roll: 0.0014112073156402616     //翻滚角
        },
     duration:2,
         complete:function () {
         viewer.animation.viewModel.pauseViewModel.command(); // 到达位置后执行的回调函数
    },
});

由于一个地点的经纬度比较好确定，直接百度查就可以得到

所以我们使用Cesium.Cartesian3.fromDegrees()

来讲经纬度转化为笛卡尔坐标系的坐标值

然后使用viewer.camera.flyTo()，将视角固定在此位置上

不过假如我们想要的点的经纬度在百度上查不到怎么办

利用下面的代码就好了

//以下三行为html
//获取id为''的对象
var longitude_show=document.getElementById('longitude_show');
var latitude_show=document.getElementById('latitude_show');
var altitude_show=document.getElementById('altitude_show');
//获取画布
var canvas=viewer.scene.canvas;
//具体事件的实现
var ellipsoid=viewer.scene.globe.ellipsoid;
var handler = new Cesium.ScreenSpaceEventHandler(canvas);
handler.setInputAction(function(movement){
//捕获椭球体，将笛卡尔二维平面坐标转为椭球体的笛卡尔三维坐标，返回球体表面的点
    var cartesian=viewer.camera.pickEllipsoid(movement.endPosition, ellipsoid);
    if(cartesian){
        //将笛卡尔三维坐标转为地图坐标（弧度）
        var cartographic=viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian);
//将地图坐标（弧度）转为十进制的度数
        var lat_String=Cesium.Math.toDegrees(cartographic.latitude).toFixed(4);
        var log_String=Cesium.Math.toDegrees(cartographic.longitude).toFixed(4);
        var alti_String=(viewer.camera.positionCartographic.height/1000).toFixed(2);
        longitude_show.innerHTML=log_String;
        latitude_show.innerHTML=lat_String;
        altitude_show.innerHTML=alti_String;
    }
},Cesium.ScreenSpaceEventType.MOUSE_MOVE);

当我的鼠标悬停在鸟蛋上方时，其信息就可以实时显示出来了