前端绘制聚合的区域范围

  点聚合是我们常用的点抽稀方式，有时不会满足于只是展示出点的展示，希望能够得到聚合点集的大致范围。

  本文中使用的前端Supercluster.js和turf.js库，分别计算点聚合和点的凸包。

  Supercluster Api如下图所示

image
  先用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);

image

  遍历点聚簇信息，得到聚簇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)
            }
        }
}

image
image

参考资料：

http://turfjs.org/docs/#convex

https://github.com/mapbox/supercluster