소개

React-Leaflet에서 지도 보기에서지도를 표시하고 마커를 놓았습니다. 이 기사에서는 OpenWeatherMap의 API 인 Weather maps 1.0을 사용하여 기상 데이터를지도에 겹칩니다. React Leaflet, Weather maps 1.0을 참고했다. 또한 leaflet과 react-leaflet은 설치되었다고 가정합니다. 설치하지 않은 경우 React-Leaflet에서 지도 보기를 참조하십시오.

API 키 가져오기

OpenWeatherMap 의 API 로부터 기상 해상 데이터를 취득하려면 , API 키를 취득할 필요가 있다. Create New Account에서 계정을 만들면 키를 얻을 수 있습니다. 몇 가지 제한은 있지만 무료 버전으로 너무 충분한 기능을 사용할 수 있다.

구성 요소 만들기

지도를 표시하고 기상 데이터를 겹치는 구성 요소의 코드는 다음과 같습니다. 이 컴포넌트에서는 현재의 구름, 강수량, 해수면 기압, 풍속, 기온의 5개의 기상 데이터를 겹칠 수 있다.

Weather.js

import React from "react";
import "leaflet/dist/leaflet.css";
import { LayersControl, MapContainer, TileLayer, WMSTileLayer } from "react-leaflet";

const APIKey = "取得した API キーを書く";

const SimpleLeaflet = () => {
  const position = [35.685175, 139.7528];
  return (
    <div>
      <MapContainer center={position} zoom={13} style={{ height: "100vh" }} >
        <TileLayer
          attribution='&amp;copy <a href="http://osm.org/copyright";>OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        <LayersControl position="topright" >
          <LayersControl.Overlay name="Cloud" checked>
            <WMSTileLayer url={`https://tile.openweathermap.org/map/clouds_new/{z}/{x}/{y}.png?appid=${APIKey}`} />
          </LayersControl.Overlay>
          <LayersControl.Overlay name="Precipitation">
            <WMSTileLayer url={`https://tile.openweathermap.org/map/precipitation_new/{z}/{x}/{y}.png?appid=${APIKey}`} />
          </LayersControl.Overlay>
          <LayersControl.Overlay name="Sea Level Pressure">
            <WMSTileLayer url={`https://tile.openweathermap.org/map/pressure_new/{z}/{x}/{y}.png?appid=${APIKey}`} />
          </LayersControl.Overlay>
          <LayersControl.Overlay name="Wind Speed">
            <WMSTileLayer url={`https://tile.openweathermap.org/map/wind_new/{z}/{x}/{y}.png?appid=${APIKey}`} />
          </LayersControl.Overlay>
          <LayersControl.Overlay name="Temperature">
            <WMSTileLayer url={`https://tile.openweathermap.org/map/temp_new/{z}/{x}/{y}.png?appid=${APIKey}`} />
          </LayersControl.Overlay>
        </LayersControl>
      </MapContainer>
    </div>
  )
}

export default SimpleLeaflet;

상기 컴포넌트를 읽고, 개발용 서버에서 실행한 결과를 이하에 나타낸다.



LayersControl을 사용하면 위의 GIF와 같이 어떤 레이어를 겹칠지 선택할 수 있습니다. 또 LayersControl.Overlay 태그내에 'checked' 라고 추기하는 것으로, 디폴트로 선택 상태로 할 수 있다. Layers control | React Leaflet에는 Layer의 그룹 분할 등 세세한 편집의 예도 실려 있다.

결론

이번에는 Weather maps 1.0을 시도했다. 현재는 Weather maps 2.0 가 론칭하고 있어 거기에서는 예보 데이터나 과거의 데이터도 취득할 수 있다고 하는 것이었지만, 시험한 결과가 잘 반영되지 않았으므로, 잘 취급할 수 있는 사람이 있으면 가르쳐 주세요.

(2021/5/7 추가)
직접 OpenWeatherMap에 문의했는데, 무료판에서는 대응하고 있지 않다는 것. Detailed price - OpenWeatherMap에 확실히 이렇게 써 있다. 시도할 수 없어서 유감.