国土地理院の地図データなどを使うプログラムを書いて遊んでいる。 キッカケは 湊あくあの マイクラ配信での発言。 ENサーバとの接続前後で、お互いへの観光が盛んになった時期。 ENメンバーに見てもらうような施設をつくりたい。 日本的なものって何？ 秋葉原？ という発言があった。 秋葉原全体をマインクラフト上に再現するのは大変だが、 用地確保と土地の割当だけし、 あとは作りたい人が作りたいものを作るということにすれば 面白いのではなかろうか。 マイクラのブロック単位(1m)の地図を用意すれば作れるのでは？ 地図は公開されている地図データから生成可能ではないかと考えた。
地図データは 国土地理院のものを使用する。 提供される地図データは様々だが 基本はタイルと呼ばれる256x256のメルカトル図法の地図画像データ。 拡大率に相当するズームレベルというものがあり、 ズームレベル0では地球全体を1枚のタイルで表し、 ズームレベルが1増える毎にタイルの枚数が4倍になる。 最大ズームレベル18までの地図画像が提供される。
この画像は以下のURLでアクセス可能。
ここで{t}は地図の種類、 {z}はズームレベル、 {x}と{y}はタイルの座標となっている。 例えば以下のurlで日本周辺の地図が表示される。
タイルを利用するプログラムを作るには 目的の場所のタイルの座標を知る必要がある。 緯度経度から変換可能だが、 目的の場所の緯度経度がわからない。 結局GoogleMapのような地図ソフトが必要になる。
地図ソフトは Leafletのような地図ライブラリを 使用すると簡単に作ることができる。 地理院タイルを用いたサイト構築サンプル集に紹介されているが 31行のソースファイルで このような 地図ソフトが動く。 地図上に様々なマーク、図形等も表示可能なので、 そういうことをやりたい場合、GoogleMap APIを使うより やりやすいかもしれない。
メルカトル図法の地図は緯度が違うとスケールが違う。 正確に平面のスケール一定の地図に変換できないので妥協する。 基準点を決め、そこでのスケールを全体に適用する。 基準点の設定と領域のサイズの見当をつけるための ツールをleafletで作成した。 画面を以下に示す。
この例では中央通りと神田明神通りの交差点に 基準点を設定、512m x 512m のマーカーを表示している。 これだけの領域があれば秋葉原を充分カバーできそうである。 人によっては 256m x 256mでもカバーできるかもしれない。
基準点の座標を基準にタイルの画像を取得、 canvasに描画し、ブロック単位のグリッド(1m,4m,16m,128m)も 描画するプログラムを作成した。マイクラ座標とのオフセットも 設定できるのでマイクラのx,z座標も表示している。
これでマイクラ側での作業が可能になったので 自分のワールドでバーチャル・秋葉原の作成を開始したが、 地図が見にくい。画像を拡大しているので 線がにじむのだ。にじんでいる、どの部分を線として採用するかに 悩んでしまう。 この時点で ベクトルタイルの提供実験に気がつく。 ベクトルデータを描画してやればにじまない。
ベクトルタイルで提供されているデータについては 丁寧に説明 してあるのだが、知らないことが多くて戸惑う。 ファイルの形式は Vector tile specification 準拠。 この仕様は Google Protocol Buffers を符号化フォーマットとして使用している。 いろいろ調べてわかったのは Google Protocol Buffersを使用していると protocというプログラムでパーザ(構文解析プログラム)を 自動で生成できるらしい。 protocにVector tile specificationの vector_tile.protoを食わせてやる。 protocでjavascriptのプログラムを生成できるが、 typescriptのプログラムが欲しい。 探すと Protocol Buffers から TypeScript の型定義を作るというページがあり無事生成できた。 これで無事、にじまないブロックを描画できるようになった。
 |
 |
 |
| ベクタータイル地図 | 1ブロック単位で描画するので にじまない |
左と同じ場所の画像データを 拡大した地図 |
 |
 |
 |
| 地理院地図 | 地理院航空写真 | OpenStreet |
Vector Tileでは、データがLayerで分かれているが 道路(road)と建物境界(building)と川(river)だけ ブロックとして描画している。 マイクラ側では道路境界を 玄武岩、 建物境界を ネザーラックで描いている。
まずは、秋葉原のある程度の領域の 道路と建物境界の線を配置することを目標に作業している。 クリエーティブモードだと作業感が出て飽きそうな 気がしたのでサバイバルモード。 整地から大変だが、目的があれば整地も楽しい。 秋葉原周辺の高さを調べると、だいたい標高4mぐらいなので マイクラ側ではY=68としている。御茶ノ水駅方面に拡張する場合には 高くなっていくので注意が必要。
低い部分を埋め立てると大変なので、蓋をする形にしたが 蓋など作らず、いきなり空中に線を描いていったほうが 楽だったと反省している。
湧き潰しを完璧にするため Light Overlayを導入。 すごく楽になった。
 |
 |
 |
| 高度チェック 秋葉原周辺は大体4m |
マイクラの地図 | 北東方向に秋葉原駅 |
 |
 |
 |
| 秋葉原駅から北方向 | 秋葉原駅から東方向 | Light Overlayで湧き潰しをチェック |
プログラムは、まだ試作レベルだが いずれ整理して公開したい。 その時までにはマイクラのバーチャル秋葉原も もう少し見れるものにしたい。
マイクラは好きだが、 建築勢というわけでもないので、 ある程度施設が整うとやることが無くなってしまう。 このプログラムで現実の地形を再現するという目標が できたわけで、これは私の性に合っているようだ。 これでマイクラの整地を楽しめる。
国土地理院はデータをたくさん公開していて偉い。 湊あくあは、もっとマイクラ配信をして欲しい。
