Geojson 未显示在 map 上

Question

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

1. 这是我的工作效果的链接： https://neqts.github.io/map/
2. 这是源代码的链接： 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>
  );
};

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