如何利用Leaflet Routing Machine的coordinates属性每公里调用数据库获取POI？

核心思路 #

利用Leaflet Routing Machine返回的路线坐标数组，计算路线上每间隔1公里的采样点，再针对每个采样点查询数据库中5公里范围内的POI。

步骤实现 #

1. 获取路线坐标数组
   监听LRM的routesfound事件，在路线计算完成后提取route.coordinates，这是构成整条路线的所有途经点坐标集合。

2. 生成每公里采样点
   遍历坐标数组，用Leaflet的distanceTo方法计算相邻坐标点的距离，累计距离每达到1000米，就计算出该位置的精确坐标并保存为采样点。如果最后一段不足1公里，建议将终点也加入采样点，确保路线全程覆盖。

3. 查询周边POI
   对每个采样点发起数据库请求，传入采样点的经纬度和5公里半径参数，拿到POI数据后在地图上渲染或展示。

代码示例 #

// 假设已初始化Leaflet地图(map)和LRM路由控件(routingControl)
routingControl.on('routesfound', function(e) {
  const route = e.routes[0];
  const coords = route.coordinates;
  let totalDistance = 0;
  let lastPoint = coords[0];
  const kmPoints = [lastPoint]; // 起点作为第一个采样点

  // 遍历路线坐标，生成每公里采样点
  for (let i = 1; i < coords.length; i++) {
    const currentPoint = coords[i];
    const segmentDistance = L.latLng(lastPoint).distanceTo(L.latLng(currentPoint));
    totalDistance += segmentDistance;

    // 处理累计距离超过1公里的情况，拆分出多个采样点
    while (totalDistance >= 1000) {
      const ratio = (1000 - (totalDistance - segmentDistance)) / segmentDistance;
      const sampleLat = lastPoint.lat + (currentPoint.lat - lastPoint.lat) * ratio;
      const sampleLng = lastPoint.lng + (currentPoint.lng - lastPoint.lng) * ratio;
      kmPoints.push(L.latLng(sampleLat, sampleLng));
      totalDistance -= 1000;
    }

    lastPoint = currentPoint;
  }

  // 添加终点作为最后一个采样点（可选）
  kmPoints.push(coords[coords.length - 1]);

  // 逐个查询采样点周边POI
  kmPoints.forEach(point => {
    // 替换为你的数据库API接口
    fetch(`/api/get-pois?lat=${point.lat}&lng=${point.lng}&radius=5000`)
      .then(res => res.json())
      .then(pois => {
        // 在地图上渲染POI标记
        pois.forEach(poi => {
          L.marker([poi.latitude, poi.longitude])
            .addTo(map)
            .bindPopup(`<strong>${poi.name}</strong><br>${poi.address}`);
        });
      })
      .catch(err => console.error('POI查询失败:', err));
  });
});

注意事项 #

• 坐标格式：Leaflet使用[纬度, 经度]顺序，确保数据库查询参数的坐标顺序一致，避免位置偏差。
• 请求优化：若路线较长导致采样点过多，可将多个采样点的查询合并为批量请求，降低后端压力。
• 误差处理：路线坐标点的密度会影响采样点的精度，若原始坐标点间隔过大，采样点的位置可能存在微小偏差，可根据需求调整坐标点的密度。

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