前のセクションでは、標準規格に準拠した WMS とカスタムタイルキャッシュに基づいてレイヤを表示しました。オンライン地図（または少なくともタイルマップクライアント）は、主に所有権のあるマップタイルサービスが、利用されやすさによって広く知れ渡っています。OpenLayers は、そのAPIを通して、これらの所有権のあるサービスを利用したレイヤタイプが用意されています。
このセクションでは、Bing のタイルを使用したレイヤーを追加することによって、前のセクションで開発された例を構築していきます。
OpenLayers 3 と Google マップを統合する方法を見るには、次を確認してください。：http://openlayers.org/en/v3.0.0/examples/google-map.html
2.3.1. Bing！
Bing のレイヤーを追加してみましょう。
タスク
1. map.html ファイルで、OSM ソースが設定されている場所を探して、ol.source.BingMaps に変更してください。
source: new ol.source.BingMaps({
imagerySet: 'Road',
key: 'Ak-dzM...（省略）'
})
注意：Bing のタイル API は、マッピングアプリケーションで使用する API キーを登録する必要があります。ここでの例では、製品に使用することはできない API キーを使用しています。製品に Bing のレイヤを使用するには、https://www.bingmapsportal.com/ で API キーを登録します。
（訳注：公開方法によってライセンスの種類が違うので、詳しくは上記サイトを参照して下さい。）
2. 変更を保存して、ブラウザで map.html をリロードします。http://localhost:8000/ol_workshop/map.html（訳注：Webサーバが動作している任意のディレクトリなら、対応するアドレス。以降、これに準じます。）
Bing Maps のソースからのタイルマップ。
2.3.1.1. 完全な演習例
改訂した map.html ファイルは、次のようになります。
<!doctype html> <html lang="en">
<head>
<link rel="stylesheet" href="ol3/ol.css" type="text/css">
<style>
#map {
height: 256px;
width: 512px;
}
.ol-attribution a {
color: black;
}
</style>
<script src="ol3/ol.js" type="text/javascript"></script> <title>OpenLayers 3 example</title> </head>
<body> <h1>My Map</h1> <div id="map"></div>
<script type="text/javascript">
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.BingMaps({
imagerySet: 'Road',
key: 'Ak-dzM...（省略）'
})
})
],
view: new ol.View({
center: ol.proj.transform([-93.27, 44.98], 'EPSG:4326', 'EPSG:3857'),
zoom: 9
})
});
</script>
</body>
</html>
0 件のコメント:
コメントを投稿