CesiumJS 案例 P16:标记平移、删除标记、隐藏与显示标记、标记颜色

CesiumJS


一、标记平移

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>
相关推荐
vivo互联网技术12 小时前
拥抱新一代 Web 3D 引擎,Three.js 项目快速升级 Galacean 指南
前端·three.js
江城开朗的豌豆12 小时前
React应用优化指南:让我的项目性能“起飞”✨
前端·javascript·react.js
会飞的青蛙12 小时前
GIT 配置别名&脚本自动化执行
前端·git
再吃一根胡萝卜12 小时前
🔍 当 `<a-menu>` 遇上 `<template>`:一个容易忽视的菜单渲染陷阱
前端
Asort12 小时前
JavaScript 从零开始(六):控制流语句详解——让代码拥有决策与重复能力
前端·javascript
无双_Joney12 小时前
[更新迭代 - 1] Nestjs 在24年底更新了啥?(功能篇)
前端·后端·nestjs
在云端易逍遥13 小时前
前端必学的 CSS Grid 布局体系
前端·css
EMT13 小时前
在 Vue 项目中使用 URL Query 保存和恢复搜索条件
javascript·vue.js
ccnocare13 小时前
选择文件夹路径
前端
艾小码13 小时前
还在被超长列表卡到崩溃?3招搞定虚拟滚动,性能直接起飞!
前端·javascript·react.js