SuperMap iClient3D for WebGL教程（Entity）-PointGraphics

最新推荐文章于 2025-06-13 16:00:41 发布

supermapsupport

最新推荐文章于 2025-06-13 16:00:41 发布

阅读量1.1w

点赞数 1

CC 4.0 BY-SA版权

分类专栏：三维GIS

本文为博主原创文章，欢迎转载，SuperMap技术问答社区 http://ask.supermap.com

本文链接：https://blog.youkuaiyun.com/supermapsupport/article/details/92991275

三维GIS 专栏收录该内容

426 篇文章

订阅专栏

本文继续学习PointGraphics对象，它是点类型，可直接添加矢量点对象。介绍了其主要参数，如点的坐标位置、大小、外边框颜色等，还说明了高度模式、显示条件等。最后展示了制作闪烁有呼吸效果点对象的综合使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

作者：为梦齐舞

本文同步更新于简书文章[https://www.jianshu.com/p/20a402abec6d]

本节继续学习PointGraphics对象，这个是一个点类型，对象属性相对较少，可以直接添加矢量点对象，接下来我们一起学习下吧。

实现代码如下：

viewer.entities.add({
					id: "test",
					position:Cesium.Cartesian3.fromDegrees(117,32,500),
					point: {		
						color: Cesium.Color.RED,
						pixelSize:20,
						outlineColor:Cesium.Color.BLUE,
						outlineWidth:5,
						disableDepthTestDistance:Number.POSITIVE_INFINITY
					}

				});

一、主要参数介绍

1、position：点的坐标位置，需要注意的是这个属性是设置给entity的，而不是point的内部。
2、pixelSize：点的大小，以像素为单位。
3、outlineColor：点的外边框颜色。
4、outlineWidth：点外边框的宽度。
5、show：点是否显示。
6、scaleByDistance：设置基于相机距离的点大小，也就是说可以根据不同的相机高度来设置点的不同大小，一个NearFarScalar类型，比如我设置scaleByDistance为new Cesium.NearFarScalar(1500, 10, 50000, 2)，如果设置了pixelSize则两者会相乘。
7、translucencyByDistance：设置基于相机距离的点透明度，也就是说可以根据不同的相机高度来设置点的透明度，一个NearFarScalar类型，比如我设置scaleByDistance为new Cesium.NearFarScalar(1500, 0.1, 8000, 1)
8、heightReference：高度模式，支持Cesium.HeightReference.NONE(绝对高度)、Cesium.HeightReference.RELATIVE_TO_GROUND（相对地面）、Cesium.HeightReference.CLAMP_TO_GROUND（贴地）三种高度模式，高度模式通过字面意思理解即可。
9、distanceDisplayCondition：即是控制点在什么相机位置下显示出来。例如设置distanceDisplayCondition:new Cesium.DistanceDisplayCondition(1500,5000)，即是在相机距离1500-5000的位置显示，其他具体广告牌都不显示。
10、disableDepthTestDistance：指定从相机到禁用深度测试的距离,如果不希望被地形挡住，设置为Number.POSITIVE_INFINITY即可
##二、综合使用
我们制作一个闪烁的有呼吸效果的点对象，效果如下：
在这里插入图片描述

实现代码如下：

var x = 0;
				var size = 10;
				var isAdd = true;
				var isZoom = true;
				viewer.entities.add({
					id: "test",
					position: Cesium.Cartesian3.fromDegrees(117, 32, 500),
					point: {
						color: new Cesium.CallbackProperty(function() {
							if(isAdd) {
								x = x + 0.05;
								if(x > 1) {
									isAdd = false;
								}
							} else {
								x = x - 0.05;
								if(x < 0) {
									isAdd = true;
								}
							}
							return Cesium.Color.RED.withAlpha(x);
						}, false),
						pixelSize: new Cesium.CallbackProperty(function() {
							if(isZoom) {
								size = size + 1;
								if(size > 50) {
									isZoom = false;
								}
							} else {
								size = size - 1;
								if(size < 10) {
									isZoom = true;
								}
							}
							return size;
						}, false),
						outlineColor: new Cesium.CallbackProperty(function() {
							if(isAdd) {
								x = x + 0.01;
								if(x > 1) {
									isAdd = false;
								}
							} else {
								x = x - 0.01;
								if(x < 0) {
									isAdd = true;
								}
							}
							return Cesium.Color.BLUE.withAlpha(x);
						}, false),
						outlineWidth: 5,
						disableDepthTestDistance: Number.POSITIVE_INFINITY,
					}

				});