Cesium04-界面和默认控件

最新推荐文章于 2024-05-29 10:38:21 发布

Giser_轩

最新推荐文章于 2024-05-29 10:38:21 发布

阅读量580

点赞数 10

分类专栏： Cesium基础文章标签：数码相机

本文链接：https://blog.csdn.net/m0_56492004/article/details/136668529

版权

Cesium基础专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一：界面

1：概念

Cesium程序中，Viewer是所有内容的基础；

初始化的Cesium程序主要分为两个部分：初始化的三维地球、默认自带的一些控件。

三维地球场景支持鼠标（计算机端）和手指触摸（移动端）两种方式进行交互。支持四种相机漫游方式：

（1）鼠标左键拖曳，相机在地球平面平移；

（2）鼠标右键拖曳，缩放相机；

（3）鼠标滚轮滑动，缩放相机；

（4）鼠标滚轮拖曳，根据地球屏幕中点，旋转相机

二：默认控件介绍

1：Geocoder

位置查找工具，输入地点，相机跳转并对准找到的结果。

2：HomeButton

首页位置工具，单击该控件，相机跳转到默认全球视角。

3：SceneModePicker

视角模式切换工具：

（1）3D视角

（2）2D视角：只平移，不旋转

（3）哥伦布视图视角：可平移，可旋转

（2D）

（哥伦布）

4：BaseLayerPicker

默认图层选择工具，这里可选择要显示的地图服务和地形服务。

5：NavigationHelpButton

导航帮助工具，显示默认的地图控件和帮助选项。

6：Animation

动画工具，控制视图动画的播放速度

7：TimeLine

时间轴工具，指示当前时间，并允许用户跳转到指定时间。

8：FullscreenButton

全屏按钮工具，单击可进入全屏模式

三：控件显隐

通过对其对应的属性设置true/false，可以控制地图控件的显隐，从而达到自定义屏幕的效果。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cesium03</title>
    <script src="./Build/Cesium/Cesium.js"></script>
    <link rel="stylesheet" href="./Build/Cesium/Widgets/widgets.css">
</head>
<style>
    * {
        margin: 0px;
        padding: 0;
        box-sizing: border-box;
    }

    #cesiumContainer {
        width: 100vw;
        height: 100vh;

    }

    .cesium-viewer-bottom {
        display: none;
    }
</style>

<body>
    <div id="cesiumContainer"></div>
    <script>
        Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzZjY5M2UwNi1kODhmLTQzZTItYjc4Ni0yMzlmNTBlYmIxYjgiLCJpZCI6MTU3NTE3LCJpYXQiOjE2OTQ1MDMyOTl9.PSElCoyLF_ecNszBWrrOmB9JH7yPxrSLo-Tx4DIm1LU"
        var viewer = new Cesium.Viewer("cesiumContainer", {
            geocoder: false,
            homeButton: false,   //是否显示首页位置工具
            sceneModePicker: false,  //是否显示视角模式切换工具 
            baseLayerPicker: false,  //是否显示默认图层选择工具
            navigationHelpButton: false,  //是否显示导航帮助工具
            animation: false, //是否显示动画工具
            timeline: false, //是否显示时间轴工具
            fullscreenButton: false,//是否显示全屏按钮工具
        })
    </script>
</body>


</html>