ol5.3ex 9 - Static Image

「Static Image (static-image.html) 」を参考に地図を表示してみます。

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

This example uses a static image as a layer source. The map view is configured with a custom projection that translates image coordinates directly into map coordinates.

この例はレイヤソースとしてスタティックイメージ（静止画像）を使います。マップビューは画像座標を直接地図座標に変換するカスタム投影法で設定されます。

次の内容で 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 {getCenter} from 'ol/extent';
import ImageLayer from 'ol/layer/Image';
import Projection from 'ol/proj/Projection';
import Static from 'ol/source/ImageStatic';

// Map views always need a projection.  Here we just want 
// to map imagecoordinates directly to map coordinates, 
// so we create a projection that uses the image extent 
// in pixels.
// マップビューは常に投影法が必要です。ここでは、単に、直接マッ
// プ座標へ画像座標をマップしたいので、ピクセル単位で画像の範囲
// を使用する投影法を作成します。

var extent = [0, 0, 1024, 968];

var projection = new Projection({
/** 
 *  ol/proj/Projection~Projection
 * Projection definition class. One of these is created 
 * for each projection supported in the application and 
 * stored in the module:ol/proj namespace. You can use 
 * these in applications, but this is not required, as 
 * API params and options use 
 * module:ol/proj~ProjectionLike which means the simple 
 * string code will suffice.
 * 投影法定義クラス。これらの一つは、アプリケーションでサポー
 * トされ、module:ol/proj 名前空間に格納されている各投影法に
 * 対して作成されます。アプリケーションでこれらを使用すること
 * ができますが、API のパラメータとオプションは、単純な文字列
 * コードで十分であることを意味する 
 * module:ol/proj~ProjectionLike を使用するので、これは必要
 * ありません。（ol5 API）
 */

 code: 'xkcd-image',
 /** code [Projection(options)]
  * The SRS identifier code, e.g. EPSG:4326.
  * SRS 識別コード。例えば、EPSG:4326。
  * （ol5 API） 
  */

 units: 'pixels',
 /** units [Projection(options)]
  * Units. Required unless a proj4 projection is defined 
  * for code.
  * 単位。proj4 プロジェクションがコードとして定義されていな
  * ければ必要です。
  * （ol5 API）
  */

 extent: extent
 /** extent [Projection(options)]
  * The validity extent for the SRS.
  * SRS の有効範囲。
  * （ol5 API）
  */

});

var map = new Map({

 layers: [
 /** 
  * 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）
  */

  new ImageLayer({
  /**
   *  ol/layer/Image~ImageLayer
   * Server-rendered images that are available for 
   * arbitrary extents and resolutions.
   * 任意の範囲と解像度に有効なサーバ描画イメージ。
   * （ol5 API）
   */

   source: new Static({
   /**
    *  source [ImageLayer(options)]
    * Source for this layer.
    * （ol5 API）
    */

   /** 
    *  ol/source/ImageStatic~Static 
    * A layer source for displaying a single, static image.
    * 単一で静的（投影データが付加されていない）画像の表示の
    * ためのレイヤソース。
    * （ol5 API）
    */

    attributions: '&amp:copy; <a href="http://xkcd.com/license.html">xkcd</a>',
    /** 
     *  attributions [Static(options)]
     * Attributions.
     * アトリビューション（属性）。
     * （ol5 API）
     */

    url: 'https://imgs.xkcd.com/comics/online_communities.png',
    /** 
     *  url [Static(options)]
     * Image URL.
     * 画像 URL。
     * （ol5 API）
     */

    projection: projection,
    /** 
     *  projection [Static(options)]
     * Projection.
     * 投影法。
     * （ol5 API）
     */

    imageExtent: extent
    /** 
     *  imageExtent [Static(options)]
     * Extent of the image in map coordinates. This is the 
     * [left, bottom, right, top] map coordinates of your 
     * image.
     * マップ座標中の画像の範囲。これは、画像の[左、下、右、上]
     * マップ座標。
     * （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）
  */

  projection: projection,
  /** 
   *  projection[new View(opt_options)]
   * The projection. The default is Spherical Mercator.
   * 投影法。デフォルト値は、Spherical Mercator（EPSG:3857）。
   * （ol5 API）
   */

  center: getCenter(extent),
  /**
   *  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  
   * usedto calculate the initial resolution for the view. 
   * The initial resolution is determined using the 
   * #constrainResolution method.
   * resolution（解像度）が定義されていない場合のみ使用されま
   * す。view の初期 resolution（解像度）を計算するために使用
   * される zoom（ズーム）レベル。初期 resolution は、
   * #constrainResolution メソッドを使用して決定されます。
   * （ol5 API）
   */

  maxZoom: 8
  /**
   *  maxZoom[new View(opt_options)]
   * The maximum zoom level used to determine the 
   * resolution constraint. It is used together with 
   * minZoom (or maxResolution) and zoomFactor. Note that 
   * if minResolution is also provided, it is given 
   * precedence over maxZoom.
   * 解像度制約を決定するために使用される最大ズームレベル。
   * rminZoom（または、 maxResolution）、zoomFactor と共に
   * 使用されます。minResolution も提供される場合、maxZoom 
   * より優先されることに注意してください。
   * （ol5 API）
   */

 })
});

次に 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>

 </head>
 <body>
  <div id="map" class="map"></div>
  <script src="./index.js"></script>
 </body>
</html>

npm start を実行します。

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

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

http://localhost:1234

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