React/leaflet으로 GMT로 작성한 NOAA/GFS 이미지의 중첩②
React 프로젝트 만들기
$ npx create-react-app sample-app
$ cd sample-app
$ npm install leaflet
$ npm start
NOAA/GFS 다운로드 및 이미지 만들기
leaflet 기본 projection는 EPSG:3857.
$ wget -r https://www.ncei.noaa.gov/data/global-forecast-system/access/grid-003-1.0-degree/forecast/202012/20201217/gfs_3_20201217_0000_087.grb2
$ wgrib2 ./www.ncei.noaa.gov/data/global-forecast-system/access/grid-003-1.0-degree/forecast/202012/20201217/gfs_3_20201217_0000_087.grb2 -d 435 -netcdf tmp.nc
$ gmt grd2cpt tmp.nc > tmp.cpt
$ gmt grdimage -JEPSG:3857 -R-180/180/-80/80 tmp.nc -Ctmp.cpt -K > tmp.eps
$ gmt pscoast -J -R -W -Df -O >> tmp.eps
$ gmt psconvert tmp.eps -TG -A -P -D/home/yono2844/Workspace/sample-app/src/components/ -Fmap.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:
'© <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;
Reference
이 문제에 관하여(React/leaflet으로 GMT로 작성한 NOAA/GFS 이미지의 중첩②), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/yono2844/items/3e0be6ff2942f04c7c6b텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)