ol5.3ex 3 - Bing Maps

「Bing Maps (bing-maps.html) 」を参考に地図を表示してみます。

Microsoft の 「Custom Maps API for Business | Bing Maps or Enterprise（https://www.microsoft.com/en-us/maps/）」の「Why Bing Maps?」に次のようにあります。

Why Bing Maps?
A Microsoft Cloud Service trusted by enterprise customers worldwide, the Bing Maps platform offers all-inclusive pricing, 24/7 enterprise-grade support at no charge, and flexible licensing.

なぜ Bing Maps?
世界のエンタープライズ分野の顧客によって信頼されているマイクロソフトクラウドサービス、Bing Maps プラットフォームは全部を含めた値段と、24/7のエンタープライズグレードサポートを課金無しで、柔軟なライセンスを提供します。

「Map Control API Reference」の「MapTypeEventArgs Object（https://msdn.microsoft.com/en-us/library/mt761725.aspx）」に「newMapTypeId」と「oldMapTypeId」があります。この例「Bing Maps」では、表示されないマップ（Collins Bart）があります。

説明に次のようにあります。

When the Bing Maps tile service doesn't have tiles for a given resolution and region it returns "placeholder" tiles indicating that. Zoom the map beyond level 19 to see the "placeholder" tiles. If you want OpenLayers to display stretched tiles in place of "placeholder" tiles beyond zoom level 19 then set maxZoom to 19 in the options passed to ol/source/BingMaps.

Bing Maps タイルサービスに与えられる解像度と範囲のタイルがないとき、それを示す "placeholder（プレースホルダ）" タイルを返します。 "placeholder" タイルを見るためにレベル19を超えて map をズームします。 ズームレベル19を超える "プレースホルダ" タイルの場所に拡大タイルを表示することを OpenLayers に望むなら、 ol/source/BingMaps へ渡される option（オプション）で maxZoom を19に設定します。

次の内容で index.js を作成します。

user@deb9-vmw:~/new-project$ vim index.js

import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import BingMaps from 'ol/source/BingMaps';

var styles = [
 'Road',
 'RoadOnDemand',
 'Aerial',
 'AerialWithLabels',
 'collinsBart',
 'ordnanceSurvey'
];
var layers = [];
var i, ii;

for (i = 0, ii = styles.length; i < ii; ++i) {

 layers.push(new TileLayer({
 /** Array.prototype.push()
  * The push() method adds one or more elements to the end 
  * of an array and returns the new length of the array.
  * push() メソッドは、配列の末尾に 1 つ以上の要素を追加す
  * ることができます。また戻り値として新しい配列の要素数を返
  * します。
  * （MDN[https://developer.mozilla.org/en-US/docs/Web/
  * JavaScript/Reference/Global_Objects/Array/push]）
  */

 /** ol/layer/Tile~TileLayer 
  * For layer sources that provide pre-rendered, tiled 
  * images in grids that are organized by zoom levels for 
  * specific resolutions. 
  * プリレンダリング（事前描画）を提供するレイヤソースのため
  * の、特定の解像度でのズームレベルによって編成されているグ
  * リッドのタイルイメージ。（ol5 API）
  */

  visible: false,
  /** visible（option）
   * Visibility.
   * 目に見えること。（ol5 API）
   */

  preload: Infinity,
  /** preload（option）
   * Preload. Load low-resolution tiles up to preload 
   * levels. 0 means no preloading.
   * プリ（事前）ロード。プリロードレベルまで低解像度のタイ
   * ルをロードします。デフォルトのプリロードは、全くプリロー
   * ドしないことを意味する 0 です。（ol5 API）
  */

  source: new BingMaps({
  /** source（option）
   * Source for this layer. Required.
   * レイヤのソース。必須。（ol5 API）
   */

  /** ol/source/BingMaps~BingMaps 
   * Layer source for Bing Maps tile data.
   * Bing Maps タイルデータのレイヤソース。（ol5 API）
   */

   key: 'Your Bing Maps Key from http://www.bingmapsportal.com/ here',
   /** key（option）
    * Bing Maps API key. Get yours at 
    * http://www.bingmapsportal.com/.
    * Bing Maps API キー。取得は、
    * http://www.bingmapsportal.com/（ol5 API）
    */

   imagerySet: styles[i]
   /** imagerySet（option）
    * Type of imagery. 
    * 画像の種類。（ol5 API）
    */

   // use maxZoom 19 to see stretched tiles instead of the 
   // BingMaps "no photos at this zoom level" tiles
   // BingMaps の "no photos at this zoom level" タイル
   // の替わりに伸ばされたタイルが見えるために maxZoom 19 
   // を使います。
   // maxZoom: 19

  })
 }));
}

