2 - ol3-beta.5ex 4b - Single image WMS with custom projection example 2

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

「204-ol3ex.js」

var projection = ol.proj.configureProj4jsProjection({

/*
 * code: 'EPSG:21781',
 * extent: [485869.5728, 76443.1884, 837076.5648, 299941.7864]
 * 「EPSG:21781」が適用される範囲
 *（Spatial Reference[http://spatialreference.org/ref/epsg/ch1903-lv03/]参照）
 */

  code: 'EPSG:2451',
  extent: [-85044.6807, -406697.3730, 96656.4509, -8388.7498]
});

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

 
var layers = [
 new ol.layer.Image({
  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">' +
 *   'Pixelmap 1:1000000 / geo.admin.ch</a>'
 */

   url: 'http://localhost/cgi-bin/mapserv?',
//   crossOrigin: 'anonymous',
   attributions: [new ol.Attribution({
    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'),
   extent: extent
    })
  }),

  new ol.layer.Image({
   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'),
   extent: extent
  })
 })
];

var map = new ol.Map({
  layers: layers,
  // 'example-behavior.js' により URL にある renderer を返します

  renderer: exampleNS.getRendererFromQueryString(),
  target: 'map',
  view: new ol.View2D({
   projection: projection,
//  center: [660000, 190000],
  center: [-54250, -29350],
  extent: extent,
//  zoom: 2
  zoom: 5
  })
});