Cesium学习（第二课）_cesium 图形选择器-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_38893664/article/details/105201527

本文介绍了如何使用Cesium创建一个纯净的地球界面，详细讲解了Viewer地图控件的功能，包括geocoder、homeButton、sceneModePicker等，并提供了通过代码隐藏特定控件的方法，以实现自定义的地球视图。

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

Cesium Viewer地图控件

在上一节课的学习中，我们构建了一个美丽的地球界面，Cesium Viewer地图主视图控件，如图1所示，图1 地图控件
地图控件介绍：
1.geocoder：查询按钮，查询搜索地点
2.homeButton： Home按钮，通常用于场景视角复位
3.sceneModePicker：3D/2D/2.5D场景模式选择器
4.baseLayerPicker：底层地图选择器
5.navigationHelpButton：帮助信息
6.animation：动画小器件，左下角仪表
7.fullscreenButton：全屏按钮
8.timeline：时间轴
9.credit：版权信息

创建一个纯净的地球

在上节课我们创建的地球，有些控件并不是我们想看到的，如版权信息，时间线以及动画小部件，为此我们可以通过代码来控制它们的隐藏，Viewer类是Cesium中的主类，上节课我们通过var viewer = new Cesium.Viewer({‘cesiumContainer’}) 创建地球，通过查询Viewer类API函数，Viewer类还有一个参数options，var viewer = new Cesium.Viewer({‘容器id’,options})，其实这些控件就是通过其中的options来进行控制，好了，让我们一起通过代码来实现吧。创建新的html文件，构建一个纯净的地球。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HelloCesium</title>
    <link rel="stylesheet" href="Cesium/Widgets/widgets.css">
    <script src="Cesium/Cesium.js"></script>
    <style>
        html,body,#cesiumContainer{
            width: 100%;
            height: 100%;
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>
<body>
    <div id="cesiumContainer"></div>
    <script>
        var viewer = new Cesium.Viewer('cesiumContainer',{
            geocoder:false,
            homeButton:false,
            sceneModePicker:false,
            baseLayerPicker:false,
            animation:false,
            fullscreenButton:false,
            timeline:false,
            navigationHelpButton:false
            //去除一系列的控件
        });
        viewer._cesiumWidget._creditContainer.style.display="none";//去除版权信息
    </script>  
</body>
</html>

HelloCesium `