CesiumJS 案例 P1：创建 Viewer、通过 JS API 隐藏控件、通过 CSS 隐藏控件、隐藏元素
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>