Windy JavaScript API로 바람과 파도 애니메이션을 지도에 표시
개요
Windy 정보
Windy는 지도에 바람과 파도의 애니메이션을 보여주는 웹 사이트입니다. 이전에는 Windyty라는 이름이었습니다.
공식 사이트의 Windy: Wind map & weather forecast 에서는 충분한 기능을 갖춘 지도를 볼 수 있다. 스스로 커스터마이즈 등을 할 필요가 없으면 이쪽을 보는 것만으로 충분할지도 모른다.
Windy JavaScript API 및 Leaflet
Windy JavaScript API는 Leaflet 1.4.x를 기반으로 한 라이브러리입니다. Leaflet 기능에 Windy에서 사용되는 것과 같은지도 표시 기능을 추가하고 있습니다.
Leaflet은 웹 페이지에 지도를 표시할 수 있는 JavaScript 라이브러리입니다.
Windy API - Docs
Windy JavaScript API is a simple-to-use library based on Leaflet 1.4.x. It allows you to use everything Leaflet or JavaScript offers, along with the Windy map visualizations we use at Windy.com.
Leaflet - a JavaScript library for interactive maps
Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps.
Windy JavaScript API를 사용한 샘플
Windy JavaScript API를 사용하여 바람의 움직임을 알 수 있는 애니메이션 지도를 웹 페이지에 표시해 보았다.
바람의 강도에 따라 배경색을 구분할 수 있습니다.
배경에는 비의 강도 등을 표시하는 것도 가능.
파도의 움직임의 애니메이션을 표시하는 것도 가능.
페이지 하단의 슬라이더를 움직이면 이전 시간의 예측 정보를 볼 수도 있다.
Windy API Key 만들기
샘플 코드
샘플의 소스 코드를 이하에 나타낸다.
이것만으로, 애니메이션이나 배경을 전환하기 위한 컨트롤도 오른쪽 상단에 표시된다.
JavaScript (script.js)
const options = {
// Required: Your API key
key: 'YOUR_API_KEY',
// Optional: Initial state of the map
// 名古屋駅を中心に表示
lat: 35.170736,
lon: 136.882104,
zoom: 6,
};
// Initialize Windy API
windyInit(options, windyAPI => {
const { map } = windyAPI;
// .map is instance of Leaflet map
});
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, shrink-to-fit=no"
/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://api4.windy.com/assets/libBoot.js"></script>
<style>
html, body {
width: 100%; height: 100%; margin: 0; padding: 0;
}
#windy {
width: 100%; height: 100%; margin: 0; padding: 0;
}
</style>
</head>
<body>
<div id="windy"></div>
<script src="script.js"></script>
</body>
</html>
몇 가지 샘플 코드가 공식 GitHub 리포지토리에 있으므로 유용합니다.
windycom/API: 🏄Windy API, or Windy Leaflet Plugin, let you put animated weather map into your website and enjoy rich ecosystem of Leaflet library.
참고 자료
Reference
이 문제에 관하여(Windy JavaScript API로 바람과 파도 애니메이션을 지도에 표시), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/niwasawa/items/8920b54ef052802ef502텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
