【GIS小案例】点聚合效果的实现

1，效果图

2，实现代码

<script>
    var viewer = new Cesium.Viewer('cesiumContainer');
    viewer.scene.open("http://www.supermapol.com/realspace/services/3D-SampleCodeForFan20200420/rest/realspace");
    var points = getPoints();
    var pointEntities = [];
    for (var i = 0; i < points.length; i++){
        var lng = points[i][0];
        var lat = points[i][1];
        var entity = new Cesium.Entity({
            id: "marker" + i,
            position : Cesium.Cartesian3.fromDegrees(lng, lat),
            billboard :{
                image : 'image/location4.png',
                width: 32,  // 宽高必须设置，否则首次无法聚合
                height: 38,
                heightReference:Cesium.HeightReference.CLAMP_TO_GROUND,
                horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                verticalOrigin: Cesium.VerticalOrigin.BOTTOM
            }
        })
        pointEntities.push(entity);
    }

    var dataSourceMap= new Map();
    var dataSource = new Cesium.CustomDataSource("cluster");
    viewer.dataSources.add(dataSource);
    for(var i = 0;i < pointEntities.length;i++ ) {
        dataSource.entities.add(pointEntities[i])
    }

    var pixelRange = 25;
    var minimumClusterSize = 5;
    var enabled = true;
    dataSource.clustering.enabled = enabled;
    dataSource.clustering.pixelRange = pixelRange;
    dataSource.clustering.minimumClusterSize = minimumClusterSize;
    var removeListener;
    var singleDigitPins = new Array(5);
    for (var i = 0; i < singleDigitPins.length; ++i) {
        singleDigitPins[i] = "image/cluster/" + (i + 5) + ".png";
    }


    customStyle();
    dataSourceMap.set(name,dataSource);

    function customStyle() {
        if (Cesium.defined(removeListener)) {
            removeListener();
            removeListener = undefined;
        } else {
            removeListener = dataSource.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;

                    var numArr = [1000, 940, 880, 820, 760, 700, 640, 580, 520,
                        460, 400, 340, 280, 220, 160, 100, 90, 80, 70, 60, 50,
                        40, 30, 20, 10, 5];
                    for (var i = 0; i < numArr.length ; i++){
                        var num = clusteredEntities.length;
                        if (num >= 5 && num < 10){
                            cluster.billboard.image =
                                singleDigitPins[num - 5];
                            break;
                        }
                        if (num >= numArr[i]){
                            cluster.billboard.image = "image/cluster/" + numArr[i] + ".png";
                            break;
                        }
                    }
                }
            );
        }
    }

    function getPoints() {
        var points = [[116.400772400405,40.022863398376],[116.399490142569,40.022585773106],[116.399620317977,40.0242508926839],[116.40160598615,40.0221184739456],[116.399907509393,40.0219958104597],[116.400724697204,40.0239687520269],[116.402165778436,40.0253141887999],[116.400885324119,40.0256431969207],[116.40040751963,40.024956450967],[116.398288033439,40.0261770145041],[116.401376908282,40.0274393415336],[116.402243992462,40.0268989686679],[116.400432185104,40.0264341279424],[116.399332130386,40.0257719737298],[116.397341529053,40.0275015031923],[116.398428394004,40.0283268624636],[116.399612884373,40.027652650256],[116.399064651967,40.027268840315],[116.401560698066,40.028633488199],[116.402949453308,40.0279106439949],[116.401807486021,40.0283178356553],[116.400933060315,40.0279428547428],[116.397381743356,40.0289992287644],[116.396607998652,40.0298527589984],[116.396719495561,40.0306834959179],[116.398029369642,40.0299774554462],[116.39936630852,40.0298563251415],[116.399294031691,40.0292378621712],[116.400873768989,40.0295918140456],[116.39981920707,40.0303314960028],[116.402814076127,40.029749289733],[116.394258253907,40.0230302761666],[116.391073635903,40.0225486188029],[116.391179201673,40.0244142778637],[116.393544693982,40.0265042454842],[116.395170106576,40.0239855148762],[116.393876466029,40.0220057980925],[116.392504527582,40.0220710047706],[116.395830156983,40.0249933295208],[116.395064763015,40.0247506994991],[116.393977830848,40.0236921051002],[116.393983884851,40.0256515657056],[116.394336400267,40.0261706284784],[116.391301366176,40.0266509706958],[116.389666174611,40.0269686700454],[116.390026019912,40.0281294932117],[116.392051439111,40.0280744989287],[116.392429032563,40.0290398070639],[116.388052335933,40.0224716694574],[116.390839738908,40.0219934805278],[116.387933542126,40.0233971231645],[116.387418949502,40.0237065971108],[116.382224680514,40.0237985476077],[116.383705622861,40.0235085890954],[116.377950616072,40.0262813424447],[116.37849454974,40.0269094058983],[116.379464882233,40.0272460354942],[116.380118387606,40.027265474524],[116.38197034742,40.0271433887363],[116.379830969729,40.0251500479976],[116.379152532247,40.0238772807283],[116.377278233709,40.0232191985939],[116.375880690661,40.0224346283642],[116.374270452962,40.0234412586258],[116.375018462676,40.0235078737064],[116.374327976116,40.0229896440529],[116.378588579644,40.0277409354621],[116.379789068168,40.0283339611977],[116.378779159713,40.0285185026227],[116.377545037047,40.0286718065628],[116.377879994235,40.0279434143749],[116.377229903405,40.027238827383],[116.376257239493,40.0275438528444],[116.376233495781,40.0280740039641],[116.375076497783,40.0283357548031],[116.373706218705,40.0281424725942],[116.373332205888,40.0276266658644],[116.37254456176,40.0272404415654],[116.37298742225,40.0283979604654],[116.372230739691,40.0266045210516],[116.370506040214,40.0245409403481],[116.369846039519,40.0248213938519],[116.372406295854,40.0229434469846],[116.370378920407,40.0222893597982],[116.371326446303,40.0233920902496],[116.373859523182,40.0219393521651],[116.37552717555,40.0218843871685],[116.379450314825,40.0236209214398],[116.387133099974,40.0179493269059],[116.385390535823,40.0168406820463],[116.382912695439,40.0170402078613],[116.378345069201,40.0176793850226],[116.394413073296,40.0198357429504],[116.393361473076,40.0200154538807],[116.392132352826,40.0200526635846],[116.395185699596,40.0161837261362],[116.395089251504,40.0139210973406],[116.394668300461,40.0128540756885],[116.392399065437,40.0138979327171],[116.395074412521,40.0167102653286],[116.396812822862,40.0198136984554],[116.395286205083,40.0197011736659],[116.395245485926,40.0190748756006],[116.392684226866,40.0161672748928],[116.391569643307,40.0154881132644],[116.38552524657,40.0160440777048],[116.379331691787,40.0143299849411],[116.376412019935,40.0153556735508],[116.380682756497,40.0181849162989],[116.3822991315,40.0173763880172],[116.397402646461,40.0103988865935],[116.398142079584,40.0098943398078],[116.398977745937,40.0136432522308],[116.399298652816,40.0194735952786],[116.401333248972,40.0193669867064],[116.401240647304,40.0151977785183]];
        return points;
    }


</script>