前のセクションでは、標準規格に準拠した WMS とカスタムタイルキャッシュに基づいてレイヤを表示しました。オンライン地図（または少なくともタイルマップクライアント）は、主に所有権のあるマップタイルサービスが、利用されやすさによって広く知れ渡っています。OpenLayers は、そのAPIを通して、これらの所有権のあるサービスを利用したレイヤタイプが用意されています。
このセクションでは、Bing のタイルを使用したレイヤーを追加することによって、前のセクションで開発された例を構築していきます。
OpenLayers 3 と Google マップを統合する方法を見るには、次を確認してください。：http://ol3js.org/en/master/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-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3'
})
注意：Bing のタイル API は、マッピングアプリケーションで使用する API キーを登録する必要があります。ここでの例では、生産に使用することはできない API キーを使用しています。生産に Bing のレイヤを使用するには、https://www.bingmapsportal.com/ で API キーを登録します。
（訳注：公開方法によってライセンスの種類が違うので、詳しくは上記サイトを参照して下さい。）
2. 変更を保存して、ブラウザで map.html をリロードします。http://localhost:8080/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 ul, .ol-attribution a, .ol-attribution a:not([ie8andbelow]) {
color: black !important;
}
</style>
<title>OpenLayers 3 example</title> <script src="ol3/ol.js" type="text/javascript"></script> </head>
<body> <h1>My Map</h1> <div id="map"></div>
<script type="text/javascript">
var map = new ol.Map({
target: 'map',
renderer: 'canvas',
layers: [
new ol.layer.Tile({
source: new ol.source.BingMaps({
imagerySet: 'Road',
key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3'
})
})
],
view: new ol.View2D({
center: ol.proj.transform([-93.27, 44.98], 'EPSG:4326', 'EPSG:3857'),
zoom: 9
})
});
</script>
</body>
</html>
0 件のコメント:
コメントを投稿