研究背景
以前的老项目还用着ArcGIS API for JavaScript 3.x,最近有数据更新要有几十万的数据要展示。
仔细研究一番,发现ArcGIS API for JavaScript 3.41文档中写着仅限数据中的五万条,多了也不会聚合。
看着官方不提供解决方案,我决定找找开源的方案,找到一个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]));
}
};
完成效果
参考资料:
https://developers.arcgis.com/javascript/3/jsapi/featurelayer-amd.html#setfeaturereduction
https://github.com/mapbox/supercluster