Geojson 未显示在地图上

Question

我想创建一个使用 geojson 从“countries.json”下载国家的 covid 地图，不幸的是这些国家没有显示在地图上

1. 下面是link对我作品的影响：https://neqts.github.io/map/
2. 这是源代码的link：https://github.com/neqts/map/tree/master
3. 它应该看起来像这样：https://datahub.io/core/geo-countries

求助...

import React from 'react';
import {Map , GeoJSON, MapContainer} from 'react-leaflet';
import "leaflet/dist/leaflet.css" 

const CovidMap = ({countries}) => {
    console.log(countries);
    return ( <MapContainer style={{height:"90vh"}} zoom={2} center={[20,100]}>
        <GeoJSON data={countries} /> 
    </MapContainer>
    );
}
 
export default CovidMap;

Answer 1

你快到了。只需导入国家 json，删除本地国家变量并将国家作为道具传递给您的 CovidMap 组件

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

const Covid19 = () => {
  return (
    <div>
      {countries.length === 0 ? (
        <Loading />
      ) : (
        <div>
          <CovidMap countries={countries} />
          <Legend />
        </div>
      )}
    </div>
  );
};

您应该会看到与此类似的内容：