当前位置：首页 > news >正文

uniapp中＜map＞地图怎么实现点位聚合？

news 来源：原创 2024/9/25 16:12:40

推荐学习文档
- golang应用级os框架，欢迎star
- golang应用级os框架使用案例，欢迎star
- 案例：基于golang开发的一款超有个性的旅游计划app经历
- golang实战大纲
- golang优秀开发常用开源库汇总
- 想学习更多golang知识，这里有免费的golang学习笔记专栏
- 想学习更多前端知识，这里有免费的前端专栏

确定聚合条件

定义聚合的距离阈值：根据你的需求确定一个合适的距离阈值，当两个标记点之间的距离小于这个阈值时，就可以进行聚合。
- 例如，可以设置距离阈值为 50 米、100 米等。
确定聚合的标记点数量上限：为了避免聚合后的标记点过于密集，可以设置一个标记点数量上限。当聚合后的标记点数量超过这个上限时，可以进一步进行聚合或者采用其他方式显示。
- 例如，可以设置标记点数量上限为 50、100 等。

数据处理

计算标记点之间的距离：
- 对于每个标记点，计算它与其他标记点之间的距离。可以使用经纬度坐标来计算两点之间的距离，常见的方法有 Haversine 公式等。
- 例如，可以使用以下代码计算两个经纬度坐标之间的距离：

     function getDistance(lat1, lon1, lat2, lon2) {const R = 6371; // 地球半径，单位为千米const dLat = ((lat2 - lat1) * Math.PI) / 180;const dLon = ((lon2 - lon1) * Math.PI) / 180;const a =Math.sin(dLat / 2) * Math.sin(dLat / 2) +Math.cos((lat1 * Math.PI) / 180) *Math.cos((lat2 * Math.PI) / 180) *Math.sin(dLon / 2) *Math.sin(dLon / 2);const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));return R * c;}

进行点位聚合：
- 根据距离阈值和标记点数量上限，对标记点进行聚合。可以使用循环或者其他算法来遍历标记点数组，将距离小于阈值的标记点合并为一个聚合点。
- 例如，可以使用以下代码进行点位聚合：

     function aggregateMarkers(markers, distanceThreshold, maxCount) {const aggregatedMarkers = [];while (markers.length > 0) {const marker = markers.shift();const cluster = [marker];for (let i = 0; i < markers.length; i++) {const distance = getDistance(marker.latitude,marker.longitude,markers[i].latitude,markers[i].longitude);if (distance < distanceThreshold) {cluster.push(markers.splice(i, 1)[0]);i--;}}if (cluster.length > maxCount) {// 如果聚合后的标记点数量超过上限，可以进一步进行聚合或者采用其他方式显示// 这里可以递归调用 aggregateMarkers 函数进行进一步聚合const subClusters = aggregateMarkers(cluster, distanceThreshold, maxCount);aggregatedMarkers.push(...subClusters);} else {// 计算聚合点的坐标，可以使用平均坐标或者其他方法const latSum = cluster.reduce((sum, m) => sum + m.latitude, 0);const lonSum = cluster.reduce((sum, m) => sum + m.longitude, 0);const averageLat = latSum / cluster.length;const averageLon = lonSum / cluster.length;aggregatedMarkers.push({latitude: averageLat,longitude: averageLon,count: cluster.length,});}}return aggregatedMarkers;}

在地图上显示聚合点

更新地图的标记点数据：
- 将聚合后的标记点数据更新到地图的markers数组中，以便在地图上显示聚合点。
- 例如，可以在页面的生命周期方法中调用aggregateMarkers函数，并将结果更新到markers数组中：

     export default {data() {return {markers: [],};},onLoad() {// 假设 markers 数组已经有初始的标记点数据this.markers = aggregateMarkers(this.markers, 50, 50);},};

自定义聚合点的图标和样式：
- 可以根据需要自定义聚合点的图标和样式，以区别于普通的标记点。可以使用 UniApp 的iconPath属性来设置标记点的图标，或者使用callout属性来显示聚合点的数量等信息。
- 例如，可以在markers数组中设置聚合点的图标和样式：

     {latitude: averageLat,longitude: averageLon,count: cluster.length,iconPath: 'path/to/aggregated_icon.png',callout: {content: `聚合点，包含 ${cluster.length} 个标记点`,display: 'ALWAYS',},}