Geojson 未显示在地图上答案

【问题标题】：Geojson not displayed on the mapGeojson 未显示在地图上
【发布时间】：2021-04-20 10:07:22
【问题描述】：

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

这里是我的工作效果的链接：https://neqts.github.io/map/
这里是源代码的链接：https://github.com/neqts/map/tree/master
应该是这样的：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;

【问题讨论】：

标签： javascript json reactjs leaflet react-leaflet

【解决方案1】：

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

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

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

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

【讨论】：