ヅラッシュ！ by NI-Lab.

Google Maps API の GTileLayer インターフェイスを使うと、自分で生成した画像タイリング地図を表示できる。

MapLib.net なんかでは好き勝手なAjax地図(＆地図じゃないだろうそれはみたいな画像) を GTileLayer で実現していておもしろい。

明日のためにその1。
地図をサーバから配信するのは作るのが大変そうなので、とりあえず簡易的な画像を配信してみる。

サンプル画像

Poison Maps [ポイズンマップ] に実装してみた結果。

タイル画像Jack

地図+タイル画像Jack

地図

航空写真

地図+写真

サンプルコード

JavaScriptで実装したソースコードの一部。

function createCustomTileLayer() {
  // GTileLayer 実装クラス
  var dataLayer =
    new GTileLayer(
      new GCopyrightCollection(""), 0, 19);
  dataLayer.getOpacity=CustomTileLayer_getOpacity;
  dataLayer.isPng=CustomTileLayer_isPng;
  dataLayer.getTileUrl=CustomTileLayer_getTileUrl;
  return dataLayer;
}
 
var CustomTileLayer_opacity = 0.3; // 透明度
var CustomTileLayer_png = true; // PNG画像かどうか
 
var CustomTileLayer_getOpacity = function getOpacity() {
  return CustomTileLayer_opacity;
}
 
var CustomTileLayer_isPng = function getOpacity() {
  return CustomTileLayer_png;
}
 
// タイル画像を返す関数
var CustomTileLayer_getTileUrl = function(tile, zoom) {
 
  // 地図タイリング画像生成サーバなんて
  // 自前で作れません(>_<;)
 
  // ここでは、とりあえずベタな画像のURLを返すことにする。
 
  // 交互にJackが表示されるように
  if(tile.x % 2 == tile.y % 2) {
    return "tile.png";
  } else {
    return "tile2.png";
  }
}
 
var g_map;
 
function init() {
 
  var customTileLayer = createCustomTileLayer();
 
  var mapCustom =
    new GMapType(
      [customTileLayer],
      G_NORMAL_MAP.getProjection(),
      "Jack");
 
  var mapNormalMix =
    new GMapType(
      [G_NORMAL_MAP.getTileLayers()[0], customTileLayer],
      G_NORMAL_MAP.getProjection(),
      "JackMix");
 
  //var mapSatelliteMix =
  //  new GMapType(
  //    [G_SATELLITE_MAP.getTileLayers()[0], customTileLayer],
  //    G_SATELLITE_MAP.getProjection(),
  //    "航空写真Mix");
 
  g_map =
    new GMap2(
      document.getElementById("map"),
      {
        mapTypes:
        [
          mapCustom,
          mapNormalMix,
          G_NORMAL_MAP,
          G_SATELLITE_MAP,
          G_HYBRID_MAP
        ]
      }
   );
 
  g_map.addControl(new GLargeMapControl());
  g_map.addControl(new GMapTypeControl());
}

参考

• GTileLayerによる画像重ね from DBマガジン12月号 (arclamp.jp アークランプ)
• DB Magazine 2006年12月号
• Google Maps API Version 2 Reference - interface GTileLayer

まじめにタイル画像を生成するための参考

将来に備えてメモ。

るきへなWeblog - GTileLayer のサンプル にある TILE TEST が素晴らしい。

ソースコード を見ると、

// タイル単位の(x,y)から緯度経度に変換
function x2lng_t($x,$zoom)
{
  return ($x/(1<<$zoom)*2-1)*180; 
}
 
function y2lat_t($y,$zoom)
{
  return atan(sinh((1-$y/(1<<$zoom)*2)*M_PI))/M_PI*180;
}
 
// ピクセル単位の(x,y)から緯度経度に変換
function x2lng_p($x,$zoom)
{
  return ($x/(1<<$zoom)/128-1)*180; 
}
 
function y2lat_p($y,$zoom)
{
  return atan(sinh((1-$y/(1<<$zoom)/128)*M_PI))/M_PI*180;
}

平面座標と緯度経度の変換ルーチンを発見。

るきへなWeblog - GTileLayerとメルカトル図法 とか Mercator projection - Wikipedia, the free encyclopedia の変換式も参考になりそう。