CesiumJS
-
CesiumJS API：https://cesium.com/learn/cesiumjs/ref-doc/index.html
-
CesiumJS 是一个开源的 JavaScript 库，它用于在网页中创建和控制 3D 地球仪（地图）
一、检测文本
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Label - 检测文本</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%;
}
.btn-remove-text {
position: fixed;
left: 0px;
top: 0px;
}
.btn-check-text {
position: fixed;
left: 0px;
top: 50px;
}
</style>
</head>
<body>
<div id="container"></div>
<button class="btn-remove-text">删除文本</button>
<button class="btn-check-text">检测文本</button>
</body>
<script src="../js/Cesium-1.112/Build/Cesium/Cesium.js"></script>
<script>
const viewer = new Cesium.Viewer("container");
const labels = viewer.scene.primitives.add(new Cesium.LabelCollection());
const label = labels.add({
text: "Hello World",
position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
});
const btnMoveText = document.querySelector(".btn-remove-text");
const btnCheckText = document.querySelector(".btn-check-text");
btnMoveText.addEventListener("click", () => {
labels.remove(label);
});
btnCheckText.addEventListener("click", () => {
console.log(labels.contains(label));
});
</script>
</html>二、删除所有文本
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Label - 删除文本</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%;
}
.btn-all-remove {
position: fixed;
left: 0px;
top: 0px;
}
</style>
</head>
<body>
<div id="container"></div>
<button class="btn-all-remove">删除所有文本</button>
</body>
<script src="../js/Cesium-1.112/Build/Cesium/Cesium.js"></script>
<script>
const viewer = new Cesium.Viewer("container");
const labels = viewer.scene.primitives.add(new Cesium.LabelCollection());
labels.add({
text: "Hello World",
position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
});
labels.add({
text: "Hello World",
position: Cesium.Cartesian3.fromDegrees(-75.59777, 41.03883),
});
const btnAllRemove = document.querySelector(".btn-all-remove");
btnAllRemove.addEventListener("click", () => {
labels.removeAll();
});
</script>
</html>三、隐藏与显示文本
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Label - 隐藏与显示文本</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%;
}
.btn-hide-or-show {
position: fixed;
left: 0px;
top: 0px;
}
</style>
</head>
<body>
<div id="container"></div>
<button class="btn-hide-or-show">隐藏 / 显示文本</button>
</body>
<script src="../js/Cesium-1.112/Build/Cesium/Cesium.js"></script>
<script>
const viewer = new Cesium.Viewer("container");
const labels = viewer.scene.primitives.add(new Cesium.LabelCollection());
const label = labels.add({
text: "Hello World",
position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
});
const btnHideOrShow = document.querySelector(".btn-hide-or-show");
btnHideOrShow.addEventListener("click", () => {
label.show = !label.show;
});
</script>
</html>四、改变文本
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Label - 改变文本</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%;
}
.btn-change {
position: fixed;
left: 0px;
top: 0px;
}
</style>
</head>
<body>
<div id="container"></div>
<button class="btn-change">改变文本</button>
</body>
<script src="../js/Cesium-1.112/Build/Cesium/Cesium.js"></script>
<script>
const viewer = new Cesium.Viewer("container");
const labels = viewer.scene.primitives.add(new Cesium.LabelCollection());
const label = labels.add({
text: "Hello World 1",
position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
});
const btnChange = document.querySelector(".btn-change");
btnChange.addEventListener("click", () => {
label.text = "Hello World 2";
});
</script>
</html>