前端绘制聚合的区域范围

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

    本文中使用的时前端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

上一篇:LeetCode469 - Convex Polygon - Medium (Python)


下一篇:bzoj4445&&dtoj#2348. 小凸想跑步(convex)