[ヅ] Google Maps API の上に OpenStreetMap を乗せてみた (2012-03-17)

Google Maps API の上に OpenStreetMap を乗せてみた (2012-03-17)

ついでにiOS版iPhotoの地図(Apple Map)も乗せてみた。
⇒ OpenStreetMap and Apple Map on Google Maps API

東京駅付近の地図の比較、スクリーンショット。

OpenStreetMap
OpenStreetMap and Apple Map on Google Maps API

iOS版iPhotoの地図
OpenStreetMap and Apple Map on Google Maps API

Google Maps のデフォルトの道路地図
OpenStreetMap and Apple Map on Google Maps API

Google Maps の地形情報地図
OpenStreetMap and Apple Map on Google Maps API

Google Maps の航空写真
OpenStreetMap and Apple Map on Google Maps API

OpenStreetMap と Apple Map を乗せるために、 ImageMapType クラスを使用。

タイル座標

Google Maps API では、有益性が最も高い高度なズームレベルではすべての地図画像を読み込めないことがあります。Maps API は各ズームレベルでの画像をマップタイルに分割し、アプリケーションが解釈する順序で論理的に配置します。地図を新しい位置にスクロールする、または新しいズームレベルにスクロールすると、Maps API はピクセル座標を使用して必要なタイルを決定し、この値を取得する一連のタイルに変換します。これらのタイル座標は、指定されたポイントの画像を含むタイルを論理的に簡単に判定できる方法を使用して割り当てられます。

Google マップでのタイルは、ピクセルの場合と同じ原点を使用して番号が付けられます。Google によるメルカトル図法の実装では、原点のタイルは常に地図の北西の隅にあり、x 値は西から東に向かって増加し、y 値は北から南に向かって増加します。タイルはこの原点からの x,y 座標を使用してインデックスが付けられます。たとえば、ズームレベル 2 では、地球を 16 個のタイルに分割した場合、各タイルは一意の x,y ペアで参照できます:

(中略)

画像マップタイプ

ベースマップタイプとして機能する MapType を実装することは、時間と手間がかかります。API には、1 つの画像ファイルで構成されるタイルからなるマップタイプという、よく使用されるマップタイプ用に MapType インターフェースを実装する特殊なクラスが用意されています。

この ImageMapType クラスは、次の必須プロパティを定義する ImageMapTypeOptions オブジェクト仕様を使用して作成されます:

・tileSize（必須）は、タイルのサイズ（タイプ google.maps.Size）を指定します。サイズは矩形にする必要がありますが、正方形である必要はありません。
・getTileUrl（必須）は、通常はインライン関数リテラルとして提供される関数を指定し、指定された世界座標とズームレベルに基づいて正しい画像タイルを選択します。

Google Maps JavaScript API V3 のマップタイプ - Google Maps API — Google Developers

参考までに、JavaScriptのソースコードを一部抜粋。


<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://www.nilab.info/lib/js/jGoogleBarV3.js"></script>
 
<script>
 
function init(){
 
  var map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(35.170727, 136.882603),
    zoom: 14,
    panControl: true,
    zoomControl: true,
    mapTypeControl: true,
    rotateControl: true,
    scaleControl: true,
    streetViewControl: true,
    overviewMapControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControlOptions: {
      mapTypeIds: [
        google.maps.MapTypeId.ROADMAP,
        google.maps.MapTypeId.SATELLITE,
        google.maps.MapTypeId.HYBRID,
        google.maps.MapTypeId.TERRAIN,
        "osm",
        "apple"
      ]
    }
  });
 
  // OpenStreetMap用のタイル画像URL生成器
  // Ref. Apple Map Tiles
  //    http://www.refnum.com/tmp/apple.html
  map.mapTypes.set("osm", new google.maps.ImageMapType({
    getTileUrl: function(coord, zoom) {
      return "http://tile.openstreetmap.org/" + zoom + "/" + coord.x + "/" + coord.y + ".png";
    },
    tileSize: new google.maps.Size(256, 256),
    name: "OpenStreetMap",
    maxZoom: 18
  }));
 
  // iOS用iPhoto地図用のタイル画像URL生成器
  // Ref. Apple Map Tiles
  //    http://www.refnum.com/tmp/apple.html
  map.mapTypes.set("apple", new google.maps.ImageMapType({
    getTileUrl: function(coord, zoom) {
      return "http://gsp2.apple.com/tile?api=1&style=slideshow&layers=default&lang=de_DE&z=" + zoom + "&x=" + coord.x + "&y=" + coord.y + "&v=9";
    },
    tileSize: new google.maps.Size(256, 256),
    name: "Apple",
    minZoom: 3,
    maxZoom: 14
  }));
 
  // Ref. gmaps-api-v3-googlebar - A GoogleBar-like control for GMaps API v3 - Google Project Hosting
  //    http://code.google.com/p/gmaps-api-v3-googlebar/
  var gbar=new window.jeremy.jGoogleBar(map,{});
  map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(gbar.container);
}
 
window.onload = init;
</script>

住所などのキーワードによる検索機能は外部ライブラリ A GoogleBar-like control for GMaps API v3 を利用。ホントは Google Maps API v2 にあった GoogleBar が使えるといいんだけど v3 には搭載されてないらしい。
参考: [ヅ] Google Maps API の GoogleBar でお手軽ジオコーディング

Ref.

tags: google_maps_api openstreetmap

Posted by NI-Lab. (@nilab)

ヅラッシュ！ by NI-Lab.

Google Maps API の上に OpenStreetMap を乗せてみた (2012-03-17)