前のセクションでは、標準規格に準拠した WMS（OGC Web Map Service）とカスタムタイルキャッシュに基づいてレイヤを表示しました。オンラインマッピング（または少なくともタイルマップクライアント）は、主に所有権のあるマップタイルサービスが、利用されやすさによって広く知れ渡っています。OpenLayers は、そのAPIを通してこれらの所有権のあるサービスを利用するレイヤタイプが用意されています。
このセクションでは、Bing のタイルを使用するレイヤを追加することによって、前のセクションで開発された例を構築していきます。
2.3.1. Bing！
Bing のレイヤーを追加してみましょう。
タスク
1. map.html ファイルで、OSM ソースが設定されている場所を探して、ol.source.BingMaps に変更してください。
source: new ol.source.BingMaps({
imagerySet: 'Road',
key: 'Ak-dzM...（省略）'
})
（訳注：公開方法によってライセンスの種類が違うので、詳しくは上記サイトを参照して下さい。）
2. 変更を保存して、ブラウザで map.html をリロードします。http://localhost:4000/map.html
Bing Maps のソースからのタイルマップ。
2.3.2. 完全な演習例
改訂した map.html ファイルは、次のようになります。
<!doctype html> <html lang="en">
<head>
<link rel="stylesheet" href="/ol.css" type="text/css">
<style>
#map {
height: 256px;
width: 512px;
}
.ol-attribution a {
color: black;
}
</style>
<script src="/loader.js" type="text/javascript"></script> <title>OpenLayers example</title> </head>
<body> <h1>My Map</h1> <div id="map" class="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.fromLonLat([126.97, 37.56]),
zoom: 9
})
});
</script>
</body>
</html>
0 件のコメント:
コメントを投稿