重庆网站优化公司微信营销软件排行榜

Turf.js是一个用于空间分析的js库，经常作用在地图上。目前项目上有一个需求，是使用的高德地图Loca的ZMarkerLayer图层，这个图层没用聚合功能，并且在地图上绘制的点位非常多。

Turf.js官方文档

https://turfjs.org/docs/api/clustersDbscan

官方示例效果就是项目上的效果，只是这样的标牌点位非常多，标牌看起来视觉上非常拥挤。

目前思路是想写一个方法，传入点位，再传入一个半径，算出n多个聚合集合，只取每个聚合集合中的一个集合，成立成一个新数组，渲染再地图上，这样就可以实现一个简单的聚合效果。

方法：

先计获取当前像素距离，然后利用turf.js中的clustersDbscan这个函数拿到一个聚合集合对象，然后取出每个聚合项的一项即可。

可以看到使用clustersDbscan函数返回原数据，只是原来的数据中每个都多了两个字段，cluster和dbscan字段，core代表了聚合，cluster表示索引，表示第几个聚合集合，说明还有其他数据中也有cluster:0，dbscan:'core'，然后我们只需要根据这两个字段再次遍历过滤即可。

根据cluster和dbscan手动拿到一个聚合后的集合对象。

function filterCollisionPoints(points, minDistance = 0.5) { // minDistance 默认500米let filteredPoints=turf.clustersDbscan(points, minDistance,{minPoints:2})console.log(filteredPoints,'filteredPoints')let clusterIndex = {}// 根据cluster和dbscan字段获得聚合集合对象filteredPoints.features.forEach((item)=>{if(item.properties.cluster!==undefined){if(clusterIndex[item.properties.cluster]){clusterIndex[item.properties.cluster].push(item)}else{clusterIndex[item.properties.cluster]=[item]}}else{if(clusterIndex['noise']){clusterIndex['noise'].push(item)}else{clusterIndex['noise']=[item]}}})// console.log(clusterIndex,'clusterIndex')// 手动过滤，拿到过滤后的聚合数据。let newClusterData=[]for(const key in clusterIndex){if(key==='noise'){clusterIndex[key].forEach((item,index)=>{newClusterData.push(item)})}else {newClusterData.push(clusterIndex[key][0])//我这里取得是第一项，也可以随机取其中一个}}console.log(newClusterData,'newClusterData')return newClusterData;
}

 调用如下，我用的是高德地图，getResolution获取当前地图分辨率，大概算出合适的半径，传入即可，然后就是监听地图的moveend事件，不断传入新的newData就可以算出当前聚合的数据，然后再地图上再渲染聚合的数据就好了。

let radius = map.getResolution()/10*1.5
const filterData= filterCollisionPoints({type: 'FeatureCollection',features: newData
},radius)

由于项目上地图上的点位数据比较敏感，暂时不做效果展示，按照上面的方法，可以实现一个简单的聚合效果。