这是示例。在MapsComp：

• 声明一个状态变量来跟踪标记

• 当 comp 安装时获取标记并将它们保存到变量中

• TileLayer当标记变量有数据时，循环下面的标记以将它们可视化

   class MapsComp extends React.Component {
     state = { markers: [] };
  
     componentDidMount() {
       fetch("https://api-adresse.data.gouv.fr/search/?q=paris&type=street")
         .then((response) => response.json())
         .then((response) => {
           console.log(response);
           this.setState({ markers: response.features });
         });
     }
   ...
   here loop overs markers data to visualzie them
   {this.state.markers.length > 0 &&
           this.state.markers.map((marker) => (
             <Marker
               position={[
                 marker.geometry.coordinates[1],
                 marker.geometry.coordinates[0]
               ]}
               icon={icon}
             >
               <Popup>{marker.properties.label}</Popup>
             </Marker>
           ))}
  }
  

请注意，这是一个仅用于演示示例的免费 api。

编辑

我设法重现了您的代码。您不需要服务来获取 json，因为您在本地拥有它。只需导入它。

import json from "../data/data.json";

然后将它分配给状态变量（甚至你可以避免这种情况并直接使用它，甚至更好）

this.state = {
   geoData: json.Sheet1,
};

内部renderMarkers方法你有一个字典所以你需要它的值所以使用 Object.values 来提取坐标

renderMarkers = () => {
    let latLong: Array<Array<any>> = [];
    Object.values(this.state.geoData).map((val, index) => {
      let dt1: Array<any> = [];
      dt1.push(Number(val.lat), Number(val.lng));
      latLong.push(dt1);
    });
    return latLong;
  };

最后但并非最不重要的一点是将点可视化为圆形，而不是作为标记在地图容器上使用preferCanvas标志，因为您有26000 个 标记。Leaflet 无法处理如此多的标记，因此将它们渲染为圆形标记。您仍然会看到性能不是最好的，但肯定比使用标记而不是画布更好。

我不会深入探讨这种行为的原因，因为它超出了本问题的范围，因为您首先没有提到您有如此多的分数。

 <MapContainer
          ...
          preferCanvas
  >
...
     {this.renderMarkers().length > 0 &&
                this.renderMarkers().map((value, index) => {
                  return (
                    <CircleMarker center={[value[1], value[0]]} key={index}>
                      <Popup>{index} Sydney, Hi!!!</Popup>
                    </CircleMarker>
                  );
     })}
  

这是渲染的结果：