异步函数获取的坐标数组无法在React-Leaflet的Polyline中显示

你的问题核心在于异步数据加载的状态管理以及Overpass API返回节点的顺序问题，以下是分步解决方法：

1. 修正React组件的异步状态管理 #

React组件需要通过状态管理异步加载的数据，确保数据就绪后再渲染Polyline。使用useState存储坐标，useEffect触发异步请求：

import { useState, useEffect } from 'react';
import { MapContainer, TileLayer, Polyline } from 'react-leaflet';

const limeOptions = { color: 'lime' };

export default function Map() {
  const [polylineCoords, setPolylineCoords] = useState([]);

  useEffect(() => {
    const fetchRelationData = async () => {
      const coords = await callRelation(10000);
      setPolylineCoords(coords);
    };
    fetchRelationData();
  }, []);

  return (
    <MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={true}>
      <TileLayer
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      {/* 确保有坐标数据时再渲染Polyline */}
      {polylineCoords.length > 0 && (
        <Polyline pathOptions={limeOptions} positions={polylineCoords} />
      )}
    </MapContainer>
  );
}

2. 修正Overpass API查询与坐标排序逻辑 #

原代码直接提取所有node会导致坐标无序，因为Relation包含的是Way，需要按Way的节点顺序拼接坐标：

async function callRelation(id) {
    const api = await fetch("https://www.overpass-api.de/api/interpreter", {
        method: "POST",
        headers: {
            Accept: "application/json",
            "Content-Type": "application/x-www-form-urlencoded", // 适配Overpass的Content-Type
        },
        // 调整查询语句，保留Way的节点结构和顺序
        body: `[out:json];rel(${id});out body;>;out skel qt;`,
    });

    const request = await api.json();

    // 先缓存所有节点，方便快速查找
    const nodeMap = new Map();
    request.elements.forEach(el => {
        if (el.type === "node") {
            nodeMap.set(el.id, [el.lat, el.lon]);
        }
    });

    const path = [];
    // 找到目标Relation
    const targetRel = request.elements.find(el => el.type === "rel");
    if (targetRel) {
        // 遍历Relation的Way成员，按顺序拼接坐标
        targetRel.members.forEach(member => {
            if (member.type === "way") {
                const way = request.elements.find(el => el.type === "way" && el.id === member.ref);
                if (way) {
                    // 按Way的节点顺序转换为坐标
                    const wayCoords = way.nodes.map(nodeId => nodeMap.get(nodeId));
                    path.push(...wayCoords);
                }
            }
        });
    }

    return path;
}

3. 自动适配地图视图（可选但重要） #

加载完成后让地图自动缩放至Polyline范围，避免坐标不在当前视图内导致看不到：

import { useMap } from 'react-leaflet';

// 自定义组件：自动适配地图边界
function FitBoundsControl({ coords }) {
  const map = useMap();

  useEffect(() => {
    if (coords.length > 0) {
      map.fitBounds(coords);
    }
  }, [map, coords]);

  return null;
}

// 在Map组件中添加该组件
export default function Map() {
  // ... 原有状态代码 ...

  return (
    <MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={true}>
      {/* ... TileLayer ... */}
      {polylineCoords.length > 0 && (
        <>
          <Polyline pathOptions={limeOptions} positions={polylineCoords} />
          <FitBoundsControl coords={polylineCoords} />
        </>
      )}
    </MapContainer>
  );
}

关键要点总结 #

• 必须通过React状态管理异步数据，确保组件响应数据更新
• Overpass API查询需要保留Way的节点结构，否则坐标会无序
• 适配地图视图范围，避免加载的坐标不在当前可视区域内

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