CesiumJS 案例 P18：检测文本、删除所有文本、隐藏与显示文本、改变文本
CesiumJS
-
CesiumJS API：https://cesium.com/learn/cesiumjs/ref-doc/index.html
-
CesiumJS 是一个开源的 JavaScript 库，它用于在网页中创建和控制 3D 地球仪（地图）
一、检测文本
<!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>
二、删除所有文本
<!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>
三、隐藏与显示文本
<!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>
四、改变文本
<!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>