如何获取AmCharts5地图中当前视口内的点坐标

核心逻辑是监听地图的缩放/平移操作，在操作结束后获取当前视口的边界范围，再筛选出落在范围内的点位，以下是通用实现步骤和示例：

1. 监听地图交互事件 #

不同地图API的触发事件略有差异，选对应的事件监听平移/缩放结束的时机：

• Leaflet：监听moveend（平移结束）和zoomend（缩放结束）事件
• Google Maps：监听idle事件（平移/缩放完成后触发）
• 高德/百度地图：监听moveend事件

示例代码（以Leaflet为例）：

map.on('moveend zoomend', function() {
  // 在这里执行视口点位筛选逻辑
});

2. 获取当前视口的边界坐标 #

调用地图API提供的方法，获取视口的西南角和东北角经纬度：

• Leaflet：map.getBounds()，通过getSouthWest()和getNorthEast()获取边界点
• Google Maps：map.getBounds()，调用getSouthWest()、getNorthEast()获取边界
• 高德地图：map.getBounds()，直接取返回对象的southwest和northeast属性

示例代码（Leaflet）：

const bounds = map.getBounds();
const sw = bounds.getSouthWest(); // 西南角坐标
const ne = bounds.getNorthEast(); // 东北角坐标

3. 筛选视口内的点位 #

遍历你的点位数组，判断每个点的经纬度是否落在边界范围内：
判断规则：点的纬度在西南角纬度到东北角纬度之间，且经度在西南角经度到东北角经度之间

示例代码：

// 假设points是你的点位数组，每个元素包含lat（纬度）和lng（经度）
const visiblePoints = points.filter(point => {
  return point.lat >= sw.lat && point.lat <= ne.lat &&
         point.lng >= sw.lng && point.lng <= ne.lng;
});

性能优化建议 #

如果点位数量特别多（上万级），别每次都全量遍历：

• 提前把点位按经纬度分成网格块，每次只查询当前视口覆盖的网格里的点位
• 部分地图API（比如Mapbox）提供queryRenderedFeatures方法，可直接查询当前视口内渲染的图层要素，适合用API添加的点位图层

内容的提问来源于stack exchange，提问作者Anirudh Panchangam Ranganath