TileView ～ Androidで大きな画像をスクロールさせるのに便利です
「東京周辺マップ」における地図の表示とスクロールは、TileViewというライブラリを採用しています。特徴は、滑らかなスクロールを実現できることと、画像上にマーカーを置いたり、線が引けることです。
※ver 2.00以降は、TileViewライブラリを使っていません。
1.TileViewのダウンロード
TileViewは、以下のリンク先より入手できます。
https://github.com/moagrius/TileView2.TileViewを使う上での注意点
使い方は、ライブラリに同梱されているサンプル(demoのフォルダにある)を見て頂ければ良いでしょう。ここでは、いくつかの注意点について述べたいと思います。
画像を小さな正方形の集まりになるように分割が必要
画面サイズに入り切らない大きな画像を使うことを想定しますので、小さな画像に分割して用意する必要があります。TileViewでは、256ドットなどの正方形の画像に分割します。縦横サイズは256ドットが標準ですが、変えることもできます。東京周辺マップでは540ドットで設定しています。
1つの画像のファイル名には、分割した時のナンバリングを付ける必要があります。例えば、
任意の名前_縦_横.jpg
というふうにファイル名を用意します。画像を4分割するなら、
任意の名前_0_0.jpg、任意の名前_1_0.jpg、任意の名前_0_1.jpg、任意の名前_1_1.jpg
とファイル名を付けます。東京周辺マップでは画像を、縦32、横40で分割している(ver 0.30時点)ので、1280枚の画像が内蔵されています。正直、画像を用意するのがたいへんです。
画像の分割には、「E_cutter」というオンラインソフトを使っています。投稿記事もあります。
縮尺ごとに画像を用意できる
ピンチイン、アウトで拡大・縮小した時に、縮尺によって表示する画像を変えることができます。通常は、1.0/0.75/0.5/0.25倍でそれぞれ画像を用意するようです。
東京周辺マップでは、1.0倍のみの画像しか用意していません。作るのがたいへんだからです。また、スケールが1.0を超えると、なぜか異常終了する現象が出ています。これは、いまだに解決していません。
※スケール1.0以上の設定は、tileviewのver 4以上を使うとできることを確認しました。バグだったようです。しかし私の環境では、1.0倍以上は倍率が高くなるほど動作が不安定で使えていません。
マーカーを押すとポップアップウインドウを表示できる
マーカーを押してポップアップウインドウを表示させることができます。標準だとシンプルすぎるウインドウなためカスタマイズしたいのですが、今一つうまくいっていません。画像を表示したり、リンクを付けたりしたいところです。
緯度・経度の指定ができる
画像範囲の緯度・経度を指定することができます。よって、画像の指定した位置の緯度・経度が分かります。東京周辺マップでは、GPSで取得した緯度・経度で現在位置の地図を表示させています。
地図範囲が広い時の縦横比率には注意
地球は丸いので、低緯度と高緯度では縦と横の比率が変わります。球面を平面にするので歪みは仕方ないのですが、緯度・経度を1対1にすると高緯度ほど歪んで大きくなってしまいます。
東京周辺マップの姉妹品「さっぽろ周辺マップ」では、緯度・経度の比率を緯度によって変更しています。そのため、TileViewは使えず、独自の描画ルーチンを使っています。TileViewは狭い地図には有効だと思いますが、広範囲には向いていないでしょう。
3.TileViewで凝った処理をするにはカスタマイズが必要
以上、TileViewの注意点を述べましたが、ただ画像を表示してスクロールさせるだけであれば、TileViewはとても使いやすいライブラリです。しかし、デフォルトではできない機能を実装する場合は、手を加える必要があります。その方法は見た限り簡単ではなく、プログラムにかなり精通した人でないと難しいように見えます。
東京周辺マップは、さっぽろ周辺マップの独自描画ルーチンを使うバージョンも検討しています。独自描画ルーチンであれば、自分の好きなように作れるので良いのですが、スクロールの方法を再検討する必要があります。今後は、TileViewと独自描画ルーチンの双方をカスタマイズしていこうと思います。