点位聚合

撒点

使用 new Cesium.GeoJsonDataSource().load("./data/sz_poi.geojson")api请求读取geojson文件然后通过viewer.dataSources.add(res)添加到地图上。 geojson格式可以通过我们请求后台返回的json格式，拿到需要的信息，前台手动转换成geojson格式渲染在地图上。（把load中的值换成转换好的json转geojson格式即可）

  new Cesium.GeoJsonDataSource().load("./data/sz_poi.geojson").then(dataSource => {
    viewer.dataSources.add(dataSource);
    ....
  })

聚合

在我们撒点的同时设置聚合的一些属性参数

function initCluster(viewer) {
  new Cesium.GeoJsonDataSource().load("./data/sz_poi.geojson").then(dataSource => {
    ....
    // 设置聚合参数
    dataSource.clustering.enabled = true;
    dataSource.clustering.pixelRange = 60;
    dataSource.clustering.minimumClusterSize = 2;

    // foreach用于调用数组的每个元素，并将元素传递给回调函数。
    dataSource.entities.values.forEach(entity => {
        // 将点拉伸一定高度，防止被地形压盖
        entity.position._value.z += 50.0;
        // 使用大小为64*64的icon，缩小展示poi
        entity.billboard = {
            image: './icons/poi.png',
            width: 32,
            height: 32,
        };
        entity.label = {
            text: 'POI',
            font: 'bold 15px Microsoft YaHei',
            // 竖直对齐方式
            verticalOrigin: Cesium.VerticalOrigin.CENTER,
            // 水平对齐方式
            horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
            // 偏移量
            pixelOffset: new Cesium.Cartesian2(15, 0),
        }
    });

    // 添加监听函数
    dataSource.clustering.clusterEvent.addEventListener(
        function(clusteredEntities, cluster) {
            // 关闭自带的显示聚合数量的标签
            cluster.label.show = false;
            cluster.billboard.show = true;
            cluster.billboard.verticalOrigin = Cesium.VerticalOrigin.BOTTOM;

            // 根据聚合数量的多少设置不同层级的图片以及大小
            cluster.billboard.image = combineIconAndLabel('./icons/cluster_1.png', clusteredEntities.length, 64);
            cluster.billboard.width = 40;
            cluster.billboard.height = 40;
        }
    )
  })
}
 // 创建画布对象
function combineIconAndLabel(url, label, size) {
   
    let canvas = document.createElement('canvas');
    canvas.width = size;
    canvas.height = size;
    let ctx = canvas.getContext("2d");

    let promise = new Cesium.Resource.fetchImage(url).then(image => {
        // 异常判断
        try {
            ctx.drawImage(image, 0, 0);
        } catch (e) {
            console.log(e);
        }
        // 渲染字体
        // font属性设置顺序：font-style, font-variant, font-weight, font-size, line-height, font-family
        ctx.fillStyle = Cesium.Color.WHITE.toCssColorString();
        ctx.font = 'bold 20px Microsoft YaHei';
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        ctx.fillText(label, size / 2, size / 2);

        return canvas;
    });
    return promise;
}

geojson

geojson是用json的语法表达和存储地理数据，可以说是json的子集。 例如：

{
  "type": "FeatureCollection",
  "features": [
        {"type":"Feature",
        "properties":{},
        "geometry":{
            "type":"Point",
            "coordinates":[105.380859375,31.57853542647338]
            }
        }
    ]
}

geojson格式表示地理元素分为点、线、面...等格式数据存储格式，都有对应的写法