2 - ol3ex 3c - Single image WMS with custom projection example 3

「wms-image-custom-proj.js（203-ol3ex.js）」は、地図を表示するのに必要な javascript です。

/**
 * Transparent Proj4js support: ol.proj.get() creates and 
 * returns a projection known to Proj4js if it is unknown to 
 * OpenLayers, and registers functions to transform between 
 * all registered projections. EPSG:21781 is known to 
 * Proj4js because its definition was loaded in the html. 
 * Note that we are getting the projection object here to 
 * set the extent. If you do not need this, you do not have 
 * to use ol.proj.get(); simply use the string code in the 
 * view projection below and the transforms will be 
 * registered transparently.
 * 意識されることのない Proj4js をサポートする ol.proj.get（）
 * は、OpenLayersに不明な場合、Proj4jsに知られた投影を作成し返
 * します。そして、すべての登録された投影との間で変換するための 
 * 関数を登録します。EPSG：21781 は、その定義が、html にロード
 * された Proj4js に知られています。私たちは範囲を設定してここ
 * に投影オブジェクトを取得していることに注意してください。これ
 * を必要としない場合は、ol.proj.get（）を使用する必要はありま
 * せん。単純に下のビュー投影の文字列コードを使用して、変換が意
 * 識されることのなく登録されます。
 */

「203-ol3ex.js」

// var projection = ol.proj.get('EPSG:21781');
var projection = ol.proj.get('EPSG:2451');
/** ol.proj.get(projectionLike)
 * Fetches a Projection object for the code specified.
 * 指定されたコードのプロジェクション·オブジェクトを取得
 * （ol3 API）
 */

/**
 * The extent is used to determine zoom level 0. Recommended 
 * values for a projection's validity extent can be found at 
 * http://epsg.io/.
 * extent（範囲）は、ズームレベル0を決定するために使用されます。
 * 投影の有効 extent の推奨値はhttp://epsg.io/で見つけることが
 * できます。
 */

// projection.setExtent([485869.5728, 76443.1884, 837076.5648, 299941.7864]);
projection.setExtent([-85044.6807, -406697.3730, 96656.4509, -8388.7498]);
/** setExtent(extent)
 * Set the validity extent for this projection.
 * この投影の有効範囲を設定します。（ol3 API）
 */

// 「EPSG:21781」が適用される範囲
//（Spatial Reference[http://spatialreference.org/ref/epsg/ch1903-lv03/]参照）

//var extent = [420000, 30000, 900000, 350000];
var extent = [-63100, -34500, -45400, -24200];

 
var layers = [
 new ol.layer.Image({
 /** ol.layer.Image
  * Server-rendered images that are available for arbitrary 
  * extents and resolutions. 
  * 任意の範囲と解像度で利用可能な server-rendered イメージ。
  * （ol3 API）
  */
  extent: extent,
  source: new ol.source.ImageWMS({
   /** ol.source.ImageWMS
    * Source for WMS servers providing single, untiled images.
    * 単一、アンタイル（タイル状でない）イメージを提供する WMS 
    * のためのソース。（ol3 API）
    */

/**
 * url: 'http://wms.geo.admin.ch/',
 * crossOrigin: 'anonymous',
 * attributions: [new ol.Attribution({
 *  html: '© ' +
 *   '<a href="http://www.geo.admin.ch/internet/geoportal/' +
 *   'en/home.html">' +
 *   'Pixelmap 1:1000000 / geo.admin.ch</a>'
 */

   url: 'http://localhost/cgi-bin/mapserv?',
   // crossOrigin: 'anonymous',
   /** 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）
    */
   attributions: [new ol.Attribution({
   /** ol.Attribution
    * An attribution for a layer source.
    * レイヤソースの属性（ol3 API）
    */
    html: '基盤地図情報'
   })],

   params: {
    // 'LAYERS': 'ch.swisstopo.pixelkarte-farbe-pk1000.noscale',
    'MAP' : '/home/user/mapfile/nippon_bmi_akiruno_pgis.map',
    'LAYERS': 'akiruno_kukaku',
    'VERSION': '1.1.1'
    // 'FORMAT': 'image/jpeg'
   },

   serverType: /** @type {ol.source.wms.ServerType} */ ('mapserver'),
   /** @type 
    * 値のタイプ（型）の説明 - 式などで表示
    * （@use JSDoc[http://usejsdoc.org/]より）
    */
   })
  }),

  new ol.layer.Image({
   extent: extent,
   source: new ol.source.ImageWMS({

/**
 * url: 'http://wms.geo.admin.ch/',
 * crossOrigin: 'anonymous',
 * attributions: [new ol.Attribution({
 *  html: '© ' +
 *   '<a href="http://www.geo.admin.ch/internet/geoportal/' +
 *   'en/home.html">' +
 *   'National parks / geo.admin.ch</a>'
 */

   url: 'http://localhost/cgi-bin/mapserv?',
//   crossOrigin: 'anonymous',
   attributions: [new ol.Attribution({
    html: '基盤地図情報'
   })],

// params: {'LAYERS': 'ch.bafu.schutzgebiete-paerke_nationaler_bedeutung'},
   params: {
    'MAP' : '/home/user/mapfile/nippon_bmi_akiruno_pgis.map',
    'LAYERS': 'akiruno_kenchiku',
    'VERSION': '1.1.1'
   },

   serverType: /** @type {ol.source.wms.ServerType} */ ('mapserver'),
  })
 })
];

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

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

  target: 'map',
  view: new ol.View({
   projection: projection,
//  center: ol.proj.transform([8.23, 46.86], 'EPSG:4326', 'EPSG:21781'),
   center: ol.proj.transform([139.234, 35.734], 'EPSG:4326', 'EPSG:2451'),
  /** 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）
   */
   extent: extent,
//  zoom: 2
   zoom: 5
  })
});