var map = new Map({

 layers: layers,
 /** layers[new Map(options)]
  * Layers. If this is not defined, a map with no layers 
  * will be rendered. Note that layers are rendered in 
  * the order supplied, so if you want, for example, a 
  * vector layer to appear on top of a tile layer, it 
  * must come after the tile layer.
  * layers（レイヤ）。これが定義されていない場合、layers の
  * ない map が描画されます。layers は提供される順番で描画さ
  * れ、もし、例えば、タイルレイヤの上部にベクタレイヤを表示
  * したいなら、タイルレイヤの後に来なければなりません。
  * （ol5 API）
  */

 // Improve user experience by loading tiles while 
 // dragging/zooming. Will make zooming choppy on mobile 
 // or slow devices.
 // ドラッグ/ズームの間、タイルをロードすることによってユー
 // ザエクスペリエンス（体験）を向上します。モバイル、また
 // は、遅い機器ではズームをとぎれとぎれにします。

 loadTilesWhileInteracting: true,
 /** loadTilesWhileInteracting[new Map(options)]
  * When set to true, tiles will be loaded while 
  * interacting with the map. This may improve the user 
  * experience, but can also make map panning and zooming 
  * choppy on devices with slow memory. Default is false.
  * true に設定すると、タイルはマップとの対話中にロードされま
  * す。これは、ユーザエクスペリエンスを向上させるだけでなく、
  * 低速メモリを持つデバイス上でマップパンおよびズームをとぎれ
  * とぎれにすることもできます。デフォルトは false です。
  * （ol5 API）
  */

 target: 'map',
 /** target[new Map(options)]
  * The container for the map, either the element 
  * itself or the id of the element. If not specified 
  * at construction time, module:ol/Map~Map#setTarget 
  * must be called for the map to be rendered.
  * map のコンテナ、（HTML）エレメント自身、またはエレメント
  * の id。構築時に指定されていない場合、描画される map のた
  * めにモジュール：ol/Map~Map#setTarget が呼び出されなけれ
  * ばなりません。
  * （ol5 API）
  */

 view: new View({
 /** view[new Map(options)]
  * The map's view. No layer sources will be fetched 
  * unless this is specified at construction time or 
  * through module:ol/Map~Map#setView.
  * map（マップ）の view（ビュー）。これが構築時に指定されて
  * いないか、モジュール：ol/Map~Map#setView を通じてなけれ
  * ば、取得されるレイヤソースはありません。
  * （ol5 API）
  */

 /** View(ol/View)
  * A View object represents a simple 2D view of the map.
  * This is the object to act upon to change the center, 
  * resolution, and rotation of the map.
  * View（ビュー）オブジェクトは、map（マップ）の 単純な 2D 
  * view を表示します。
  * これは、map の center（中心）、resolution（解像度）、
  * rotation （回転）を変換を実行するためのオブジェクトです。
  * （ol5 API）
  */

  center: [-6655.5402445057125, 6709968.258934638],
  /** center[new View(opt_options)]
   * The initial center for the view. The coordinate 
   * system for the center is specified with the 
   * projection option. Layer sources will not be fetched
   * if this is not set, but the center can be set later 
   * with #setCenter.
   * view（ビュー）の初期 center（中心）値。 center の座標
   * 系は、projection（投影法）オプションで指定されます。これ
   * が設定されなければレイヤソースは取得されませんが、center 
   * は #setCenter で後で設定できます。
   * （ol5 API）
   */

  zoom: 13
  /** zoom[new View(opt_options)]
   * Only used if resolution is not defined. Zoom level 
   * used to calculate the initial resolution for the 
   * view. The initial resolution is determined using 
   * the #constrainResolution method.
   * resolution（解像度）が定義されていない場合のみ使用され
   * ます。view の初期 resolution（解像度）を計算するために
   * 使用されるzoom（ズーム）レベル。初期 resolution は、
   * #constrainResolution メソッドを使用して決定されます。
   * （ol5 API）
   */

 })
});

