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>