SuperMap iClient3D for WebGL之点聚合

作者：nannan

       在场景中查询结果通常以标记点（布告板）的形式展现，但是如果标记点较多，不仅会大大增加客户端的渲染时间，让客户端变得很卡，而且会让人产生密集恐惧症（图1）。

                                                                                       图1
       为了解决这一问题，我们需要一种手段能在用户有限的可视区域范围内，利用最小的区域展示出最全面的信息，而又不产生重叠覆盖。它就是点聚合。本文小编采用1万个点进行的聚合，下面先看点聚合效果图：

                                                                     图2 聚合显示个数

                                                                     图3 聚合显示原图片

代码实现

（1）主要接口是EntityCluster

（2）主要代码

//创建一个数据源
var clusteringlayer = new Cesium.CustomDataSource('clusteringlayer');
				viewer.dataSources.add(clusteringlayer);
				//添加1万个布告板
				for (var x = 116.4440; x <= 116.4720; x = x + 0.00028) {
					for (var y = 39.9024; y <= 39.9218; y = y + 0.000194) {
						clusteringlayer.entities.add({
							position: Cesium.Cartesian3.fromDegrees(x, y, 0),
							billboard: {
								image: './images/location4.png',
								scale: 0.1
							},
						})
					}
				}
				var pixelRange = 200;
				var minimumClusterSize = 5;
				var enabled = true;
				//启用集群
				clusteringlayer.clustering.enabled = enabled;
				//设置扩展屏幕空间边界框的像素范围。
				clusteringlayer.clustering.pixelRange = pixelRange;
				//可以群集的最小屏幕空间对象
				clusteringlayer.clustering.minimumClusterSize = minimumClusterSize;
				//将进行实体的广告牌聚类
				clusteringlayer.clustering.clusterBillboards = true;
				customStyle();

				var removeListener;
				//自定义地图图钉生成为画布元素
				var pinBuilder = new Cesium.PinBuilder();

				function customStyle() {
					if (Cesium.defined(removeListener)) {
						removeListener();
						removeListener = undefined;
					} else {
						removeListener = clusteringlayer.clustering.clusterEvent.addEventListener(function(clusteredEntities, cluster) {
							cluster.label.show = false;
							cluster.billboard.show = true;
							cluster.billboard.id = cluster.label.id;
							cluster.billboard.verticalOrigin = Cesium.VerticalOrigin.BOTTOM;
							cluster.billboard.disableDepthTestDistance = Number.POSITIVE_INFINITY;
                            //文本将被调整为尽可能大的大小同时仍完全包含在图钉中
							var pinimg = pinBuilder.fromText(clusteredEntities.length, Cesium.Color.BLUE, 50).toDataURL();
							//var pinimg='./images/location4.png';
							cluster.billboard.image = pinimg;
							//cluster.billboard.scale=0.2;
						});
					}
				}

（3）代码地址

链接：https://pan.baidu.com/s/17OjdthtLDRatz-2En0S7yA
提取码：2zj5