ol5.3ex 7 - Lazy Source

「Lazy Source (lazy-source.html) 」を参考に地図を表示してみます。

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

Typically, the source for a layer is provided to the layer constructor. If you need to set a layer source after construction, this can be done with the layer.setSource() method.

The layer in the map above is constructed with no source. Use the links below to set/unset the layer source. A layer is not rendered until its source is set.

一般的に、レイヤのソースはレイヤコンストラクタに提供されます。構築の後にレイヤソースを設定したい場合は、layer.setSource() メッソッドを使って実行できます。

上記マップのレイヤは、ソース無しで構築されます。レイヤソースを 設定/未設定するために下記のリンクを使います。レイヤは、ソースが設定されるまで、描画されません。

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

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

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

var source = new OSM();
/** source（option）
 * Source for this layer. 
 * レイヤのソース。（ol5 API）
 */

var layer = new TileLayer();
/** 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）
 */

var map = new Map({

 layers: [layer],
 /** layers [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）。これが定義されていない場合、レイヤの
  * ないマップが描画されます。レイヤは提供された順番に描画
  * されるので、例えば、ベクタレイヤがタイルレイヤの上に表
  * 示するよう望むなら、タイルレイヤの後に来なければならな
  * いことに注意してください。（ol5 API）
  */

 target: 'map',
 /** target [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 
  * のために module：ol/Map~Map#setTarget が呼び出されなけ
  * ればなりません。
  * （ol5 API）
  */

 view: new View({
 /** view [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（ビュー）。これが構築時に指定され
  * ていないか、module：ol/Map~Map#setView を介さなければ、
  * 取得されるレイヤソースはありません。
  * （ol5 API）
  */

  center: [0, 0],
  /** 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: 2
  /** 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）
   */

 })
});

document.getElementById('set-source').onclick = function() {
/** 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]）
 */

 layer.setSource(source);
 /** setSource(source)
  * Set the layer source.
  * レイヤソースを設定します。
  * （ol5 API）
  */

};

document.getElementById('unset-source').onclick = function() {
 layer.setSource(null);
};

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

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

<!doctype html>
<html>
 <head>
  <title>Lazy Source</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>

  <style>
   button.code {
    font-family: Monaco,Menlo,Consolas,"Courier New",monospace;
    font-size: 12px;
    padding: 5px;
    margin: 0 5px;
   }
  </style>

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

  <button id="set-source" class="code">layer.setSource(source)</button>
  <button id="unset-source" class="code">layer.setSource(null)</button>

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

npm start を実行します。

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

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

http://localhost:1234

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

layer.setSource(source)

layer.setSource(null)