React/leafletでGMTで作成した地図画像を貼り付け

8164 ワード
GMT leaflet React GMT テキストリンク

Reactプロジェクトの作成

$ npx create-react-app sample-app
$ cd sample-app
$ npm install leaflet
$ npm start

地図画像の作成

leafletのデフォルトのprojectionはEPSG:3857。

$ gmt pscoast -JEPSG:3857 -R-180/180/-80/80 -G0/255/0 -S0/0/255 > tmp.eps
$ gmt psconvert tmp.eps -TG -A -P -D/home/yono2844/Workspace/sample-app/src/components/ -Fm
ap.png

画像の貼り付け

/sample-app/src/components/Map.js
import React, { useEffect } from "react";
import L from "leaflet";
import "leaflet/dist/leaflet.css";
import icon from "leaflet/dist/images/marker-icon.png";
import shadow from "leaflet/dist/images/marker-shadow.png";
import img from "./map.png";

L.Marker.prototype.options.icon = L.icon({
  iconUrl: icon,
  shadowUrl: shadow,
});

const imageUrl = img;
const imageBounds = [
  [-80, -180], // lowerLeft[lat, lng]
  [80, 180], // upperRight[lat, lng]
];

const Map = () => {
  useEffect(() => {
    // https://leafletjs.com/index.html
    var map = L.map("map").setView([0, 0], 2);
    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
      attribution:
        '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
    }).addTo(map);

    // https://leafletjs.com/reference0.7.1.html#imageoverlay
    L.imageOverlay(imageUrl, imageBounds, { opacity: 0.4 }).addTo(map);
  }, []);
  return <div id="map" style={{ height: "100vh" }}></div>;
};

export default Map;
js/sample-app/src/components/App.js
import React from "react";
import Map from "./components/Map";

const App = () => {
  return (
    <div>
      <Map />
    </div>
  );
};

export default App;