南津電鉄 や 京成上野地下線 の記事で使用した重ね合わせ地図についてメールで何件かお問い合わせをいただいたので、この機会に若干解説をしておきます。 これらは Google Maps JavaScript API V3 を使っており、その中のカスタムマップタイプの「オーバーレイマップ」というタイプを使用しています。 既存の Googleマップの上にレイヤーを作り、そこへ自サイトに置いた画像イメージを APIを使って重ねて同時に動かしているわけです。
ちなみに以前は Googleの APIを使用するには登録して自サイト用に APIキーを取得しなくてはなりませんでしたが、現バージョンでは必要ありません。 また 1日のページロード数 25,000以上は課金されますが、一般的な個人サイトではまずこれを超える心配は無いでしょう。 （2018年7月より、再び APIキーが必須となりました。またGoogleアカウントにカード登録が必要です）
■とにかくすぐに動かしたい
私の作成したもの（上のサンプル）でよろしければ、右記に一式をアーカイブしたものを置いておきます。 Googleのサイトに繋がる環境ならとりあえずローカルでも動作可能になっていますので、ダウンロードして解凍の上、ブラウザでお試し下さい。
詳細は省きますが、動作原理としては OverlayMap.js の中で map = new google.maps.Map(containerm, myOptions) として Google基本マップの表示を行ない、MCustomTileLayer.js の中で map.overlayMapTypes.insertAt(0, self) の指示でオーバーレイの挿入を行なっています。 MTileLayerControl_v3.js はオーバーレイ表示のオンオフや透過度のコントロールをするスライダー部等を定義しています。 後者 2本の jsはデモギャラリーにあったものの改造です。
では以下、自作する場合の手順について概要説明です。
■準備
- 素材を探す
オーバーレイする素材については、これをやろうとしている方は既に手元に用意されている筈ですが、一般的にはネット上で提供されている空中写真や地図、あるいは各自で作図したもの等を加工して使用する事になるかと思います。 - 掲載の許可申請
最初から自作したもの以外の場合は、それを利用するにあたっての許可を求める必要があります。 但し、場合によっては申請→承認を省略出来る素材もありますので、使用にあたっては各サイトの注意書きを良く読んで下さい。 引用物については、その引用元を表示する義務もあります。 Google側に関しては、個人ベースでは特に申請の必要はないようです。
■システム構築
- プログラム
必要とされるスキルは、HTML, CSS, Javascript及び画像処理等。 APIの詳細は チュートリアル で学習する事も出来ますので、概略は勉強しておいた方が良いでしょう。 とりあえずすぐに作りたいという向きは、サンプルで近いものを探して改造するのが手っ取り早いです。 私もそのくちでして、デモギャラリー にあった「Custom Tile Layers with Opacity」を活用させていただき、見てくれを中心に編集しました。 動作的にオリジナルとの違いは、スライダーをよりスムーズな物に変えた事とストリートビューの機能を追加してある点です。 新旧の地図を見比べながら廃線跡の現地状況を確認するのに役に立ちます（ちなみに Google Maps APIのストリートビューは、現時点で一世代前の UIのままのようでちょっと古臭いです）。 - 地図座標
Googleマップの座標の考え方は こちら に説明がありまして、各ズームレベル毎に、それぞれのタイル座標が定義されています。 1枚の画像サイズは 256x256ピクセルの正方形になります。 - 画像形式
レイヤー出来る画像の形式は通常ブラウザで表示出来るものという事で、jpeg, gif, png の3種類が基本となります。 画像の内容が写真なのか図なのか、背景を透過する必要があるかどうか等で、どのフォーマットを使用するか決めると良いと思います。
■重ね合わせ作業
- エリアとズームの決定
まずは重ね合わせるエリアを決定します。どの範囲までタイルを敷き詰めるかという事です。 と同時に、画像を表示させるズームレベルも考える必要があります。 ズームはレベル0から最大でレベル21までありますが、エリアと共に表示範囲を必要最小限にしないと手に負えなくなります（経験者談）。 - 合わせ込み
これがある意味肝かもしれません。 背景の Googleマップにどこまで正確に合わせ込めるかです。 キャプチャーした Googleマップの画像（座標入りが作業しやすい）をペイントツールに取り込み、ツール上でレイヤー機能を使って確認しつつ、重ねる画像の縮小拡大（場合により縦横比も変えて）や回転を行なうと良いでしょう。 はじめに出来るだけ大判の画像で作業しておき、後で都度縮小すると正確かつ効率的です。 但しあまり大判だと作業時にメモリーが足りなくなりますが。 ちなみに重ね合わせ作業用に Googleマップの画面をキャプチャして大きな連続画像を作るには、私は Map Grabber を使っています。 もうちょっと使いやすいツールがあると良いんですが…。
■タイルの作成
- スライス処理
例えばズーム17で作成したタイルを縦横に Total4枚合わせて 256x256ピクセルに縮小すると、それがズーム16のタイル 1枚分となります。 逆にズーム値が大きく（より地面に近く）なればなる程、スライスして作るタイルの枚数は累乗で増えて行きます。 1枚、4枚、16枚、256枚… ですから、場合によっては人間ワザの範疇を超えます（笑）。 ペイント系のツールには自動スライスの機能が付いていますので有効活用しましょう（PSPだと「ファイル」→「エクスポート」→「イメージスライス」）。 無償で使えるスライス専用ツールもありますね。 - ナンバリング
座標値に合わせてファイル名を指定し、画像を保存します。 通常、ペイントツール等で自動スライスした画像はルールに従ってナンバリングされたファイル名が付いていますので、枚数が多くて手に負えない場合は、適当にスクリプトを作って改名の自動処理を行なうと一瞬で完成します。 私の場合は Perlでそれ用の使い捨てプログラムを書いたりしています。 - 配置
完成したファイルを指定された場所へ配置します。 他の画像と混ざらないようレイヤー別にフォルダ分けして整理すると、後々メンテナンス等の際に混乱が生じにくくなります。 もちろんプログラムはそのフォルダを見に行くように、コード内で指定しなければなりません。
以上、簡単ですがご説明まで。 多少とも参考になれば幸いです。
Back to rail page