本文详解如何利用 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 匹配是更简洁鲁棒的选择。二者可结合使用——例如先按区域粗筛，再在区域内做投影精筛，兼顾性能与准确性。
