如何使用反应传单只显示一个国家？

Question

我在我的一个项目中使用了 react-leaflet，我想只显示一个国家并删除其余的或隐藏。

有人已经解决了这个问题，但不幸的是它不适用于 React。你知道如何把它变成反应代码或在反应项目中使用它吗？

LeafletJs only show one country

Answer 1

安装库并导入：

import "leaflet-boundary-canvas";

检索地图实例后创建一个 useEffect，它将获取示例的 geojson，在依赖项数组中具有地图。复制粘贴代码。这里唯一的区别是你必须使用 L.TileLayer.boundaryCanvas 而不是 new L.TileLayer.BoundaryCanvas 来初始化插件

...
const [map, setMap] = useState(null);

useEffect(() => {
    if (!map) return;

    const fetchGeoJSON = async () => {
      const response = await fetch(
        "https://cdn.rawgit.com/johan/world.geo.json/34c96bba/countries/GBR.geo.json"
      );
      const geoJSON = await response.json();
      const osm = L.TileLayer.boundaryCanvas(
        "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
        {
          boundary: geoJSON,
          attribution:
            '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors, UK shape <a href="https://github.com/johan/world.geo.json">johan/word.geo.json</a>'
        }
      );
      map.addLayer(osm);
      const ukLayer = L.geoJSON(geoJSON);
      map.fitBounds(ukLayer.getBounds());
    };

    fetchGeoJSON();
  }, [map]);

return (
    <MapContainer
      ...
      whenCreated={setMap}
    />
  );

Demo

如何使用反应传单只显示一个国家？

How to show only one country using react leaflet?

leaflet

reactjs

react-leaflet