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>
相关推荐
漂流瓶jz2 分钟前
让数据"流动"起来!Node.js实现流式渲染/流式传输与背后的HTTP原理
前端·javascript·node.js
SamHou018 分钟前
手把手 CSS 盒子模型——从零开始的奶奶级 Web 开发教程2
前端·css·web
我不吃饼干29 分钟前
从 Vue3 源码中了解你所不知道的 never
前端·typescript
开航母的李大43 分钟前
【中间件】Web服务、消息队列、缓存与微服务治理:Nginx、Kafka、Redis、Nacos 详解
前端·redis·nginx·缓存·微服务·kafka
Bruk.Liu43 分钟前
《Minio 分片上传实现(基于Spring Boot)》
前端·spring boot·minio
鱼樱前端1 小时前
Vue3+d3-cloud+d3-scale+d3-scale-chromatic实现词云组件
前端·javascript·vue.js
coding随想1 小时前
JavaScript中的原始值包装类型:让基本类型也能“变身”对象
开发语言·javascript·ecmascript
zhangxingchao1 小时前
Flutter入门:Flutter开发必备Dart基础
前端
佚名猫2 小时前
vue3+vite+pnpm项目 使用monaco-editor常见问题
前端·vue3·vite·monacoeditor
满分观测网友z2 小时前
vue的<router-link>的to里面的query和params的区别
前端·javascript·vue.js