この記事では、WEB地図のJavascriptライブラリLeafletでGISデータであるGeoTIFFファイルデータを地図上に表示させる方法を解説していきたいと思います。
1. はじめに
相変わらずLeafletで地形データや降雨データ等のラスターのGISデータを表示することに取り組んでいます。前の記事ではLeafletでASCII-Gridファイルを表示する方法を解説しました。ところが、LeafletではASCII-Gridファイルを表示するとき制約があります。
ラスターのセルサイズが東西と南北で同じ大きさでないと地図上に表示してくれません。GeoTIFFファイルにはそのような制約がないので、東西と南北でセルサイズが違うラスターデータについては、GeoTIFFフォーマットを使っていこうと思っています。
この記事では、LeafletでGeoTIFFで表示する方法を解説していきたいと思います。
2. ソースコードの解説
LeafletはJavascriptのライブラリですが、基本的にhtml中にJavascriptのコードを埋め込む形で記述します。下記にLeafletを使ってGeoTIFFファイルを地図上に表示するためのサンプルコードを示します。
4-7行目は、Leafletを利用するためのリファレンスです。 特に6行目と7行目はGeoTIFFファイルを取り扱うためのリファレンスです。
10-13行目のCSSと17行目のdiv要素でLeafletで地図を表示するための領域を定義しています。
26-29行目で下地となる地図を表示します。
そして、31-43行目がもっとも重要なところですが、ここでGeoTIFFファイルを地図上に表示しています。表示するファイルは31行目に記述されているsample_geotiff.tifです。「./sample_geotiff.tif」とあるように、ここではsimple_geotiff_display.htmlと同一ディレクトリに配置しています。38行目でgeotiffを表示するレイヤーの透明度を0.7に設定し、背景地図が透けて見えるようにしています。
41行目でsample_geotiff.tifファイルをウィンドウ画面いっぱいに表示します。sample_geotiff.tifファイルを表示するだけならこのコードは必須ではありませんが、このコードがないと表示されたsample_geotiff.tifファイルが地図のどこに表示されているのか探すのが難しくなります。
Leafletのサンプルコード「simple_geotiff_display.html」
<html lang="ja">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJLQ==" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
<script src="https://unpkg.com/georaster"></script>
<script src="https://unpkg.com/georaster-layer-for-leaflet"></script>
<style>
#mapid {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="mapid"></div>
<script type="text/javascript">
let map = L.map('mapid', {
center: [37.0, 137.0],
zoom: 5.5,
});
let tileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
});
tileLayer.addTo(map);
let geotiff_file = "./sample_geotiff.tif";
fetch(geotiff_file)
.then(response => response.arrayBuffer())
.then(arrayBuffer => {
parseGeoraster(arrayBuffer).then(georaster => {
let layer = new GeoRasterLayer({
georaster: georaster,
opacity: 0.7
});
layer.addTo(map);
map.fitBounds(layer.getBounds());
});
});
</script>
</body>
</html>
3. ソースコードの動かし方
この記事で使うソースコードは、下記のリンクからダウンロードすることができます。だだ、その中にあるhtmlのソースコードsimple_geotiff_display.htmlをブラウザから開くと背景の日本地図しか表示されません。
ウェブサーバーを用意するのはなかなか大変だと思いますので、ここで配布するサンプルプログラムではnode.jsというサーバサイドJavascriptのプラットフォームを用いています。よって、このサンプルプログラムを動かす前に、node.jsをインストールする必要があります。
ダウンロードしたzipファイルを解凍すると、package.jsonを始めとする4つのファイルが現れます。そのディレクトリ上でコマンドプロンプトまたはターミナル画面から下記のコマンドを打ち込みます。
npm install npm start
1行目のコマンドを打ち込むと、node.jsの必要なモジュールがインストールされます。これには数分かかると思います。そして、2行目のコマンドを打ち込むと、下図のようにウィンドウにASCII-Gridファイルが表示されます。以降は2行目のコマンドのみで、表示されるようになります。
4. まとめ
この記事では、Javascriptのライブラリ「Leaflet」でGISデータであるGeTIFFファイルを地図上に表示させる方法を解説しました。要点をまとめると、下記のようになります。
- JavascriptライブラリのLeafletを使うとASCII-GridファイルをWEB画面上に表示させることができる。
- LeafletでASCII-Gridファイルを表示するためにはウェブサーバーを設置する必要がある。
- ASCII-Gridデータと違って、GeoTIFFファイルの表示についてはセルサイズやファイルフォーマットに関する制約はない。
以上、最後まで読んでいただきありがとうございました。