概要
前編 : タイルサーバを CloudFront を使って CDN 配信する
後編 : CloudFront をタイルサーバとしてクライアントを作成する
はじめに(後編)
前編で構築した CloudFront によるタイルサーバを使って、クライアント側 のアプリケーションを設定/作成します。
以下、この構成について順番に見ていきます。
(後編の範囲)
地図アプリケーション
以下のタイル情報を使った、LeafletとOpenLayer3のアプリを作成しました。
ベース地図
- OpenStreetMap
- 地理院地図 標準
- 地理院地図 オルソ
- 写真(1974年)
- 写真(1979年)
- 写真(1984年)
- 写真(1988年)
- 簡易空中写真(2004年)
- 白地図
レイヤー地図
- 色別標高図
- 土地利用図
- 地質
- 断層・褶曲
- 土地条件
Githubにアップロードしておきます。html単体で動作します。
https://github.com/exabugs/WMTS
★前編で構築したCloudFrontを以下の部分にタイルサーバとして設定してください。
// CloudFrontを使ってアクセス先をひとつにまとめた
function mtsHost(path) {
// あなたのCloudFrontを指定してください！！
// 仮にOpenStreetMapを指定しています
return "http://tile.openstreetmap.org/" + path;
}
例えば、以下のようなことも、確認できます。
- 今住んでいる家の地盤は大丈夫ですか？
(クリックした地点の、詳細地質情報を産業技術総合研究所から引いてきます) - 40年前、実家や会社は存在していましたか？
- 今いる場所の海抜はどれくらい？
大きな津波が来た時は、どこに非難するべきか。
Leaflet
- パーマネントリンクを作ってくれる leaflet-hash ライブラリが超便利です！
- ベクタータイルは、国土地理院のサンプルを参考に、leaflet-tilelayer-geojson ライブラリを使って対応しています。
- 次の OpenLayers3 と比較して、若干使いやすいので、自分としてはこちらがオススメです。
- 因みに Kibana は Leaflet を使っているのですね。
OpenLayers3
OpenLayers3 で同等の機能を実装しました。
- レイヤーコントロール機能がないので、自分で実装です。
- スケール(Leafletでの左下のものさし)機能が、無いですね。
- ベクタータイルは、外部ライブラリ無しで自ら描画できるようです。
Kibana
MapQuest社のタイルサービス停止に伴い、おいおい困ったよ〜 て人が続出だと思います。
Kibana のタイルサーバの変更方法は、下記 Developers.IO 記事を参照してください。
KibanaのTileMapにOpenStreetMapを利用する
OpenStreetMap を使うには、kibana 設定ファイルに以下を追記します。
他のタイルデータを使うこともできます。(Kibana再起動が必要ですが)
tilemap.url: "http://<cloudfront>/{z}/{x}/{y}.png"
tilemap.options.maxZoom: 18
この CloudFront版 であれば、自分でタイルサーバを構築せずとも、オリジンサーバに迷惑かけることなく業務を継続できると思います。
因みに、OpenStreetMap にすると、以下のように、Zoom18まで対応になります。
Advanced - JSON Input に以下を設定すると、さらにクラスタリング粒度を詳細にすることができます。
{"precision":9}
まとめ
- 前編では、オープン地図データをCloudFrontでElastic化し、地図アプリケーションから利用可能にしました。
- 幾つかの地図データをレイヤーで重ね合わせる地図アプリケーションを作成しました。
- OpenStreetMap の思想と、そのデータ精度は素晴らしいです。
微力ながら、データの更新作業に参加していきたいと思っています。 - 実際の業務で使用するには、オリジンサービスの利用規約を確認してください。