一:界面
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>