如何解决我如何为反应传单获取 gall-peters 世界地图的 geoJson 文件
如何获得 gall-peter geojson 或如何制作
我已经使用 react Leaflet 使用 geojson 数据制作交互式地图,它运行良好,但现在我需要将地图投影更改为 gall-peters 地图,因此我需要特定地图投影的 geojson, 我怎么能得到那个。现在我正在使用墨卡托地图 geojson 数据
解决方法
首先,让我们暂时忘记 react 和 react-leaflet。让我们只关注您要使用传单做什么。您需要更改地图使用的投影/CRS。要使用不太常见的投影创建地图,您可以使用传单插件 Proj4Leaflet。您还需要投影定义。对于具有投影代码 "cea" (Cylindrical Equal Area) 的 gal-peters,您可以找到与 Proj4Leaflet here 一起使用的 Proj4 代码。将其放在一起以在该投影中创建地图:
import "proj4leaflet";
const resolutions = Array.from({ length: 15 })
.map((_,i) => (i + 200) ** 2)
.reverse();
// Define your projection
var crs = new L.Proj.CRS(
"SR-ORG:6838","+proj=cea +lon_0=0 +x_0=0 +y_0=0 +lat_ts=45 +ellps=WGS84 +datum=WGS84 +units=m +no_defs",{
resolutions,origin: [0,0]
}
);
var map = L.map("leafletMapid",{ crs,...otherOptions });
现在,将 GeoJSON 添加到地图将自动在该投影中。请注意 resolutions
变量,它需要进行一些微调才能正常工作。
Vanilla Leaflet Codesandbox
让它在 react-leaflet 中工作只是创建该投影并将其提供给 MapContainer
的问题:
const Map = (props) => {
const [data,setData] = useState();
useEffect(() => {
// fetch geojson on mount and save to state
fetch("geojsonurl")
.then((r) => r.json())
.then((r) => setData(r));
},[]);
return (
<MapContainer
{...mapOptions}
crs={crs} // defined in the same way as above
>
{data && <GeoJSON data={data} />}
</MapContainer>
);
};
Working react-leaflet codesandbox
如您所见,您在所需的投影中有一个带有 GeoJSON 的 react-leaflet 地图。
请注意,如果您想在其下方放置一个也遵循此投影的 tilelayer,那就是另外一回事了。您可以查看 Proj4Leaflet 上的文档,详细了解如何执行此操作。
我收到了一些 Invalid LatLng object: (NaN,-130.1624500907549)
错误,但它似乎没有影响地图。我 100% 确定这与 proj4leaflet 使用 resolutions
的方式有关,因此您必须使用它。对于那些沙箱,我在 iframe
上使用一些 css 禁用了错误覆盖。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。