CesiumJS 案例 P1：创建 Viewer、通过 JS API 隐藏控件、通过 CSS 隐藏控件、隐藏元素-CFANZ编程社区

CesiumJS

CesiumJS API：https://cesium.com/learn/cesiumjs/ref-doc/index.html
CesiumJS 是一个开源的 JavaScript 库，它用于在网页中创建和控制 3D 地球仪（地图）

创建 Viewer

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>创建 Viewer</title>
		<link rel="stylesheet" href="../js/Cesium-1.112/Build/Cesium/Widgets/widgets.css" />
		<style>
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}

			html,
			body {
				width: 100%;
				height: 100%;
			}

			.container {
				width: 100%;
				height: 100%;
			}
		</style>
	</head>

	<body>
		<div id="container"></div>
	</body>

	<script src="../js/Cesium-1.112/Build/Cesium/Cesium.js"></script>
	<script>
		const viewer = new Cesium.Viewer("container");
	</script>
</html>

隐藏控件（方式 1，通过 JS API）

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>隐藏控件（方式 1，通过 JS API）</title>
		<link rel="stylesheet" href="../js/Cesium-1.112/Build/Cesium/Widgets/widgets.css" />
		<style>
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}

			html,
			body {
				width: 100%;
				height: 100%;
			}

			.container {
				width: 100%;
				height: 100%;
			}

			/* 右上角按钮组 + 左下角动画播放控件 + 时间轴 + 商标和数据源 + 全屏按钮 */
			.cesium-viewer-toolbar,
			.cesium-viewer-animationContainer,
			.cesium-viewer-timelineContainer,
			.cesium-viewer-bottom,
			.cesium-viewer-fullscreenContainer {
				display: none !important;
			}
		</style>
	</head>

	<body>
		<div id="container"></div>
	</body>

	<script src="../js/Cesium-1.112/Build/Cesium/Cesium.js"></script>
	<script>
		const viewer = new Cesium.Viewer("container", {
			geocoder: false, // 是否显示地理位置搜索工具
			homeButton: false, // 是否显示默认视图按钮
			sceneModePicker: false, // 是否显示 2D、3D 切换按钮
			baseLayerPicker: false, // 是否显示地图按钮
			navigationHelpButton: false, // 是否显示帮助提示按钮
			creditsDisplay: false, // 是否显示商标和数据源
			animation: false, // 是否显示动画播放控件
			timeline: false, // 是否显示时间轴
			fullscreenButton: false, // 是否显示全屏按钮
		});
	</script>
</html>

隐藏控件（方式 2，通过 CSS）

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>隐藏控件（方式 2，通过 CSS）</title>
		<link rel="stylesheet" href="../js/Cesium-1.112/Build/Cesium/Widgets/widgets.css" />
		<style>
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}

			html,
			body {
				width: 100%;
				height: 100%;
			}

			.container {
				width: 100%;
				height: 100%;
			}

			/* 右上角按钮组 + 左下角动画播放控件 + 时间轴 + 商标和数据源 + 全屏按钮 */
			.cesium-viewer-toolbar,
			.cesium-viewer-animationContainer,
			.cesium-viewer-timelineContainer,
			.cesium-viewer-bottom,
			.cesium-viewer-fullscreenContainer {
				display: none !important;
			}
		</style>
	</head>

	<body>
		<div id="container"></div>
	</body>

	<script src="../js/Cesium-1.112/Build/Cesium/Cesium.js"></script>
	<script>
		Cesium.Ion.defaultAccessToken =
			"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI2YmM3MTFjMC1mOTIyLTQ4MmItYWU0MC0wNWM5ODdjZWIzOGMiLCJpZCI6MTI0NzQ5LCJpYXQiOjE2NzY0MzgxMDh9.xXOpAIyhIp3pd7ki0PuzXcbjowOEVVkd5skntQ8ra6I";

		const viewer = new Cesium.Viewer("container");
	</script>
</html>

隐藏元素

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>隐藏元素</title>
		<link rel="stylesheet" href="../js/Cesium-1.112/Build/Cesium/Widgets/widgets.css" />
		<style>
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}

			html,
			body {
				width: 100%;
				height: 100%;
			}

			.container {
				width: 100%;
				height: 100%;
			}

			/* 右上角按钮组 + 左下角动画播放控件 + 时间轴 + 商标和数据源 + 全屏按钮 */
			.cesium-viewer-toolbar,
			.cesium-viewer-animationContainer,
			.cesium-viewer-timelineContainer,
			.cesium-viewer-bottom,
			.cesium-viewer-fullscreenContainer {
				display: none !important;
			}
		</style>
	</head>

	<body>
		<div id="container"></div>
	</body>

	<script src="../js/Cesium-1.112/Build/Cesium/Cesium.js"></script>
	<script>
		const viewer = new Cesium.Viewer("container", {
			skyBox: false, // 禁用星空
			skyAtmosphere: false, // 禁用大气
		});
	</script>
</html>