如何判断给定经纬度在Highcharts当前地图视图中是否可见？

核心问题 #

使用Highcharts Map+Drilldown模块结合TopoJson时，无法正确过滤当前可见地图范围内的联系人：

• filter1无联系人返回
• filter2使用已弃用的坐标转换方法，返回错误数据
• filter3调用chart.mapView.getCenter()时触发“不是函数”的错误

正确实现方案 #

1. 过滤函数实现 #

利用Highcharts MapView的官方API获取视图边界，并完成经纬度到投影坐标的正确转换，判断联系人是否在当前视图内：

function filterContactsInView(chart, contacts) {
  const mapView = chart.mapView;
  if (!mapView) return [];

  // 获取当前视图的投影坐标边界
  const bounds = mapView.getBounds();
  const [minX, minY, maxX, maxY] = bounds.toArray();

  return contacts.filter(contact => {
    // 将联系人经纬度（WGS84）转换为当前地图的投影坐标
    const projectedPoint = mapView.projection.latLonToPoint({
      lat: contact.lat,
      lon: contact.lon
    });

    // 判断点是否在视图边界内
    return projectedPoint.x >= minX && projectedPoint.x <= maxX &&
           projectedPoint.y >= minY && projectedPoint.y <= maxY;
  });
}

2. 绑定视图切换事件 #

在钻取/钻回事件中触发过滤，更新联系人系列数据：

Highcharts.mapChart('container', {
  chart: {
    events: {
      // 钻取到子级地图时执行过滤
      drilldown: function() {
        const filtered = filterContactsInView(this, contactsDataset);
        const contactSeries = this.series.find(s => s.name === 'Contacts');
        contactSeries.setData(filtered.map(c => ({
          lat: c.lat,
          lon: c.lon,
          name: c.name
        })));
      },
      // 钻回父级地图时恢复全部联系人
      drillup: function() {
        const contactSeries = this.series.find(s => s.name === 'Contacts');
        contactSeries.setData(contactsDataset.map(c => ({
          lat: c.lat,
          lon: c.lon,
          name: c.name
        })));
      }
    }
  },
  // 地图、钻取、联系人系列的其他配置...
});

错误原因解析 #

• filter1：坐标转换或边界判断逻辑错误，导致无匹配联系人
• filter2：使用已弃用的lonLatToProjectedUnits方法，该方法已被mapView.projection.latLonToPoint替代，旧方法返回的坐标格式与当前视图边界不兼容
• filter3：chart.mapView.getCenter()报错，大概率是调用时机错误（如图表初始化未完成）或未正确获取当前图表实例的mapView属性，改用mapView.getBounds()可直接获取视图边界，无需依赖中心点计算

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