React-Leafletの地図画像の重ね合わせで経度-180~+180より外に地図画像が貼り付けられていないのが気になるので対応した

9949 ワード
leaflet React React-Leaflet leaflet テキストリンク

経度-180~+180より外に地図画像が貼り付けられていないのが気になる。

経度-180~+180より外に同じ地図画像を貼り付ければ良いだけ。

./sample-app/src/components/MyMap.js
import React, { useState } from "react";
import { Map, TileLayer, ImageOverlay } from "react-leaflet";
import "leaflet/dist/leaflet.css";
import "./styles.css";
import { Slider, Typography } from "@material-ui/core";

const MyMap = () => {
  const [d, setD] = useState(0);
  const [url, setUrl] = useState(
    "http://localhost:3000/gfs.t00z.pgrb2.1p00.f000.580.png"
  );
  const handleChange = (event, newD) => {
    setD(newD);
    if (newD == 0) {
      setUrl("http://localhost:3000/gfs.t00z.pgrb2.1p00.f000.580.png");
    } else {
      setUrl(
        "http://localhost:3000/gfs.t00z.pgrb2.1p00" +
          ".f" +
          ("000" + newD).slice(-3) +
          ".581.png"
      );
    }
  };

  return (
    <div>
      <Slider value={d} min={0} max={45} step={3} onChange={handleChange} />
      <Typography>{url}</Typography>
      <Map center={[0, 0]} zoom={2} worldCopyJump={true}>
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        <ImageOverlay
          url={url}
          bounds={[
            [-85, -180],
            [85, 180],
          ]}
          opacity={0.5}
        />
        <ImageOverlay
          url={url}
          bounds={[
            [-85, -180 - 360],
            [85, 180 - 360],
          ]}
          opacity={0.5}
        />
        <ImageOverlay
          url={url}
          bounds={[
            [-85, -180 + 360],
            [85, 180 + 360],
          ]}
          opacity={0.5}
        />
      </Map>
    </div>
  );
};

export default MyMap;