🌐
Vue3 で JAXA Earth API をお試し
tokadev です。前回の記事の最後に書いたAPIを感触を知るために触ってみました。
世界の雨分布速報のほかにもJAXAが配信する衛星データの配信サービスがあります。
こちらを利用することで衛星データを描画して簡単に可視化することが出来ます。
今回試したのは Land Surface Temperature のデータセットです。
地表面温度のデータを取得して Vue3 で描画してみます。 Vue3 プロジェクト作成方法はここでは割愛します。
動作検証用のサンプルコードはこちら。
<!-- GSMaPのデータを用いた降雨量の季節変化 -->
<template>
<div id="rain_fall" ref="rainFall">
<canvas ref="map" />
</div>
<div>
<input type="date" v-model="dateInput" />
</div>
</template>
<script setup lang="ts">
import * as je from "@/lib/jaxa.earth.esm.js";
import { onMounted, onUpdated, ref } from "vue";
import type { Ref } from "vue";
const rainFall: Ref<HTMLDivElement | null> = ref(null);
const dateInput: Ref<string> = ref(
new Date()
.toLocaleDateString("ja-JP", {
year: "numeric",
month: "2-digit",
day: "2-digit",
})
.replaceAll("/", "-") // yyyy-mm-dd
);
const map: Ref<HTMLCanvasElement | null> = ref(null);
const collection =
"https://s3.ap-northeast-1.wasabisys.com/je-pds/cog/v1/NASA.EOSDIS_Terra.MODIS_MOD11C1-LST.daytime.v061_global_half-monthly/collection.json";
const bbox = [122, 20, 148, 46];
onMounted(() => {
renderMap(new Date(dateInput.value));
});
onUpdated(() => {
renderMap(new Date(dateInput.value));
});
const renderMap = async (date: Date) => {
const image = await je.getImage({
// MODISの地表面温度のデータ
collection: collection,
band: "LST",
date,
colorMap: {
min: 273.15 - 5,
max: 273.15 + 35,
colors: "jet",
},
bbox: bbox,
width: 600,
height: 600,
onloading: null,
});
map.value = image.getCanvas();
if (rainFall.value?.firstChild) {
rainFall.value.removeChild(rainFall.value.firstChild);
}
rainFall.value?.appendChild(map.value);
};
</script>
<style>
#rain_fall {
height: 600px;
width: 600px;
display: flex;
justify-content: center;
}
input {
margin: 10px;
padding: 5px;
}
</style>
現時点と8月の地表面温度のデータを描画して並べてみます。
特に日本海側に面する地域の地表温度が低くなっています。北日本や日本海側沿岸部は積雪量が多い傾向にありますが、地表温度が低い地域と概ね一致しますね。
関東・中部・近畿地方を始め人口密集地の地表温度が高くなっていることがわかります。仙台や札幌でも中心部は周辺地域と比べると温度が高いようです。
過去の気象データから今シーズンの販売予測などに活用する動きが報じられるなど、販売業・小売業を中心に気象データの解析を行う企業が増えてきているように感じます。
実際には気象データ単体ではなく過去の販売実績データや店舗や事業所の位置情報などとの掛け合わせで利用することが多いと思いますが、多様な気象データを活用してプロダクトをブラッシュアップするため今後もアンテナを張っていきたいと思います。
Discussion