前端绘制聚合的区域范围

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

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

  Supercluster Api如下图所示

前端绘制聚合的区域范围_第1张图片
  先用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);

前端绘制聚合的区域范围_第2张图片
  遍历点聚簇信息,得到聚簇id和聚簇数量

for(let i=0;i2){
           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

你可能感兴趣的:(前端绘制聚合的区域范围)