Google Maps APIメモ(v2) #4 オリジナルの画像をタイルレイヤーで表示

シリーズ第4弾
いつもは、地図とかで使っているGoogle MaGoogle Mps APIだけど、
使い方によっては、色んな事考えられるぞ。という例のメモ

オリジナルの画像や写真とかをGoogle MaGoogle Mps APIを使って表示できるようにする。

参考にしたところ

タイル画像の切り出しについて

タイル1枚は、256*256pxらしい。
FireBugで確認してみた画面↓

  • ズームレベル0でタイル1*1枚
  • ズームレベル1でタイル2*2枚
  • ズームレベル2でタイル4*4枚
  • ズームレベル3でタイル8*8枚

ということらしい。
じゃあ、横長や縦長の画像の場合は、どうなるんだ?とも思って実際に試してもみたが、
ズームレベル0だとやはりタイル1枚のみが表示される状態。
ということは、タイル画像を作成するときに、正方形にちょうど収まるように作ってやればいいみたい。
まずは、Sampleを見てみてください。

Fireworksでの作業手順メモ

  1. タイルの最大サイズを決めて、ファイル作成
    Sampleは、8*8枚、2048*2048pxとした。)
    丁度メモリの容量みたいな数字ですね。
  2. 最大サイズでスライスレイヤー(Webレイヤー)作る
  3. レイヤーフォルダ分けながら、半分のサイズにしながら、そのサイズの中でセンタリングする。
    ※レイヤーの名前は、ズームレベルと合わせとくと、わかりやすいかも。

    • ズームレベル3
    • ズームレベル2
    • ズームレベル1
    • ズームレベル0
  4. スクリプトで、
    "tiles/"+zoom+"/"+x+"_"+y+".png"とかで画像を読み込ますので、それに合わせて、画像を書き出す。
  5. いちいちFireworksのWebレイヤーに名前を付けるのがめんどうな時は、
    • 一度、Webレイヤーに名前を付けたファイルからコピペする
    • もしくはFireworks-ファイル-書き出しのオプションを変更して、Webレイヤーを削除しながら書き出す
      • Fireworks-ファイル-書き出しのオプション
      • 設定例

画像の切り出しをやってくれるツールもあるみたいです。

実際にオリジナルのマップを作成する場合には、文字を入れたりもするでしょうから、縮尺によって文字サイズを変更したい場合も出るはずです。
ちなみに、Sampleもクレジット表記部分は、ズームレベルによって大きさを変えている

スクリプト

サンプル

スペシャルサンクス
Sampleで使用しているイラストは、高田さんに無理言って借りちゃいました。
ありがとうございます。
プロジェクト管理ツールBacklog(バックログ)の本体、告知サイトSubversionページのインターフェースデザインも高田さんです。
関連エントリー

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です