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

宮城県石巻市付近の地図の比較、スクリーンショット。

OpenStreetMapOpenStreetMap and Apple Map on YOLP

iOS版iPhotoの地図OpenStreetMap and Apple Map on YOLP

Yahoo!地図の標準地図OpenStreetMap and Apple Map on YOLP

Yahoo!地図の航空写真OpenStreetMap and Apple Map on YOLP

震災後の航空写真
OpenStreetMap and Apple Map on YOLP

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

Class Detail

 ImageTileLayer()
 画像をタイル形式で表示します。

Method Detail

 getImageSrc(x, y, z)
 タイル1枚分の画像URLを返します。

 Parameters:
 {Number} x
  タイルx座標
 {Number} y
  タイルy座標
 {Number} z
  ズーム

 setOpacity(opacity)
 タイル画像の透過度を設定します。

 Parameters:
 {Number} opacity
  0.0 - 1.0

Yahoo!デベロッパーネットワーク - YOLP(地図) - JavaScriptマップ - リファレンス - Layerクラス

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


function init(){
 
  // OpenStreetMap用のタイル画像URL生成器
  // Ref.
  // - 【A-3】次世代ジオロケーション サービスの開発手法 河合太郎 氏
  //   http://www.slideshare.net/devsumi/a3-9187250
  // - Slippy map tilenames - OpenStreetMap Wiki
  //   http://wiki.openstreetmap.org/wiki/Slippy_map_tilenames
  var osmLayer = new Y.ImageTileLayer();
  osmLayer.getImageSrc = function(x, y, z){
    // OSMのzoom値はYOLPより1小さい値
    var osmz = z - 1;
    // 全世界を覆うためのタイルの縦横の枚数を計算
    var g = Math.pow(2, osmz);
    // OSMは原点(0,0)が左上で、YOLPは原点が左中央
    var osmx = x;
    var osmy = Math.floor((y + 0.5) * -1 + g / 2);
    // サブドメイン指定のローテーション
    var subdomains = ['a','b','c'];
    var subdomain = subdomains[x % 3];
    // URLを構築
    // http://[abc].tile.openstreetmap.org/zoom/x/y.png 
    var url = "http://" + subdomain + ".tile.openstreetmap.org/" + osmz + "/" + osmx + "/" + osmy + ".png";
    return url;
  };
 
  // iOS用iPhoto地図用のタイル画像URL生成器
  // Ref. Apple Map Tiles
  //      http://www.refnum.com/tmp/apple.html
  var appleLayer = new Y.ImageTileLayer();
  appleLayer.getImageSrc = function(x, y, z){
    // iOS用iPhoto地図のzoom値はYOLPより1小さい値
    var applez = z - 1;
    // 全世界を覆うためのタイルの縦横の枚数を計算
    var g = Math.pow(2, applez);
    // iOS用iPhoto地図は原点(0,0)が左上で、YOLPは原点が左中央
    var applex = x;
    var appley = Math.floor((y + 0.5) * -1 + g / 2);
    // URLを構築
    var url = "http://gsp2.apple.com/tile?api=1&style=slideshow&layers=default&lang=de_DE&z=" + applez + "&x=" + applex + "&y=" + appley + "&v=9";
    return url;
  };
 
  // NormalLayerとかPhotoLayerとかリファレンスに載ってないぽい。
  // APIのソース(当然難読化されとるがなー)を漁ってみたら
  // 地下街は Y.B1_LAYERSET, Y.LayerSetId.B1, Y.B1Layer らしい。
  // Y.PhotoLabelLayer ってのもあったけどなんだろ。
  // Ref. JavaScriptマップAPIで被災後の航空写真が使えるようになりました。 (Yahoo! JAPAN Tech Blog)
  //      http://techblog.yahoo.co.jp/web/yahoo_open_local_platform/javascript-map-aerial-photo/
  var layerSetsValue = {};
  layerSetsValue[Y.LayerSetId.NORMAL] = new Y.LayerSet("Map", [new Y.NormalLayer()]);
  layerSetsValue[Y.LayerSetId.PHOTO] = new Y.LayerSet("Satellite", [new Y.PhotoLayer()]);
  layerSetsValue[Y.LayerSetId.B1] = new Y.LayerSet("Underground", [new Y.B1Layer()]);
  layerSetsValue[Y.LayerSetId.EARTHQUAKEPHOTO] = new Y.LayerSet('EarthQuakePhoto', [new Y.EarthQuakePhotoLayer()]);
  layerSetsValue["osm"] = new Y.LayerSet("OpenStreetMap", [osmLayer]);
  layerSetsValue["apple"] = new Y.LayerSet("Apple", [appleLayer]);
 
  var configureValue = {
    doubleClickZoom : true,
    scrollWheelZoom : true,
    singleClickPan : false,
    dragging : true
  };
 
  var map = new Y.Map("map", {
    configure: configureValue,
    layerSets: layerSetsValue
  });
 
  map.addControl(new Y.LayerSetControl());
  map.addControl(new Y.ScaleControl());
  map.addControl(new Y.SearchControl(),
    new Y.ControlPosition(
      Y.ControlPosition.BOTTOM_LEFT, new Y.Size(0, 20)));
  map.addControl(new Y.SliderZoomControlVertical());
  map.drawMap(new Y.LatLng(35.170727, 136.882603), 15); // 名古屋駅
}
 
window.onload = init;

地図の比較用に、いくつかスクリーンショット。

OpenStreetMap and Apple Map on YOLP

OpenStreetMap and Apple Map on YOLP

OpenStreetMap and Apple Map on YOLP

OpenStreetMap and Apple Map on YOLP

OpenStreetMap and Apple Map on YOLP

OpenStreetMap and Apple Map on YOLP

OpenStreetMap and Apple Map on YOLP

OpenStreetMap and Apple Map on YOLP

OpenStreetMap and Apple Map on YOLP

OpenStreetMap and Apple Map on YOLP

Ref.

tags: yahoo_maps_api openstreetmap

Posted by NI-Lab. (@nilab)