首页 > 其他分享 >CesiumJS 案例 P17:添加文本、文本样式、删除文本、移动文本

CesiumJS 案例 P17:添加文本、文本样式、删除文本、移动文本

时间:2024-11-01 14:46:19浏览次数:3  
标签:const 100% CesiumJS add P17 Cesium new 文本

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%;
			}
		</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 labels = viewer.scene.primitives.add(new Cesium.LabelCollection());

		const label = labels.add({
			text: "Hello World",
			position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
		});

		const entity = viewer.entities.add({
			position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
			point: {
				pixelSize: 5,
				color: new Cesium.Color(0, 1, 0, 1),
			},
		});
	</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%;
			}
		</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 labels = viewer.scene.primitives.add(new Cesium.LabelCollection());

		const label = labels.add({
			text: "Hello World",
			position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
			font: "24px sans-serif",
			horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
			pixelOffset: new Cesium.Cartesian2(0, -75),
			showBackground: true,
		});

		const entity = viewer.entities.add({
			position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
			point: {
				pixelSize: 5,
				color: new Cesium.Color(0, 1, 0, 1),
			},
		});
	</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-remove-text {
				position: fixed;
				left: 0px;
				top: 0px;
			}
		</style>
	</head>

	<body>
		<div id="container"></div>
		<button class="btn-remove-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 btnRemoveText = document.querySelector(".btn-remove-text");

		btnRemoveText.addEventListener("click", () => {
			labels.remove(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-move-text {
				position: fixed;
				left: 0px;
				top: 0px;
			}
		</style>
	</head>

	<body>
		<div id="container"></div>
		<button class="btn-move-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-move-text");

		btnMoveText.addEventListener("click", () => {
			label.position = Cesium.Cartesian3.fromDegrees(-75.59777, 50.03883);
		});
	</script>
</html>

标签:const,100%,CesiumJS,add,P17,Cesium,new,文本
From: https://blog.csdn.net/weixin_52173250/article/details/143428702

相关文章

  • 揭秘命名实体识别:从基础到实战,带你探索文本中的隐藏宝藏!
     欢迎关注我......
  • 释放AI潜能:一站式文本处理、分析与转换免费神器
    Textin.com产品使用手册/心得引言在当今数字化时代,文本处理、分析和转换已成为各行各业不可或缺的工具。然而,找到一个功能全面且易于使用的平台却并非易事。今天,我将向大家介绍一个免费的AI集文本处理、分析、转换于一体的在线平台——Textin.com。这个平台不仅功能强大,......
  • Unity6 URP17使用初探
    1.简介随着Unity6的发布,URP17也已经可以上手使用,相对旧的版本改动较大的是加入了RenderGraph、STP、Foveatedrendering、GPUResidentDrawer等功能,部分功能只需要开关参数即可使用,而GRD更像是Gpudriven管线下的SRPBatches升级,RenderGraph相较于HDRP之前使用的版本换了一套A......
  • P1779 魔鬼杀手 题解&&思路
    P1779魔鬼杀手题解&&思路题目链接。分析题目性质我们发现假如有状态表示\(M\)个方案选或不选,那么这个状态有唯一确定的结果,即结果不会随着施法的顺序而改变。考虑\(dp.\)我们从题目出发,发现每个方案有单个攻击或者集体攻击,想一想从这个方面考虑。又由于每一个方案是可......
  • ElevenLabs Voice Design:文本生成个性化语音;科学家用 AI 解读猪叫声背后情绪和压力丨R
       开发者朋友们大家好: 这里是「RTE开发者日报」,每天和大家一起看新闻、聊八卦。我们的社区编辑团队会整理分享RTE(Real-TimeEngagement)领域内「有话题的新闻」、「有态度的观点」、「有意思的数据」、「有思考的文章」、「有看点的会议」,但内容仅代表编......
  • Python数据分析NumPy和pandas(十六、文本格式数据的读取与存储:csv、json、xml和html)
    一、分段读取文本文件在处理非常大的文件时,未找到合适的数据处理方法前,我们一般希望只读取文件的一小部分或遍历文件的较小块来做预处理或参考。这种情况可以采用分段读取文本文件的方式。我们加载一个10000行的ex6.csv文件,其内容如下:一般情况下,对于pandas读取大文件数据时......
  • 轻松绕过AI检测!BypassGPT让你的AI文本变得更“人性化”
    摘要:BypassGPT是一款免费在线工具,可以将AI生成的内容转化为人类风格,轻松绕过GPTZero等检测系统。操作简单,让你的文本更自然、真实。最近我发现了一个非常实用的小工具,叫BypassGPT,它简直就是专为我们这些用AI生成内容的人量身打造的!如果你也经常写文章、做报告,或是需要生成一些自......
  • CesiumJS 案例 P12:添加指定长宽的图片图层并居中显示(圆点分别为图片图层的中心点、左
    CesiumJSCesiumJSAPI:https://cesium.com/learn/cesiumjs/ref-doc/index.htmlCesiumJS是一个开源的JavaScript库,它用于在网页中创建和控制3D地球仪(地图)一、添加加指定长宽的图片图层并居中显示(原点为图片图层的中心点)<!DOCTYPEhtml><htmllang="en"> <head>......
  • 江大白 | 跨界融合创新,基于YOLO11和Ollama的增强OCR文本识别
    本文来源公众号“江大白”,仅用于学术分享,侵权删,干货满满。原文链接:跨界融合创新,基于YOLO11和Ollama的增强OCR文本识别导读本文介绍一种通过自定义YOLOv11和EasyOCR,结合Ollama优化OCR效果的方法,解决了传统OCR在复杂图像中的识别难题,显著提高了准确性,为高精度文本提取提供了有......
  • 帝国CMS从文章模型“内容存数据库”改为“内容存文本”的方案
    在帝国CMS文章模型(news)的newstext字段默认是“内容存文本”的模式,但是有时候我们刚建站时出于某种原因把这个默认模式修改成了“内容存数据库”了。网站运行一段时间后,我们发现数据库越来越大,这时候想把它重新修改为“内容存文本”的模式,可以有效为数据库减负。但因为表里已经存在......