React-Leaflet의 지도 화상의 중첩으로 경도-180~+180보다 밖에 지도 화상이 붙여지지 않은 것이 신경이 쓰이므로 대응했다

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;