点聚合是我们常用的点抽稀方式,有时不会满足于只是展示出点的展示,希望能够得到聚合点集的大致范围。
本文中使用的时前端Supercluster.js和turf.js库,分别计算点聚合和点的凸包。
Supercluster Api如下图所示
先用Superclusterr构建点聚合索引,添加数据,设置像素半径和最大层级
const index = new Supercluster({
radius: 40,
maxZoom: 20
});
index.load(data);
接下来根据级别,获取当前级别和范围下,点聚簇信息
//计算范围和层级,获取聚合点信息
const extent=map.getExtent()
const xmin=extent.xmin
const xmax=extent.xmax
const ymin=extent.ymin
const ymax=extent.ymax
const zoom= parseInt(map.getZoom())
const data=index.getClusters([xmin,ymin,xmax, ymax ], zoom);
遍历点聚簇信息,得到聚簇id和聚簇数量
for(let i=0;i<data.length;i++){
let each=data[i]
let properties=each.properties
let cluster=properties.cluster
let cluster_id=properties.cluster_id
let point_count=properties.point_count
if(cluster&&point_count>2){
let data=index.getLeaves(cluster_id,10000,0)
var points=turf.featureCollection(data)
var convex = turf.convex(points);
if(convexncave){
maptalks.GeoJSON.toGeometry(convex ).addTo(citylayer)
}
}
}
参考资料:
http://turfjs.org/docs/#convex
https://github.com/mapbox/supercluster