2014年6月18日水曜日

2 - ol3-beta.5ex 2c - Tiled WMS with Proj4js projection example 3

「wms-custom-proj.js(202-ol3ex.js)」は、地図を表示するのに必要な javascript です。

「202-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.Tile({
  source: new ol.source.TileWMS({
/*
 * url: 'http://wms.geo.admin.ch/',
 * crossOrigin: 'anonymous',
 ** CORS(Cross-Origin Resource Sharing) header を設定
 ** 参考:HTTP access control (CORS)
 ** [https://developer.mozilla.org/ja/docs/HTTP_access_control]
 * 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',
//    'FORMAT': 'image/jpeg' //塗りつぶし以外が黒くなるため
    'VERSION': '1.1.1' // 1.3.0 では表示できませんでした
   },
   extent: extent,
   serverType: 'mapserver'
  })
 }),
 new ol.layer.Tile({
  source: new ol.source.TileWMS({
/*
 * 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'
   },
   extent: extent,
   serverType: 'mapserver'
  })
 })
];
var map = new ol.Map({
 controls: ol.control.defaults().extend([
  new ol.control.ScaleLine({
   units: 'metric'
  })
 ]),
 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: 5
 })
});



0 件のコメント: