以前的老项目还用着ArcGIS API for JavaScript 3.x,最近有数据更新要有几十万的数据要展示。
仔细研究一番,发现ArcGIS API for JavaScript 3.41文档中写着仅限数据中的五万条,多了也不会聚合。
看着官方不提供解决方案,我决定找找开源的方案,找到一个ArcGIS API for JavaScript 4.x与Supercluser结合的clusterlayer,不过不是想要的结果,于是我自己开发一个。
先基于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