如何解决Geojson 未显示在地图上
我想创建一个covid地图,它使用geojson从“countries.json”下载国家,不幸的是这些国家没有显示在地图上
- 这是我的工作效果的链接: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;
解决方法
你快到了。只需导入国家 json,删除本地国家变量并将国家作为道具传递给您的 CovidMap
组件
import countries from "../data/countries.json";
const Covid19 = () => {
return (
<div>
{countries.length === 0 ? (
<Loading />
) : (
<div>
<CovidMap countries={countries} />
<Legend />
</div>
)}
</div>
);
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。