2014年9月11日木曜日

1 - ol3 8 - Workshop 2.3. Proprietary Raster Layers

2.3. 所有権のあるラスタレイヤ
前のセクションでは、標準規格に準拠した 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 件のコメント: