1000以上のルートを、ユーザごとの地図に投影する方法(5) - Google Map上に作成したオーバレイ用のタイル画像を表示

前回エントリで作成したオーバレイ用のタイル画像を
表示するためのJavascriptを作成します。

<script type="text/javascript" charset="utf-8">

function initialize() {

  if (GBrowserIsCompatible()) {
    
    // タイル画像のコピーライトを準備
    var myCopyright = new GCopyrightCollection("(c) ");
    myCopyright.addCopyright(new GCopyright('Demo',
      new GLatLngBounds(new GLatLng(-90,-180), new GLatLng(90,180)),
      0,'2008 matoyan'));

    // タイル画像のファイルを、zoom, x, y の3つのパラメータで指定する。
    var tilelayer = new GTileLayer(myCopyright);
    tilelayer.getTileUrl = function(tile, zoom) {
      var url = "mapdir/tile_z"+zoom+"_y"+tile.y+"_x"+tile.x+".png";
      return url;
    };
    // タイル画像はPNG形式
    tilelayer.isPng = function() { return true;};
    // 画像を透過させて、少し地図が見えるように。
    tilelayer.getOpacity = function() { return 0.7; }

    var myTileLayer = new GTileLayerOverlay(tilelayer);
    var map = new GMap2(document.getElementById("map_canvas"));
    var mapzoom=15;
    map.addControl(new GLargeMapControl());
    map.addControl(new GOverviewMapControl());
    map.addControl(new GMapTypeControl());
    map.setCenter(new GLatLng(36.834, 138.93), mapzoom);

    // 地図の準備完了後、オーバーレイとしてタイル画像のレイヤを指定する。
    map.addOverlay(myTileLayer);
  }
}
</script>

★作成した地図はこちら★※前回エントリと同じです。

なお、マップのファイルは、前回エントリの方法で、
すべて同じフォルダ(mapdir)に突っ込んであります。

実装との差分

ルート（GPXファイル）ごとにタイル画像群を生成するために、
実際はmapdirではなく、ルートのIDごとにディレクトリを作成して
ルートごとにタイル画像群を生成します。

こうしておけば、あとで1ユーザが行ったルートを集計するときに
毎回線を引いてタイル画像を生成するのではなく、
そのユーザの行った複数のルートから生成した
タイル画像群を重ね合わせるだけでよくなります。

備考

今の状態だと、画像ファイルがない場合、404 not foundになってしまいます。
動作上は問題ないのですが、気持ち悪い場合は、
（対策１）画像ファイルがない場合用に全タイルファイルを用意する。
（対策２）プログラムを経由して、画像ファイルがない場合は空白ファイルを返答する。
などの対策を取った方がいいと思います。

次は、複数のタイル画像を重ね合わせるための方法です。
そろそろ終わりがみえてきた、、、ような気がします。

matoyan’s blog

1000以上のルートを、ユーザごとの地図に投影する方法(5) - Google Map上に作成したオーバレイ用のタイル画像を表示

実装との差分

備考

1000以上のルートを、ユーザごとの地図に投影する方法：他の記事へ