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>Billboard - 标记平移</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");
const billboards = viewer.scene.primitives.add(new Cesium.BillboardCollection());
const billboard = billboards.add({
image: "../img/marker-icon.png",
position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
});
const startPosition = billboard.position.clone();
const endPosition = Cesium.Cartesian3.fromDegrees(-75.60777, 45.03883);
let intervalTime = 500;
let nowTime = 0;
let targetTime = 5 * 1000;
interval = setInterval(() => {
nowTime += intervalTime;
billboard.position = Cesium.Cartesian3.lerp(startPosition, endPosition, nowTime / targetTime, new Cesium.Cartesian3());
if (nowTime === targetTime) clearInterval(interval);
}, intervalTime);
</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>Billboard - 删除标记</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 billboards = viewer.scene.primitives.add(new Cesium.BillboardCollection());
billboards.add({
image: "../img/marker-icon.png",
position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
});
billboards.add({
image: "../img/marker-icon.png",
position: Cesium.Cartesian3.fromDegrees(-75.59777, 41.03883),
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
});
const btnAllRemove = document.querySelector(".btn-all-remove");
btnAllRemove.addEventListener("click", () => {
billboards.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>Billboard - 隐藏与显示标记</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 billboards = viewer.scene.primitives.add(new Cesium.BillboardCollection());
const billboard = billboards.add({
image: "../img/marker-icon.png",
position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
});
const btnHideOrShow = document.querySelector(".btn-hide-or-show");
btnHideOrShow.addEventListener("click", () => {
billboard.show = !billboard.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>Billboard - 标记颜色</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");
const billboards = viewer.scene.primitives.add(new Cesium.BillboardCollection());
// 不透明标记
billboards.add({
image: "../img/marker-icon.png",
position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
});
// 半透明标记
billboards.add({
image: "../img/marker-icon.png",
position: Cesium.Cartesian3.fromDegrees(-75.59777, 41.03883),
color: new Cesium.Color(1.0, 1.0, 1.0, 0.5),
});
// 全透明标记
billboards.add({
image: "../img/marker-icon.png",
position: Cesium.Cartesian3.fromDegrees(-75.59777, 42.03883),
color: new Cesium.Color(1.0, 1.0, 1.0, 0),
});
</script>
</html>