2 - ol3.4ex 109b - Static image example 2

「static-image.js（2109-ol3ex.js）」は、マップを表示するための JavaScript ファイルです。

「2109-ol3ex.js」

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

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

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

 code: 'xkcd-image',
 /** code
  * The SRS identifier code, e.g. EPSG:4326.（ol3 API）
  * （2 - ol3ex 110b - Zoomify example 2 も参照してください） 
  */

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

 extent: extent
 /** extent
  * The validity extent for the SRS.
  * SRS の有効範囲。（ol3 API）
  */

});

var map = new ol.Map({
 layers: [
  new ol.layer.Image({

   source: new ol.source.ImageStatic({
   /** source.ImageStatic
    * A layer source for displaying a single, static image.
    * 単一で静的（東映データが付加されていない）画像の表示のため
    * のレイヤソース。（ol3 API）
    */

    attributions: [

     new ol.Attribution({
     /** ol.Attribution
      * An attribution for a layer source.
      * レイヤソースの属性（ol3 API）
      */

      html: '&copy; <a href="http://xkcd.com/license.html">xkcd</a>'

     })
    ],

    url: 'http://imgs.xkcd.com/comics/online_communities.png',

    projection: projection,

    imageExtent: extent
    /** imageExtent
     * Extent of the image in map coordinates. This is the 
     * [left, bottom, right, top] map coordinates of your 
     * image.
     * マップ座標中の画像の範囲。これは、画像の[左、下、右、上]
     * マップ座標。（ol3 API）
     */

   })
  })
 ],
 target: 'map',
 view: new ol.View({
  projection: projection,

  center: ol.extent.getCenter(extent),
  /** ol.extent.getCenter(extent)
   * Name: extent, Type: ol.Extent, Description: Extent
   * Return: Center.（ol2 API）
   */

  zoom: 2
 })
});