业务中常需限定热力图仅展示指定圆心+半径范围内的数据，本文聚焦核心逻辑，拆解如何精准过滤圆形区域外的热力点。
核心需求
仅展示以某经纬度为圆心、指定半径（米）范围内的热力数据，无圆心/半径时展示全量数据。
核心实现逻辑（过滤方法）
/**
* 过滤圆圈外的热力数据
* @param data 原始热力数据（数组，每项含longitude/latitude）
* @param center 圆心坐标 { lng: 经度, lat: 纬度 }
* @param radius 圆圈半径（单位：米）
* @returns 仅保留圆圈内的热力数据
*/
const filterHeatData = (data, center, radius) => {
// 无圆心/半径时返回全量数据
if (!center || !center.lng || !center.lat || !radius) {
return data;
}
return data.filter(item => {
// 过滤无经纬度的无效数据
if (!item.longitude || !item.latitude) return false;
// 核心：高德API计算两点间实际距离（米）
const pointDistance = new AMap.LngLat(center.lng, center.lat)
.distance(new AMap.LngLat(item.longitude, item.latitude));
// 仅保留距离 ≤ 半径的点
return pointDistance <= radius;
});
};
关键说明
-
距离计算核心：借助高德地图
AMap.LngLat.distance()方法，无需手动换算经纬度，直接得到两点间地面距离（米），精准判断点是否在圆内； -
空值校验：提前过滤无经纬度的无效数据，同时兼容“无圆心/半径时展示全量数据”的场景；
-
使用方式：拿到原始热力数据后，传入圆心和半径即可过滤：
// 示例：传入圆心、半径，过滤数据 const centerPoint = { lng: 116.403963, lat: 39.915119 }; // 圆心 const radius = 1000; // 半径1000米 const filteredData = filterHeatData(originalHeatData, centerPoint, radius); // 过滤后的数据可直接传给热力图渲染 heatMap.setDataSet({ data: filteredData, max: 100 });
总结
该方法核心是利用高德内置的距离计算API，极简实现“点在圆内”的判断，无需手动处理经纬度换算，代码轻量化且易复用，可直接嵌入各类热力图业务场景。
