如何分离数组中经纬度差值≤0.005度的相近事件元素

问题根源分析 #

你遇到的过滤后返回所有事件的问题，大概率是两个原因：

• 坐标类型未转换：接口返回的纬度/经度可能是字符串类型，直接做数值比较会导致计算错误
• 过滤逻辑错误：你尝试的“移除当前元素后对比”的逻辑，没有正确判断当前事件是否存在相近事件，可能错误地在filter中始终返回true

正确实现步骤 #

1. 坐标数据预处理

首先要确保经纬度是数字类型，避免字符串差值计算的错误：

// 工具函数：提取并转换事件的经纬度为数字
const getEventCoords = (event) => {
  const linkData = event.event_links?.data?.[0]?.attributes;
  if (!linkData) return null; // 处理无坐标的异常事件
  return {
    lat: Number(linkData.linkLabel),
    lng: Number(linkData.linkUrl)
  };
};

2. 修正相近事件过滤逻辑

我们需要判断每个事件是否存在至少一个其他事件，经纬度差值均≤0.005。这里不能直接在filter里移除当前元素后就返回true，而是要检查是否存在匹配项：

const events = [/* 你的事件数组 */];

// 筛选出所有存在相近事件的目标事件
const overlappingEvents = events.filter((currentEvent, currentIndex) => {
  const currentCoords = getEventCoords(currentEvent);
  if (!currentCoords) return false; // 跳过无坐标的事件

  // 遍历数组，排除当前元素，检查是否有相近事件
  return events.some((otherEvent, otherIndex) => {
    if (currentIndex === otherIndex) return false; // 跳过自身
    const otherCoords = getEventCoords(otherEvent);
    if (!otherCoords) return false;
    // 计算经纬度差值
    const latDiff = Math.abs(currentCoords.lat - otherCoords.lat);
    const lngDiff = Math.abs(currentCoords.lng - otherCoords.lng);
    // 判断是否满足相近条件
    return latDiff <= 0.005 && lngDiff <= 0.005;
  });
});

// 剩下的非重叠事件
const nonOverlappingEvents = events.filter(event => !overlappingEvents.includes(event));

3. 重叠事件的展示逻辑处理

拿到overlappingEvents后，可以将同一组相近事件聚合，方便悬停时展示所有链接：

// 聚合相近事件为分组
const groupOverlappingEvents = () => {
  const grouped = [];
  const processedIndices = new Set();

  events.forEach((currentEvent, currentIndex) => {
    if (processedIndices.has(currentIndex)) return;
    const currentCoords = getEventCoords(currentEvent);
    if (!currentCoords) return;

    // 找到所有和当前事件相近的事件
    const group = events.filter((otherEvent, otherIndex) => {
      if (processedIndices.has(otherIndex)) return false;
      const otherCoords = getEventCoords(otherEvent);
      if (!otherCoords) return false;
      const latDiff = Math.abs(currentCoords.lat - otherCoords.lat);
      const lngDiff = Math.abs(currentCoords.lng - otherCoords.lng);
      return latDiff <= 0.005 && lngDiff <= 0.005;
    });

    // 标记已处理的索引
    group.forEach(item => processedIndices.add(events.indexOf(item)));
    grouped.push(group);
  });

  return grouped;
};

// 使用分组结果：每个组内的事件都是相近的，可在地图标记悬停时展示组内所有链接
const overlappingGroups = groupOverlappingEvents();

原方案错误点解释 #

你之前的逻辑可能在filter中，没有正确使用some来判断是否存在匹配项，而是直接返回了true，导致所有事件都被保留。比如错误的写法可能是：

// 错误示例：无论是否有相近事件，都返回true
const wrongFilter = events.filter((currentEvent) => {
  const restEvents = events.filter(e => e !== currentEvent);
  restEvents.forEach(otherEvent => {
    // 对比逻辑
    if (/* 满足条件 */) return true;
  });
  return true; // 这里错误地默认返回true，导致所有事件被保留
});

内容的提问来源于stack exchange，提问作者Wayne