标签:count name point type JavaScript ArcGIS API props data
以前的老项目还用着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
标签:count,name,point,type,JavaScript,ArcGIS,API,props,data 来源: https://www.cnblogs.com/polong/p/16437077.html
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。