2 - ol3.11ex 138b - Image reprojection example 2

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

「2138-ol3ex.js」

proj4.defs('EPSG:27700', '+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 ' +
 '+x_0=400000 +y_0=-100000 +ellps=airy ' +
 '+towgs84=446.448,-125.157,542.06,0.15,0.247,0.842,-20.489 ' +
 '+units=m +no_defs');

var imageExtent = [0, 0, 700000, 1300000];

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

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

   source: new ol.source.MapQuest({layer: 'osm'})
   /** ol.source.MapQuest
    * Layer source for the MapQuest tile server.
    * MapQuest タイルサーバのレイヤソース。（ol3 API
    * 2 - ol3ex 23b - MapQuest example 2 参照）
    */

  }),

  new ol.layer.Image({
  /** ol.layer.Image
   * Server-rendered images that are available for arbitrary 
   * extents and resolutions. 
   * 任意の範囲と解像度で利用可能な server-rendered イメージ。
   * （ol3 API）
   */

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

    url: 'http://upload.wikimedia.org/wikipedia/commons/thumb/1/18/' +
     'British_National_Grid.svg/2000px-British_National_Grid.svg.png',

    crossOrigin: '',
    /** crossOrigin
     * The crossOrigin attribute for loaded images. Note 
     * that you must provide a crossOrigin value if you 
     * are using the WebGL renderer or if you want to 
     * access pixel data with the Canvas renderer. See 
     * https://developer.mozilla.org/en-US/docs/Web/HTML/
     * CORS_enabled_image for more detail.
     * ロードされたイメージの crossOrigin属性。WebGLのレンダ
     * ラーを使用している場合、または、キャンバスレンダラでピ
     * クセルデータにアクセスする場合、crossOrigin 値を提供な
     * ければならないことに注意してください。詳細は 
     * https://developer.mozilla.org/en-US/docs/Web/HTML/
     * CORS_enabled_image を参照してください。（ol3 API）
     */

    projection: 'EPSG:27700',

    imageExtent: imageExtent
    /** imageExtent
     * Extent of the image in map coordinates. This is the 
     * [left, bottom, right, top] map coordinates of your 
     * image. Required.
     * マップ座標の画像の範囲が調整。これは、イメージのマップ座標
     * [左、下、右、上]です。 必須。（ol3 API）
     */

   })
  })
 ],

 renderer: common.getRendererFromQueryString(),
// 'common.js' により URL にある renderer を返します

 target: 'map',
 view: new ol.View({

  center: ol.proj.transform(ol.extent.getCenter(imageExtent),
   'EPSG:27700', 'EPSG:3857'),
  /** ol.proj.transform(coordinate, source, destination)
   * Transforms a coordinate from source projection to 
   * destination projection. This returns a new coordinate 
   * (and does not modify the original).
   * ソース投影から変換先投影に座標変換します。これは、新しい座標
   * を返します（オリジナルを変更しません）。（ol3 API）
   */

  /** ol.extent.getCenter(extent)
   * Get the center coordinate of an extent.
   * 範囲の中心座標を取得します。（ol3 API）
   */

  zoom: 4
 })
});