研究背景

    以前的老项目还用着ArcGIS API for JavaScript 3.x，最近有数据更新要有几十万的数据要展示。
    仔细研究一番，发现ArcGIS API for JavaScript 3.41文档中写着仅限数据中的五万条，多了也不会聚合。

5b602ab0ed2140638e41f821015e0809_tplv-k3u1fbpfcp-watermark.png

    看着官方不提供解决方案，我决定找找开源的方案，找到一个ArcGIS API for JavaScript 4.x与Supercluser结合的clusterlayer，不过不是想要的结果，于是我自己开发一个。

supercluster介绍

    supercluster是一个高性能的点聚合库,可以用在浏览器端和Node服务端

处理过程

    先基于supercluster创建数据聚合，一百万数据处理完0-9级聚合大概四秒钟。接着监听地图范围变化，这样就可以
使用FeatureLayer显示

//创建要素图层
var featureCollection = {
    "layerDefinition": null,
    "featureSet": {
        "features": [],
        "geometryType": "esriGeometryPoint"
    }
};
featureCollection.layerDefinition = {
    "geometryType": "esriGeometryPoint",
    "objectIdField": "CID",
    "drawingInfo": {
        "renderer": {
            "type": "simple",
            "symbol": {
                "color": [79,218,79,255],
                "type": "esriSMS",
                "size":30,
                "style": "esriSMSCircle",
                "outline": {
                    "color": [79,218,79,255],
                    "width": 1,
                    "type": "esriSLS",
                    "style": "esriSLSSolid"
                }
            }
        }
    },
    "fields": [{
        "name": "CID",
        "alias": "CID",
        "type": "esriFieldTypeOID"
    },
        {
            "name": "point_count",
            "alias": "point_count",
            "type": "esriFieldTypeInteger"
        },
        {
        "name": "point_count",
        "alias": "point_count",
        "type": "esriFieldTypeInteger"
    },
        {
            "name": "cluster_id",
            "alias": "cluster_id",
            "type": "esriFieldTypeInteger"
        },
        {
        "name": "point_count_abbreviated",
        "alias": "point_count_abbreviated",
        "type": "esriFieldTypeString"
    }
    ]
};

var popupTemplate = new PopupTemplate({
    title: "{point_count}",
    description: "{point_count_abbreviated}"
});

//create a feature layer based on the feature collection
let monumentLayer = new FeatureLayer(featureCollection, {
    id: 'flickrLayer',
    infoTemplate: popupTemplate
});

worker中请求数据并创建聚合，根据页面信息地图经纬度范围还有级别传递数据

index = new Supercluster({
    log: true,
    radius: 60,
    extent: 256,
    maxZoom: 9,
    minZoom: 0,
    //reduce: (accumulated, props) => { accumulated.sum += props.sum; },
    // properties to use for individual points when running the reducer
    map(props) {
        props.point_count = 1;
        props.point_count_abbreviated = '1';
        return props;
    },
}).load(data.features);


self.onmessage = function (e) {
    if (e.data.getClusterExpansionZoom) {
        postMessage({
            expansionZoom: index.getClusterExpansionZoom(e.data.getClusterExpansionZoom),
            center: e.data.center
        });
    } else if (e.data.bbox) {
        postMessage(index.getClusters(e.data.bbox, e.data.zoom));
    } else if (e.data.tile) {
        postMessage(index.getTile(e.data.tile[0], e.data.tile[1], e.data.tile[2]));
    }
};

709a09e3e47445fea0cfdd1a44fb06cc_tplv-k3u1fbpfcp-watermark.png

完成效果

051d89515ad9492ca5749bf1a74cc41d_tplv-k3u1fbpfcp-watermark.gif