本文共 2100 字，大约阅读时间需要 7 分钟。

作者：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

转载地址：http://qipxi.baihongyu.com/