この記事では、私が独自開発アプリ「TopoBuilder」の開発のときに使ったJavascriptのライブラリ「Leaflet」でGISデータであるASCII-Gridデータを地図上に表示させる方法を解説していきたいと思います。
1. はじめに
開発しているアプリで画面上にGISデータの一つであるASCII-Gridファイルを表示する必要がありました。ASCII-GridファイルはASCIIと書いてあるとおりテキスト・ファイルなので、数値計算には便利ですので、水文計算にはよく使います。ただ、それを地図上に表示しようとするとどうしてもGISに頼らないといけません。
私は自分が開発するアプリの中でASCII-Gridファイルを表示したかったので、GISを使うわけにはいきませんでした。色々調べましたが、LeafletというJavascriptのライブラリを使うと、WEB画面上にASCII-Gridファイルを表示することができるというのを知り、早速やってみました。一応できるようになりましたが、制約も色々あることにも気づきました。
この記事では、LeafletでASCII-Gridで表示する方法を解説していきたいと思います。
2. ソースコードの解説
LeafletはJavascriptのライブラリですが、基本的にhtml中にJavascriptのコードを埋め込む形で記述します。下記にLeafletを使ってASCII-Gridファイルを地図上に表示するためのサンプルコードを示します。
4-7行目は、Leafletを利用するためのリファレンスです。そして、9行目はLeaflet上にASCII-Gridファイルを表示するためのリファレンスです。
11-14行目のCSSと18行目のdiv要素でLeafletで地図を表示するための領域を定義しています。
20-36行目がLeafletを使っているJavascriptのコードです。21-24行目で、div要素mapidに表示する地図の中心の緯度経度 [37.0, 137.0] と倍率（地図の大きさ）を指定しています。
26-29行目で下地となる地図を表示します。
そして、31-35行目がもっとも重要なところですが、ここでASCII-Gridファイルを地図上に表示しています。表示するファイルは31行目に記述されている「./dem.asc」です。「./dem.asc」とあるように、ここではindex.htmlと同一ディレクトリに配置しています。34行目でASCII-Gridファイルをウィンドウ画面いっぱいに表示します。ASCII-Gridファイルを表示するだけならこのコードは必須ではありませんが、このコードがないと表示されたASCII-Gridファイルが地図のどこに表示されているのか探すのが難しくなります。
Leafletのサンプルコード「 index.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>
<!-- CDN references -->
<script src="https://d3js.org/d3.v4.min.js"></script>
<!-- Plugin -->
<script src="https://ihcantabria.github.io/Leaflet.CanvasLayer.Field/dist/leaflet.canvaslayer.field.js"></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);
d3.text("./dem.asc", function (asc) {
let s = L.ScalarField.fromASCIIGrid(asc);
let layer = L.canvasLayer.scalarField(s).addTo(map);
map.fitBounds(layer.getBounds());
});
</script>
</body>
</html>
3. ソースコードの動かし方
この記事で使うソースコードは、下記のリンクからダウンロードすることができます。だだ、その中にあるhtmlのソースコードindex.htmlをブラウザから開くと背景の日本地図しか表示されません。
ASCII-Gridファイルを表示しようと思ったら、index.htmとdem.ascをウェブサーバー上の同一ディレクトリに配置する必要があります。
ウェブサーバーを用意するのはなかなか大変だと思いますので、ここで配布するサンプルプログラムではnode.jsというサーバサイドJavascriptのプラットフォームを用いています。よって、このサンプルプログラムを動かす前に、node.jsをインストールする必要があります。
ダウンロードしたzipファイルを解凍すると、package.jsonを始めとする4つのファイルが現れます。そのディレクトリ上でコマンドプロンプトまたはターミナル画面から下記のコマンドを打ち込みます。
npm install npm start
1行目のコマンドを打ち込むと、node.jsの必要なモジュールがインストールされます。これには数分かかると思います。そして、2行目のコマンドを打ち込むと、下図のようにウィンドウにASCII-Gridファイルが表示されます。以降は2行目のコマンドのみで、表示されるようになります。
4. 注意点
アプリ「TopoBuilder」を開発しているときに気づいたのですが、Leaflet上でASCII-Gridファイルを表示するときには、下記のような制約があることがわかりました。その制約を守らないと、エラーメッセージ等は表示されず、ただASCII-Gridファイルが表示されなくなるだけになります。
- ASCII-Gridの数値の区切りは、単一スペースのみ。（数値の位置を揃えるために複数スペースにすると表示されなくなります。）
- 南北および東西のピクセルサイズは同一のみ（CELLSIZE要素のみ対応で、DX、DYの個別指定には対応していない）
5. まとめ
この記事では、Javascriptのライブラリ「Leaflet」でGISデータであるASCII-Gridデータを地図上に表示させる方法を解説しました。要点をまとめると、下記のようになります。
- JavascriptライブラリのLeafletを使うとASCII-GridファイルをWEB画面上に表示させることができる。
- LeafletでASCII-Gridファイルを表示するためにはウェブサーバーを設置する必要がある。
- 表示できるASCII-Gridファイルには制約がある。
以上、最後まで読んでいただきありがとうございました。