如何在 Highcharts 地图中精准判断经纬度坐标是否处于当前视图范围内

本文详解如何利用 highcharts MapView 的 lonLatToProjectedUnits 方法，结合绘图区域边界，准确筛选出当前地图可视范围内的地理点（如联系人位置），避免钻取后显示无关区域数据。

本文详解如何利用 highcharts mapview 的 `lonlattoprojectedunits` 方法，结合绘图区域边界，准确筛选出当前地图可视范围内的地理点（如联系人位置），避免钻取后显示无关区域数据。

在 Highcharts 地图（尤其是启用 Drilldown 和 TopoJSON 的场景）中，仅靠 lat/lon 坐标本身无法直接判断某点是否“可见”——因为地图投影会将球面坐标转换为平面像素空间，而可视区域（viewable area）由当前 mapView 的投影范围与图表 plotArea 的像素边界共同决定。官方已弃用 fromLatLonToPoint，推荐使用 chart.mapView.lonLatToProjectedUnits({ lon, lat }) 获取投影后的平面坐标（单位：SVG 用户坐标系），再与 plotLeft/plotTop/plotWidth/plotHeight 构成的矩形区域进行像素级包含判断。

但需特别注意：lonLatToProjectedUnits 返回的坐标是相对于整个 SVG 画布的绝对投影坐标，而非相对于 plotArea 的偏移坐标。因此，正确做法是先将经纬度转为投影坐标，再将其映射到 plotArea 的局部坐标系中进行范围判定：

const filterVisibleContacts = function(chart) {   if (!chart.mapView || !chart.plotWidth || !chart.plotHeight) {     return [];   }    const { plotLeft, plotTop, plotWidth, plotHeight } = chart;   const inRange = [];    contacts.forEach(contact => {     // ✅ 正确：使用 lonLatToProjectedUnits（接受 { lon, lat } 对象）     const projected = chart.mapView.lonLatToProjectedUnits({       lon: contact.lon,       lat: contact.lat     });      // 投影坐标需与 plotArea 的世界坐标对齐（Highcharts 内部已处理坐标系一致性）     const x = projected.x;     const y = projected.y;      // 判定是否落在 plotArea 矩形内（注意：y 轴向下为正，Highcharts 中 plotTop 是顶部像素位置）     const inPlotX = x >= plotLeft && x <= plotLeft + plotWidth;     const inPlotY = y >= plotTop && y <= plotTop + plotHeight;      if (inPlotX && inPlotY) {       inRange.push(contact);     }   });    return inRange; };

⚠️ 关键注意事项：

• 输入格式必须为 { lon, lat } 对象，不可传入 [lon, lat] 数组或分离参数，否则返回 undefined；
• mapView 在地图初始化完成且加载拓扑数据后才可用，建议在 chart.events.load 或 drilldown 回调中执行过滤；
• 若使用 hc-recommended-mapview（如 topology.objects.default[‘hc-recommended-mapview’]），确保该 mapview 已被 chart.update({ mapView: … }) 显式设置或由 Highcharts 自动识别；
• plotArea 边界（plotLeft/plotTop等）反映的是当前缩放/平移后的可视区域，无需手动计算缩放系数；
• 避免使用基于经纬度距离的粗略估算（如 filter3），因地图投影非线性（尤其高纬度），会导致严重偏差。

此外，若业务逻辑天然按行政区划组织（如每个联系人归属明确子区域），可采用更高效、语义更清晰的替代方案：按 subregion 字段匹配系列名称，实现“区域级可见性控制”。例如：

const addContactSeriesByRegion = function(chart) {   // 假设 contacts 包含 subregion 字段（如 'US-TX'），且地图中已有对应命名系列   const visibleSubregions = new Set(     chart.series.filter(s => s.visible && s.name).map(s => s.name)   );    const data = contacts.filter(c => visibleSubregions.has(c.subregion));    chart.addSeries({     name: 'contacts',     type: 'mappoint',     data,     dataLabels: { enabled: true, format: '{point.name}' }   }); };

该方法不依赖坐标转换，性能更高，适用于钻取层级明确、数据结构规整的场景（Demo 参考）。

综上，推荐优先使用 lonLatToProjectedUnits + plotArea 边界判定 实现像素级精确过滤；若架构支持区域粒度控制，则 subregion 匹配是更简洁鲁棒的选择。二者可结合使用——例如先按区域粗筛，再在区域内做投影精筛，兼顾性能与准确性。