var select = document.getElementById('layer-select');
/** Document.getElementById()
 * The Document method getElementById() returns an 
 * Element object representing the element whose id 
 * property matches the specified string. Since element 
 * IDs are required to be unique if specified, they're a 
 * useful way to get access to a specific element 
 * quickly.
 * If you need to get access to an element which doesn't 
 * have an ID, you can use querySelector() to find the 
 * element using any selector.
 * Document の getElementById() メソッドは、 id プロパティ
 * が指定された文字列に一致する要素を表す Element オブジェ
 * クトを返します。要素の ID は指定されていれば固有であるこ
 * とが求められているため、特定の要素にすばやくアクセスする
 * には便利な方法です。
 * ID を持たない要素にアクセスする必要が ある場合は、
 * querySelector() で何らかのセレクターを使用して要素を検
 * 索することができます。
 * （MDN[https://developer.mozilla.org/ja/docs/Web/API/
 * Document/getElementById]）
 */

function onChange() {
 var style = select.value;
 for (var i = 0, ii = layers.length; i < ii; ++i) {

  layers[i].setVisible(styles[i] === style);
  /** setVisible[TileLayer]
   * Set the visibility of the layer (true or false).
   * layer の visibility（ビジビリティ、目に見えること）
   * （true or false）を設定します。
   * （ol5 API）
   */
 }
}

select.addEventListener('change', onChange);
/** EventTarget.addEventListener()
 * The EventTarget method addEventListener() sets up a 
 * function that will be called whenever the specified 
 * event is delivered to the target. Common targets are
 * Element, Document, and Window, but the target may be 
 * any object that supports events (such as 
 * XMLHttpRequest).
 * addEventListener() works by adding a function or an 
 * object that implements EventListener to the list of 
 * event listeners for the specified event type on the 
 * EventTarget on which it's called.
 * EventTarget.addEventListener() メソッドは、指定された
 * イベントがターゲットに渡されるときにはいつでも呼び出される
 * ファンクションを設定します。一般的なターゲットは、Element、
 * Document、Window ですが、ターゲットは（XMLHttpRequest 
 * のような）イベントをサポートするあらゆるオブジェクトです。
 * addEventListener() は、呼び出される EventTarget の指
 * 定されたイベントタイプためのイベントリスナのリストに 
 * EventListener を実装するファンクション、または、オブジェ
 * クトを追加することによって動作します。
 *（MDN[https://developer.mozilla.org/en-US/docs/Web/API/
 * EventTarget.addEventListener]）
 */

onChange();

次に index.html を作成します。

user@deb9-vmw:~/new-project$ vim index.html

<!doctype html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Bing Maps</title>

  <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
  <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>

 </head>
 <body>
  <div id="map"></div>

  <select id="layer-select">
   <option value="Aerial">Aerial</option>
   <option value="AerialWithLabels" selected>Aerial with labels</option>
   <option value="Road">Road (static)</option>
   <option value="RoadOnDemand">Road (dynamic)</option>
   <option value="collinsBart">Collins Bart</option>
   <option value="ordnanceSurvey">Ordnance Survey</option>
  </select>

  <script src="./index.js"></script>
 <body>
</html>

npm start を実行します。

user@deb9-vmw:~/new-project$ npm start

Webブラウザのアドレス欄に

http://localhost:1234

と入力して Enter キーを押します。