OpenLayersを使ってみる。[Chapter 14]
OpenLayersでThird Party APIsを使う。Google Maps編[Chapter 13] に引き続き、OpenLayersのThird party APIsについての基本を学んでおきます。
Third party APIsとは、WEB Mapを提供しているGoogle Maps、Yahoo Maps、Bing(Microsoft) Maps、OpenstreetMapのAPIをOpenLayersで使ってみようと言うことです。
OpenLayers 2.10 Beginner's Guideなる書籍の章立てにあわせて、OpenLayersの使い方を学んでいきます。
では、今回は、Yahoo Maps Version3について学んでいきます。
Yahoo Maps APIを使う。
注意) OpenLayers-2.12ではYahoo Mapsの利用は推奨されていません。 したがって、今回はOpenLayer-2.10を利用します。
まずは、Yahoo Mapsの標準的な使い方です。
まずは、以下のcodeを入力します。
保存先は、c:￥ms4w￥apache￥htdocs￥openlayers2_12￥chapter5￥にしておきます。
ファイル名は、chapter5_ex3_yahoo.htmlで保存します。
[html]
<!DOCTYPE html>
<html lang=’ja’>
<head>
<meta charset=’utf-8′ />
<script src="http://api.maps.yahoo.com/ajaxymap?v=3.0&appid=euzuro-openlayers"></script>
<script type=’text/javascript’ src=’http://openlayers.org/api/2.10/OpenLayers.js’></script>
<script type=’text/javascript’>
var map;
function init() {
//Create the map object
map = new OpenLayers.Map(‘map_element’);
//Hybrid Layer
var yahoo_hybrid = new OpenLayers.Layer.Yahoo(
"Hybrid",
{type: YAHOO_MAP_HYB, numZoomLevels: 24}
);
//Satellite Layer
var yahoo_satellite = new OpenLayers.Layer.Yahoo(
"Satellite",
{type: YAHOO_MAP_SAT, numZoomLevels: 20}
);
//Streets (Default) Layer
var yahoo_street = new OpenLayers.Layer.Yahoo(
"Street",
{}
);
//Add the Yahoo map layers
map.addLayers([yahoo_hybrid, yahoo_satellite, yahoo_street]);
//Add a layer switcher control
map.addControl(new OpenLayers.Control.LayerSwitcher());
// Zoom the map to the max extent
if(!map.getCenter()){
map.zoomToMaxExtent();
}
}
</script>
</head>
<body onload=’init();’>
<div id=’map_element’ style=’width: 500px; height: 500px;’></div>
</body>
</html>
[/html]
保存後、FireFoxを立ち上げて、http://localhost/openlayers2_12/chapter5/chapter5_ex3_yahoo.htmlと入力して、FireFoxを開いくと
な感じでYahoo Mapが表示されます。
そして、LayerSwitcherをclickするとGoogle mapの表示typeを
のように変更できます。
Yahoo Maps ではOpenLayersの参照先を
<script type='text/javascript' src='http://openlayers.org/api/2.10/OpenLayers.js'></script>
に変更します。
そして、Yahoo Maps API を使うには、
<script src="http://api.maps.yahoo.com/ajaxymap?v=3.0&appid=euzuro-openlayers"></script>
が必ず必要になります。
appidは別途取得する必要がありますが、とりあえずはexampleのappidを利用します。
Yahoo Maps APIの詳細は、YOLP(地図)-Yahoo!デベロッパーネットワークを参考にしてください。
Yahoo Map layer objectを作成する。
次に、Yahoo Map layer objectを作成します。基本的には、Google Maps APIと同様なformatになります。
var yahoo_layer_object = new OpenLayers.Layer.Yahoo( 'Layer Name', {Properties} );
でOpenLayers.Layer.Yahoo(…);でobjectを作成します。
'Layer Name'は、{String}で表示する名前
{Properties}は、YahooLayerのpropertiesを設定します。
Yahoo layer properties
Yahoo layer propertiesはいくつかありますが、特にtypeの設定で、道路地図や地形図、衛星画像などを表示します。
例えば、
var google_layer_V3 = new OpenLayers.Layer.Yahoo( 'Yahoo Map Layer', {type: YAHOO_MAP_***} );
のように設定します。
次の表はYAHOO_MAP_●●●のTYPEの一覧です。
| Type | Description |
|---|---|
| YAHOO_MAP_HYB | Displays a hybrid map consisting of the satellite map overlaid with the regular street map. |
| YAHOO_MAP_SAT | Displays satellite photography. |
| YAHOO_MAP_REG | Displays a street map. This is the default type value, so if type is not passed in this will be used. |
OpenLayers.Layer.Yahooに詳しくpropertiesやfunctionの説明があります。
今回のまとめ
OpenLayersによるThird Party APIs Yahoo Mapsの基本を学びました。
OpenLayers-2.11までは標準として実装されていますが、OpenLayers-2.12からは実装されていません。
2.12以降は、使わなくなる可能性が高いです。
次回は、VirtualEarthの third party mapping APIsについて学んでいきます。
また、本tutorialは、htmlやCSSやJavaScriptの基本的なことはある程度理解している前提で今後も話を進めていきます。また、誤字、脱字、spell間違いや勘違いも多々出てくると考えられます。
それは違うじゃん！！とかいろんな意見をいただければと思います。
そこんところ ヨロシク～～！！
最近のコメント