时间戳

首页 > 解决方案 > 我如何获得用于反应传单的 Gall-peters 世界地图的 geoJson 文件

reactjs - 我如何获得用于反应传单的 Gall-peters 世界地图的 geoJson 文件

问题描述

如何获得 Gall-peter geojson 或如何制作

我已经使用 react 传单使用 geojson 数据制作交互式地图，它运行良好，但现在我需要将地图投影更改为 Gall-peters 地图，所以我需要特定地图投影的 geojson，我怎么能得到它。现在我正在使用墨卡托地图geojson数据

标签： reactjsdictionarygeojsonreact-leafletworld-map

解决方案

首先，让我们现在忘记 react 和 react-leaflet。让我们只关注您要使用传单做什么。您需要更改地图使用的投影/CRS。要使用不太常见的投影创建地图，您可以使用传单插件Proj4Leaflet。您还需要投影定义。对于具有投影代码“cea”（圆柱等面积）的 Gall-peters，您可以在此处找到与 Proj4Leaflet 一起使用的 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变量，它需要一些微调才能使事情正常工作。

香草传单密码箱

让它在 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>
  );
};

工作反应传单代码和框

如您所见，您在所需的投影中有一个带有 GeoJSON 的 react-leaflet 地图。

请注意，如果您想在其下方放置一个也遵循此投影的切片图层，那就是另一回事了。您可以查看Proj4Leaflet上的文档以了解有关如何执行此操作的更多信息。

我遇到了一些Invalid LatLng object: (NaN, -130.1624500907549)错误，尽管它似乎没有影响地图。我 100% 确定它与 proj4leaflet 使用resolutions. 对于那些沙箱，我使用一些 css on 禁用了错误覆盖iframe。

推荐阅读