Cesium实现俯仰角转换

最新推荐文章于 2024-11-28 12:09:55 发布

原创最新推荐文章于 2024-11-28 12:09:55 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #css

Cesium 专栏收录该内容

4 篇文章

订阅专栏

此HTML文档演示了如何使用CesiumJavaScript库创建一个三维地球视图，并设置了初始位置和俯仰角。代码中定义了相机视角，包括经度、纬度和高度，以及航向、俯仰和滚转角度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- Use correct character set. -->
        <meta charset="utf-8" />
        <!-- Tell IE to use the latest, best version. -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
        <meta
          name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
        />
        <title>俯仰角</title>
        <script src="../Build/Cesium/Cesium.js"></script>
        <style>
          @import url(../Build/Cesium/Widgets/widgets.css);
          @import url(../Apps/Sandcastle/templates/bucket.css); 
          html,
          body,
          #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
          }
        </style>
      </head>
<body>
    <div id="cesiumContainer" class="fullSize"></div>
    <div id="loadingOverlay"><h1>loading..</h1></div>
    <div id="toolbar"></div>
    <script>
      var viewer = new Cesium.Viewer('cesiumContainer',{
        // animation:false, // 是否创建动画小控件，及右下角的仪表，默认为T
        // baseLayerPicker:false, //是否显示图层选择器，默认位T
        // fullscreenButton:false, // 是否显示全屏按钮，默认为T
        // geocoder:false, // 是否显示Geocoder(右上角查询按钮)，默认为T
        // homeButton:false, // 是否显示Home按钮 ，默认为T
        // infoBox:false, // 是否显示信息框，默认为T
        // sceneModePicker:false, // 是否显示三维/二维地图选择器，默认为T
        // selectionIndicator:false, // 是否显示选择指示器（鼠标点击显示绿框），默认为T
        // timeline:false, // 是否显示时间轴，默认为T
        // navigationHelpButton:false, // 是否显示右上角的帮助按钮，默认为T
        // scene3DOnly:true, // 如果设置为true,则所有几何图形以三维模式绘制以节约GPU资源，默认为F        
      });
      var position = Cesium.Cartesian3.fromDegrees(117.71181106148288,24.531578063964847,500);
      viewer.camera.setView({
        destination:position,
        orientation:{
          heading:Cesium.Math.toRadians(30.0),//默认方向为正北，正角度为向东旋转，即水平旋转，也叫航偏角。
          pitch:Cesium.Math.toRadians(-30.0),//默认旋转角度为-90，即朝向地面，正角度为平面之上，负角度为平面之下，及上下旋转，也叫俯仰角。
          roll:0.0 //左右旋转角，正角度向右旋转
        }
      }) 
    </script>
</body>
</html>