Cesium中点的添加

本文主要是介绍Cesium中点的添加，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

Cesium，作为一款强大的三维地球和地图可视化框架，广泛应用于各种地理信息系统和仿真场景中。在Cesium中，点的添加不仅是对空间数据的基本操作，更是实现复杂空间分析、可视化表达的关键步骤。本文将围绕Cesium中添加点的过程、方法及其在实际应用中的意义展开论述。
在Cesium中添加点，首先需要明确点的空间位置信息，这通常包括经度、纬度和高程。通过Cesium提供的API，我们可以方便地创建和添加点对象。具体来说，我们可以使用Cesium的Entity API来创建一个包含Point Graphics的实体，并设置其位置、颜色和大小等属性。这样，一个具有空间位置属性的点就被添加到了Cesium的三维地球场景中。
添加点的过程中，我们还可以根据需要对点的外观进行定制。比如，通过改变点的颜色、大小等属性，可以使其更加突出或符合特定的视觉需求。此外，Cesium还支持对点进行动画效果的处理，如闪烁、渐变等，这进一步丰富了点的表达方式和视觉效果。
在实际应用中，Cesium中添加点的功能具有广泛的应用价值。首先，在地理信息系统中，点往往代表着各种地理要素，如城市、地标、交通节点等。通过添加点，我们可以直观地展示这些要素在地球表面的分布和位置关系，为决策分析提供直观的依据。其次，在仿真场景中，点可以用于表示各种动态对象，如飞行器、车辆等。通过实时更新点的位置信息，我们可以实现对这些动态对象的实时追踪和可视化展示。
除了基本的添加和展示功能外，Cesium还提供了丰富的空间分析工具，可以与点数据进行结合使用。例如，我们可以利用Cesium的空间查询功能，查找特定区域内的点数据，或者计算点与点之间的距离、面积等空间关系。这些功能不仅提高了空间数据的处理效率，也为复杂的空间分析提供了有力支持。
然而，值得注意的是，虽然Cesium在添加点方面功能强大且灵活，但在实际应用中仍需注意数据的准确性和合理性。错误的点数据不仅会影响视觉效果，还可能导致空间分析结果的偏差。因此，在添加点之前，我们需要对数据进行严格的预处理和校验，确保数据的准确性和可靠性。

在ts文件中声明添加点的方法及配置项 utils/cesium.ts

import * as Cesium from "cesium";export default class CesiumTemplate {public static viewer: Cesium.Viewer;// 初始化public static init() {this.viewer = new Cesium.Viewer("cesiumContainer", {imageryProvider: new Cesium.UrlTemplateImageryProvider({url: "http://192.168.2.111:30911/google_0-9/{z}/{x}/{y}.jpg", //换成自己的地址maximumLevel: 9,}),animation: false, // 动画控件shouldAnimate: false, // 初始时刻运动homeButton: false, // Home按钮fullscreenButton: false, // 全屏按钮baseLayerPicker: false, // 图层选择控件geocoder: false, // 地名查找控件timeline: false, // 时间线控件shadows: false,navigationHelpButton: false, // 帮助信息控件infoBox: false, // 点击要素之后显示的信息 信息框小部件requestRenderMode: false, // true启用请求渲染模式:更新实体需拖动地图 视图才更新[true 加载完entity后requestRender一下]scene3DOnly: false, // 几何图形以3D模式绘制以节约GPU资源sceneMode: Cesium.SceneMode.SCENE3D, // 初始场景模式  3d 球maximumRenderTimeChange: 1,sceneModePicker: false, // 切换展示模式控件selectionIndicator: false,// 设置渲染orderIndependentTranslucency: false,contextOptions: {webgl: {alpha: true,},},});//去除 左下角 版权信息(this.viewer.cesiumWidget.creditContainer as HTMLElement).style.display = "none";// 相机位置this.viewer.camera.flyTo({destination: Cesium.Cartesian3.fromDegrees(120, 48, 25000000),});//--------------------------------------const scene = this.viewer.scene;return this.viewer;}// 添加点public static addPoint(option:any) {let point = this.viewer.entities.add({name: option.name,position: Cesium.Cartesian3.fromDegrees(option.longitude,option.latitude,option.altitude),point: {// 点的大小（像素）pixelSize: 5,// 点位颜色，fromCssColorString 可以直接使用CSS颜色// color: Cesium.Color.fromCssColorString("red"),color: Cesium.Color.BLUE,// 边框颜色outlineColor: Cesium.Color.fromCssColorString("yellow"),// 边框宽度(像素)outlineWidth: 1,// 是否显示show: true,},// 文字label: {// 文本。支持显式换行符“ \ n”text: option.name,// 字体样式，以CSS语法指定字体font: "14pt Source Han Sans CN",// 字体颜色fillColor: Cesium.Color.AQUA,// 背景颜色backgroundColor: Cesium.Color.AQUA,// 是否显示背景颜色showBackground: false,// 字体边框// outline: true,// 字体边框颜色outlineColor: Cesium.Color.BLACK,// 字体边框尺寸outlineWidth: 10,// 应用于图像的统一比例。比例大于会1.0放大标签，而比例小于会1.0缩小标签。scale: 1,// 设置样式：FILL：填写标签的文本，但不要勾勒轮廓；OUTLINE：概述标签的文本，但不要填写；FILL_AND_OUTLINE：填写并概述标签文本。style: Cesium.LabelStyle.FILL_AND_OUTLINE,// 相对于坐标的垂直位置verticalOrigin: Cesium.VerticalOrigin.TOP,// 相对于坐标的水平位置horizontalOrigin: Cesium.HorizontalOrigin.CENTER,// 该属性指定标签在屏幕空间中距此标签原点的像素偏移量// pixelOffset: new Cesium.Cartesian2(-25, -20),// 是否显示show: true,}});return point;}}

在vue文件中使用

<script setup lang="ts">
import { ref, onMounted } from "vue";
import CesiumTemplate from "@/utils/cesium";onMounted(async () => {//初始化cesiumconst viewer: Cesium.Viewer = CesiumTemplate.init();// 添加点CesiumTemplate.addPoint({name: "点",longitude: 130,latitude: 26,altitude: 1056,});
});</script>
<template><div id="cesiumContainer" />
</template>

效果图：
在这里插入图片描述