Google Maps API を使って大きい画像を表示(前編) の最後に

次回では PIL の練習がてら「大きい一枚の画像から Google Maps を使って表示するためのタイル画像を生成する」について書きます。

と書きましたが、オリジナル画像を使って地図を表示する方法についてコードだけ置いて説明しないのもなんだなーと思ったので、説明しようと思います。

ソースコードは kuromap.html です。

// カスタムレイヤーを作成
var tileLayer = new GTileLayer(new GCopyrightCollection(""), 0, 4);
tileLayer.getOpacity = function(){return 1.0;}
tileLayer.isPng = function(){return false;}
// タイル画像を返す関数
tileLayer.getTileUrl = function(tile, zoom) {
  var x = tile.x;
  var y = tile.y;

  return "/tiles/kuro/" + zoom + "/" +x+"_"+y+".jpg";
}

まず最初に GTileLayer インタフェースを使って、カスタム画像を使った地図用のレイヤーを作成します。0,4 はズームサイズの範囲です。

getOpacity メソッドでは 1.0 を返して「このレイヤーは不透明」だよと指定します。透明度があると普通の世界地図が透けて見えます。

また、 getTileUrl メソッドでタイルの座標とズームがわたされたら、タイル画像の URL を返します。 画像 URL は見てのとおり (ズームレベル)/(X座標)_(Y座標).jpg となっています。(座標は左上が 0, 0)

// カスタム図法を作成
var projection = G_NORMAL_MAP.getProjection();
projection.tileCheckRange = function (tile, zoom, tilesize) {
  var tileBounds = Math.pow(2, zoom);
  if (tile.y < 0 || tile.y >= tileBounds) {
    return false;
  }
  if (tile.x < 0 || tile.x >= tileBounds) {
    return false;
  }
  return true;
}

次にカスタム図法とやらを作成します。ここは意味がわかってなくてまんまパクり状態...

var mapType = new GMapType([tileLayer], projection, "");

gmap = new GMap2(document.getElementById("map"), {mapTypes: [mapType]});

で、準備ができたら、カスタムレイヤーとカスタム図法を使ったカスタム地図タイプを作成します。(レイヤーは複数重ねられるので配列)

そして、そのカスタム地図タイプを使って GMap2 を作成すればできあがりです。

あとは普通にデフォルトの表示位置を指定したり、地図を操作するコントローラを追加したりとかいった感じです。

さて、次回こそは「大きい一枚の画像から Google Maps を使って表示するためのタイル画像を生成する」python スクリプトについて書きますかね。