ついでにiOS版iPhotoの地図(Apple Map)も乗せてみた。
⇒ OpenStreetMap and Apple Map on YOLP
宮城県石巻市付近の地図の比較、スクリーンショット。
OpenStreetMap
iOS版iPhotoの地図
Yahoo!地図の標準地図
Yahoo!地図の航空写真
震災後の航空写真
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;
地図の比較用に、いくつかスクリーンショット。
Ref.
- OpenStreetMap and Apple Map on YOLP
- [ヅ] Google Maps API の上に OpenStreetMap を乗せてみた
- [ヅ] iOS版iPhotoのマップが古地図みたいなデザイン
- OpenStreetMap Japan | 自由な地図をみんなの手に/The Free Wiki World Map
- Apple Map Tiles
- Yahoo!デベロッパーネットワーク - YOLP(地図) - JavaScriptマップ
- Yahoo!デベロッパーネットワーク - YOLP(地図) - JavaScriptマップ - リファレンス - Layerクラス
- Slippy map tilenames - OpenStreetMap Wiki
- 【A-3】次世代ジオロケーション サービスの開発手法 河合太郎 氏
- JavaScriptマップAPIで被災後の航空写真が使えるようになりました。 (Yahoo! JAPAN Tech Blog)
- 平成23年(2011年)東北地方太平洋沖地震による被災地の空中写真
tags: yahoo_maps_api openstreetmap
Posted by NI-Lab. (@nilab)