2014年6月18日水曜日

2 - ol3-beta.5ex 5b - WMS without client projection example 2

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

「205-ol3ex.js」
var layers = [
// 'ol.layer.Tile' では地図が表示できませんでした
//  new ol.layer.Tile({
//    source: new ol.source.TileWMS({
 new ol.layer.Image({
  source: new ol.source.ImageWMS({
   attributions: [new ol.Attribution({
/*  html: '© ' +
 *   '<a href="http://www.geo.admin.ch/internet/geoportal/' +
 *   'en/home.html">' +
 *   'Pixelmap 1:1000000 / geo.admin.ch</a>'
 */
    html: '基盤地図情報'
   })],
// crossOrigin: 'anonymous',
   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' では地図が表示できませんでした
   },
// url: 'http://wms.geo.admin.ch/',
   url: 'http://localhost/cgi-bin/mapserv?'
  })
 }),
 new ol.layer.Image({
  source: new ol.source.ImageWMS({
   attributions: [new ol.Attribution({
/*
 *  html: '© ' +
 *  '<a href="http://www.geo.admin.ch/internet/geoportal/' +
 *  'en/home.html">' +
 *  'National parks / geo.admin.ch</a>'
 */
    html: '基盤地図情報'
   })],
// crossOrigin: 'anonymous',
// 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: 'mapserver',
// url: 'http://wms.geo.admin.ch/'
   url: 'http://localhost/cgi-bin/mapserv?'
  })
 })
];
// A minimal projection object is configured with only the SRS code and the map
// units. No client side coordinate transforms are possible with such a
// projection object.
var projection = new ol.proj.Projection({
// code: 'EPSG:21781',
  code: 'EPSG:2451',
  units: 'm'
});
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({
// center: [660000, 190000],
  center: [-54250, -29350],
  projection: projection,
// zoom: 9
  zoom: 12 // 座標系の設定がない場合とある場合で数値が違います
 })
});


2 - ol3-beta.5ex 5a - WMS without client projection example 1

「WMS without client projection example
(wms-no-proj.html)」を参考に地図を表示してみます。

HTML ファイルの作成
a Eclipse のメニューの「ファイル」->「ファイルを開く」をクリックします。





b 「ファイルを開く」ウィンドウで、「user」->「mapsite」->「ol3proj」->「v3.0.0-beta.5」->「examples」->「wms-no-proj.html」をクリックして選択し、「OK」ボタンをクリックします。
同じように「wms-no-proj.js」を開きます。




c メニューの「ファイル」->「新規」 -> 「ファイル」をクリックします。



d 「ファイル」ウィンドウで「ol3proj」をクリックして選択し、「ファイル名」を「205-ol3ex.html」と入力し、「次へ」ボタンをクリックします。








e 「File Template」ウィンドウで「HTML 5 Template」をクリックして選択し、「OK」ボタンをクリックします。











f 「wms-no-proj.html」の内容をコピーして「205-ol3ex.html」に貼り付け、修正します。
g 同じように、新規に「205-ol3ex.js」ファイルを作成し、「File Template」ウィンドウで「JavaScript Template」をクリックして選択し、「完了」ボタンをクリックして、「wms-no-proj.js」の内容をコピーして貼り付け、修正します。「wms-no-proj-require.js」も「205-ol3ex-require.js」に貼り付けます。


「205-ol3ex.html」
<!doctype html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="chrome=1">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<!--
  <link rel="stylesheet" href="../css/ol.css" type="text/css">
  <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
  <link rel="stylesheet" href="../resources/layout.css" type="text/css">
  <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
-->
  <!-- ディレクトリ修正 -->
  <link rel="stylesheet" href="v3.0.0-beta.5/css/ol.css" type="text/css">
  <link rel="stylesheet" href="v3.0.0-beta.5/resources/bootstrap/css/bootstrap.min.css" type="text/css">
  <link rel="stylesheet" href="v3.0.0-beta.5/resources/layout.css" type="text/css">
  <link rel="stylesheet" href="v3.0.0-beta.5/resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
  <title>WMS without client projection example</title>
 </head>
 <body>

  <div class="navbar navbar-inverse navbar-fixed-top">
   <div class="navbar-inner">
    <div class="container">
<!--
     <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
-->
      <!-- ディレクトリ修正 -->
     <a class="brand" href="v3.0.0-beta.5/examples/"><img src="v3.0.0-beta.5/resources/logo.png"> OpenLayers 3 Examples</a>
    </div>
   </div>
  </div>
  <div class="container-fluid">
   <div class="row-fluid">
    <div class="span12">
     <div id="map" class="map"></div>
    </div>
   </div>
   <div class="row-fluid">
    <div class="span12">
     <h4 id="title">WMS without client projection example</h4>
     <p id="shortdesc">Example of two WMS layers using the projection EPSG:21781, which is unknown to the client.</p>
     <div id="docs">
<!--
      <p>See the <a href="wms-no-proj.js" target="_blank">wms-no-proj.js source</a> to see how this is done.</p>
-->
       <!-- ファイル修正 -->
      <p>See the <a href="205-ol3ex.js" target="_blank">205-ol3ex.js source</a> to see how this is done.</p>
     </div>
     <div id="tags">wms, projection</div>
    </div>
   </div>
  </div>
<!--
  <script src="jquery.min.js" type="text/javascript"></script>
  <script src="../resources/example-behaviour.js" type="text/javascript"></script>
-->
  <!-- ディレクトリ修正 -->
  <script src="v3.0.0-beta.5/examples/jquery.min.js" type="text/javascript"></script>
  <script src="v3.0.0-beta.5/resources/example-behaviour.js" type="text/javascript"></script>
<!--
  <script src="loader.js?id=wms-no-proj" type="text/javascript"></script>
-->
  <!-- ファイル修正 -->  <!-- ディレクトリ修正 -->
  <script src="loader.js?id=205-ol3ex" type="text/javascript"></script>

 </body>
</html>

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
  })
});

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

「Single image WMS with custom projection example
(wms-image-custom-proj.html)」を参考に地図を表示してみます。

HTML ファイルの作成
a Eclipse のメニューの「ファイル」->「ファイルを開く」をクリックします。





b 「ファイルを開く」ウィンドウで、「user」->「mapsite」->「ol3proj」->「v3.0.0-beta.5」->「examples」->「wms-image-custom-proj.html」をクリックして選択し、「OK」ボタンをクリックします。
同じように「wms-image-custom-proj.js」を開きます。




c メニューの「ファイル」->「新規」 -> 「ファイル」をクリックします。



d 「ファイル」ウィンドウで「ol3proj」をクリックして選択し、「ファイル名」を「204-ol3ex.html」と入力し、「次へ」ボタンをクリックします。








e 「File Template」ウィンドウで「HTML 5 Template」をクリックして選択し、「OK」ボタンをクリックします。











f 「wms-image-custom-proj.html」の内容をコピーして「204-ol3ex.html」に貼り付け、修正します。
g 同じように、新規に「204-ol3ex.js」ファイルを作成し、「File Template」ウィンドウで「JavaScript Template」をクリックして選択し、「完了」ボタンをクリックして、「wms-image-custom-proj.js」の内容をコピーして貼り付け、修正します。「wms-image-custom-proj-require.js」も「204-ol3ex-require.js」に貼り付けます。


「204-ol3ex.html」
<!doctype html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="chrome=1">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<!--
  <link rel="stylesheet" href="../css/ol.css" type="text/css">
  <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
  <link rel="stylesheet" href="../resources/layout.css" type="text/css">
  <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
-->
  <!-- ディレクトリ修正 -->
  <link rel="stylesheet" href="v3.0.0-beta.5/css/ol.css" type="text/css">
  <link rel="stylesheet" href="v3.0.0-beta.5/resources/bootstrap/css/bootstrap.min.css" type="text/css">
  <link rel="stylesheet" href="v3.0.0-beta.5/resources/layout.css" type="text/css">
  <link rel="stylesheet" href="v3.0.0-beta.5/resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
  <title>Single image WMS with custom projection example</title>
 </head>
 <body>
  <div class="navbar navbar-inverse navbar-fixed-top">
   <div class="navbar-inner">
    <div class="container">
<!--
     <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
-->
      <!-- ディレクトリ修正 -->
     <a class="brand" href="v3.0.0-beta.5/examples/"><img src="v3.0.0-beta.5/resources/logo.png"> OpenLayers 3 Examples</a>
    </div>
   </div>
  </div>
  <div class="container-fluid">
   <div class="row-fluid">
    <div class="span12">
     <div id="map" class="map"></div>
    </div>
   </div>
   <div class="row-fluid">
    <div class="span12">
     <h4 id="title">Single image WMS with custom projection example</h4>
     <p id="shortdesc">Example of two single image WMS layers.</p>
     <div id="docs">
      <p>Pixelmap 1:1'000'000 with National Parks overlay using the projection EPSG:21781.</p>
<!--
      <p>See the <a href="wms-image-custom-proj.js" target="_blank">wms-image-custom-proj.js source</a> to see how this is done.</p>
-->
       <!-- ファイル修正 -->
      <p>See the <a href="204-ol3ex.js" target="_blank">204-ol3ex.js source</a> to see how this is done.</p>
     </div>
     <div id="tags">wms, single image, projection</div>
    </div>
   </div>
  </div>
<!--
  <script src="http://cdnjs.cloudflare.com/ajax/libs/proj4js/1.1.0/proj4js-compressed.js" type="text/javascript"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/proj4js/1.1.0/defs/EPSG21781.js" type="text/javascript"></script>
-->
  <!-- ディレクトリ・ファイル修正 -->
  <script src="proj4js/lib/proj4js-compressed.js" type="text/javascript"></script>
  <script src="proj4js/lib/defs/EPSG2451.js" type="text/javascript"></script>
<!--
  <script src="jquery.min.js" type="text/javascript"></script>
  <script src="../resources/example-behaviour.js" type="text/javascript"></script>
-->
  <!-- ディレクトリ修正 -->
  <script src="v3.0.0-beta.5/examples/jquery.min.js" type="text/javascript"></script>
  <script src="v3.0.0-beta.5/resources/example-behaviour.js" type="text/javascript"></script>
<!--
    <script src="loader.js?id=wms-image-custom-proj" type="text/javascript"></script>
-->
  <!-- ファイル修正 -->  <!-- ディレクトリ修正 -->
  <script src="loader.js?id=204-ol3ex" type="text/javascript"></script>

 </body>
</html>

2 - ol3-beta.5ex 3b - Single image WMS example 2

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

「203-ol3ex.js」
var layers = [
  new ol.layer.Tile({
    source: new ol.source.MapQuest({layer: 'sat'})
  }),
  new ol.layer.Image({
    source: new ol.source.ImageWMS({
/*
 *    url: 'http://demo.opengeo.org/geoserver/wms',
 *    params: {'LAYERS': 'topp:states'},
 *    extent: [-13884991, 2870341, -7455066, 6338219],
 */
      url: 'http://localhost:8080/geoserver/wms?',
      params: {'LAYERS': 'npn:tokyo_kuiki'},
      //extent: [138.85, 35.4, 140, 35.975],
      extent: [15456711, 4218373, 15584728, 4297181],
      serverType: 'geoserver',
      attributions: [new ol.Attribution({html: '国土数値情報'})]
    })
  })
];
var map = new ol.Map({
  layers: layers,
  target: 'map',
  view: new ol.View2D({
//  center: [-10997148, 4569099],
    center: [15520720, 4257706],
//  zoom: 4
    zoom: 10
  })
});



2 - ol3-beta.5ex 3a - Single image WMS example 1

「Single image WMS example(wms-image.html)」を参考に地図を表示してみます。

HTML ファイルの作成
a Eclipse のメニューの「ファイル」->「ファイルを開く」をクリックします。





b 「ファイルを開く」ウィンドウで、「user」->「mapsite」->「ol3proj」->「v3.0.0-beta.5」->「examples」->「wms-image.html」をクリックして選択し、「OK」ボタンをクリックします。
同じように「wms-image.js」を開きます。





c メニューの「ファイル」->「新規」 -> 「ファイル」をクリックします。



d 「ファイル」ウィンドウで「ol3proj」をクリックして選択し、「ファイル名」を「203-ol3ex.html」と入力し、「次へ」ボタンをクリックします。








e 「File Template」ウィンドウで「HTML 5 Template」をクリックして選択し、「OK」ボタンをクリックします。











f 「wms-image.html」の内容をコピーして「203-ol3ex.html」に貼り付け、修正します。
g 同じように、新規に「203-ol3ex.js」ファイルを作成し、「File Template」ウィンドウで「JavaScript Template」をクリックして選択し、「完了」ボタンをクリックして、「wms-image.js」の内容をコピーして貼り付け、修正します。「wms-image-require.js」も「203-ol3ex-require.js」に貼り付けます。



「203-ol3ex.html」
<!doctype html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="chrome=1">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<!--
  <link rel="stylesheet" href="../css/ol.css" type="text/css">
  <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
  <link rel="stylesheet" href="../resources/layout.css" type="text/css">
  <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
-->
  <!-- ディレクトリ修正 -->
  <link rel="stylesheet" href="v3.0.0-beta.5/css/ol.css" type="text/css">
  <link rel="stylesheet" href="v3.0.0-beta.5/resources/bootstrap/css/bootstrap.min.css" type="text/css">
  <link rel="stylesheet" href="v3.0.0-beta.5/resources/layout.css" type="text/css">
  <link rel="stylesheet" href="v3.0.0-beta.5/resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
  <title>Single image WMS example</title>
 </head>
 <body>
  <div class="navbar navbar-inverse navbar-fixed-top">
   <div class="navbar-inner">
    <div class="container">
<!--
     <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
-->
      <!-- ディレクトリ修正 -->
     <a class="brand" href="v3.0.0-beta.5/examples/"><img src="v3.0.0-beta.5/resources/logo.png"> OpenLayers 3 Examples</a>
    </div>
   </div>
  </div>
  <div class="container-fluid">
   <div class="row-fluid">
    <div class="span12">
     <div id="map" class="map"></div>
    </div>
   </div>
   <div class="row-fluid">
    <div class="span12">
     <h4 id="title">Single image WMS example</h4>
     <p id="shortdesc">Example of a single image WMS layer.</p>
     <div id="docs">
<!--
      <p>See the <a href="wms-image.js" target="_blank">wms-image.js source</a> to see how this is done.</p>
-->
       <!-- ファイル修正 -->
      <p>See the <a href="203-ol3ex.js" target="_blank">203-ol3ex.js source</a> to see how this is done.</p>
     </div>
     <div id="tags">wms, image</div>
    </div>
   </div>
  </div>
<!--
  <script src="jquery.min.js" type="text/javascript"></script>
  <script src="../resources/example-behaviour.js" type="text/javascript"></script>
-->
  <!-- ディレクトリ修正 -->
  <script src="v3.0.0-beta.5/examples/jquery.min.js" type="text/javascript"></script>
  <script src="v3.0.0-beta.5/resources/example-behaviour.js" type="text/javascript"></script>
<!--
  <script src="loader.js?id=wms-image" type="text/javascript"></script>
-->
  <!-- ファイル修正 -->  <!-- ディレクトリ修正 -->
  <script src="loader.js?id=203-ol3ex" type="text/javascript"></script>
 </body>
</html>

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
 })
});



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

HTML ファイルの作成
a Eclipse のメニューの「ファイル」->「ファイルを開く」をクリックします。





b 「ファイルを開く」ウィンドウで、「user」->「mapsite」->「ol3proj」->「v3.0.0-beta.5」->「examples」->「wms-custom-proj.html」をクリックして選択し、「OK」ボタンをクリックします。
同じように「wms-custom-proj.js」を開きます。





c メニューの「ファイル」->「新規」 -> 「ファイル」をクリックします。



d 「ファイル」ウィンドウで「ol3proj」をクリックして選択し、「ファイル名」を「202-ol3ex.html」と入力し、「次へ」ボタンをクリックします。








e 「File Template」ウィンドウで「HTML 5 Template」をクリックして選択し、「OK」ボタンをクリックします。











f 「wms-custom-proj.html」の内容をコピーして「202-ol3ex.html」に貼り付け、修正します。
g 同じように、新規に「202-ol3ex.js」ファイルを作成し、「File Template」ウィンドウで「JavaScript Template」をクリックして選択し、「完了」ボタンをクリックして、「wms-custom-proj.js」の内容をコピーして貼り付け、修正します。「wms-custom-proj-require.js」も「202-ol3ex-require.js」に貼り付けます。


「202-ol3ex.html」
<!doctype html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="chrome=1">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<!--
  <link rel="stylesheet" href="../css/ol.css" type="text/css">
  <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
  <link rel="stylesheet" href="../resources/layout.css" type="text/css">
  <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
-->
  <!-- ディレクトリ修正 -->
  <link rel="stylesheet" href="v3.0.0-beta.5/css/ol.css" type="text/css">
  <link rel="stylesheet" href="v3.0.0-beta.5/resources/bootstrap/css/bootstrap.min.css" type="text/css">
  <link rel="stylesheet" href="v3.0.0-beta.5/resources/layout.css" type="text/css">
  <link rel="stylesheet" href="v3.0.0-beta.5/resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
  <title>Tiled WMS with Proj4js projection example</title>
 </head>
 <body>
  <div class="navbar navbar-inverse navbar-fixed-top">
   <div class="navbar-inner">
    <div class="container">
<!--
     <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
-->
      <!-- ディレクトリ修正 -->
     <a class="brand" href="v3.0.0-beta.5/examples/"><img src="v3.0.0-beta.5/resources/logo.png"> OpenLayers 3 Examples</a>
    </div>
   </div>
  </div>
  <div class="container-fluid">
   <div class="row-fluid">
    <div class="span12">
     <div id="map" class="map"></div>
    </div>
   </div>
   <div class="row-fluid">
    <div class="span12">
     <h4 id="title">Tiled WMS with Proj4js projection example</h4>
     <p id="shortdesc">Example of two tiled WMS layers (Pixelmap 1:1'000'000 and national parks) using the projection EPSG:21781.</p>
     <div id="docs">
<!--
      <p>See the <a href="wms-custom-proj.js" target="_blank">wms-custom-proj.js source</a> to see how this is done.</p>
-->
       <!-- ファイル修正 -->
      <p>See the <a href="202-ol3ex.js" target="_blank">202-ol3ex.js source</a> to see how this is done.</p>
     </div>
     <div id="tags">wms, tile, tilelayer, proj4js, projection</div>
    </div>
   </div>
  </div>
<!--
  <script src="http://cdnjs.cloudflare.com/ajax/libs/proj4js/1.1.0/proj4js-compressed.js" type="text/javascript"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/proj4js/1.1.0/defs/EPSG21781.js" type="text/javascript"></script>
-->
  <!-- ディレクトリ・ファイル修正 -->
  <script src="proj4js/lib/proj4js-compressed.js" type="text/javascript"></script>
  <script src="proj4js/lib/defs/EPSG2451.js" type="text/javascript"></script>
<!--
  <script src="jquery.min.js" type="text/javascript"></script>
  <script src="../resources/example-behaviour.js" type="text/javascript"></script>
-->
  <!-- ディレクトリ修正 -->
  <script src="v3.0.0-beta.5/examples/jquery.min.js" type="text/javascript"></script>
  <script src="v3.0.0-beta.5/resources/example-behaviour.js" type="text/javascript"></script>
<!--
  <script src="loader.js?id=wms-custom-proj" type="text/javascript"></script>
-->
  <!-- ファイル修正 -->  <!-- ディレクトリ修正 -->
  <script src="loader.js?id=202-ol3ex" type="text/javascript"></script>
 </body>
</html>

2 - ol3-beta.5ex 2a - Tiled WMS with Proj4js projection example 1

「Tiled WMS with Proj4js projection example(wms-custom-proj.html)」を参考に地図を表示してみます。

ここでは、Proj4js を使用するので、設定します。
「23 - OpenLayers で地図を重ねる 3 - 数値標高モデルの画像の地図を重ねる2」を参考にします。
(最新版は 1.5 ですが、インストールができないので 1.1.0 を使用します。)

OpenLayers and Proj4js
http://trac.openlayers.org/wiki/Documentation/Dev/proj4js

ここを参考にして、Proj4js を設定します。

1 ダウンロード
a Proj4js サイト
http://trac.osgeo.org/proj4js/

の「Download」をクリックします。
b Download-Proj4js
http://trac.osgeo.org/proj4js/wiki/Download

の「Proj4j 1.1.0」の「 http://download.osgeo.org/proj4js/proj4js-1.1.0.zip」をクリックします。

2 インストール
a ダウンロードした  proj4js-1.1.0.zip を解凍します。
user@debian7-vmw:~/ダウンロード$ unzip proj4js-1.1.0.zip
b proj4js フォルダを ol3proj に移動します。
user@debian7-vmw:~/ダウンロード$ mv proj4js ../mapsite/ol3proj
c 解凍されたフォルダの proj4js/lib/def/ に定義ファイルがあるので、EPSG:4326 と EPSG:2451 がないときは作成します。
EPSG4302.js を参考にします。
データは、/usr/share/proj のものを使用します。

user@debian7-vmw:/usr/share/proj$ grep -A1 4326 epsg
<4326> +proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs  <>
# Anguilla 1957
user@debian7-vmw:/usr/share/proj$ grep -A1 2451 epsg
<2451> +proj=tmerc +lat_0=36 +lon_0=139.8333333333333 +k=0.9999 +x_0=0 +y_0=0 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs  <>
# JGD2000 / Japan Plane Rectangular CS X
--
(EPSG:4326 の定義は proj4js/lib/proj4js ありました。
'EPSG:4326': "+title=long/lat:WGS84 +proj=longlat +a=6378137.0 +b=6356752.31424518 +ellps=WGS84 +datum=WGS84 +units=degrees",)

EPSG:2451 の定義ファイル EPSG2451.js を 次の内容で proj4js/lib/defs/ に作成します。
Proj4js.defs["EPSG:2451"]= "+title=JGD2000/Japan Plane Rectangular CS IX +proj=tmerc +lat_0=36 +lon_0=139.8333333333333 +k=0.9999 +x_0=0 +y_0=0 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs"

proj4js/index.html ファイルに次のように追加します。

---
<script src="lib/proj4js.js"></script>

<script src="lib/defs/EPSG27200.js"></script>
<script src="lib/defs/EPSG4272.js"></script>
<script src="lib/defs/EPSG54009.js"></script>
<script src="lib/defs/EPSG42304.js"></script>
<script src="lib/defs/EPSG25833.js"></script>
<script src="lib/defs/EPSG27563.js"></script>
<script src="lib/defs/EPSG4139.js"></script>
<script src="lib/defs/EPSG4302.js"></script>
<script src="lib/defs/EPSG31285.js"></script>
<script src="lib/defs/EPSG900913.js"></script>
<script src="lib/defs/EPSG2451.js"></script> <!-- 追加 -->
---

2 - ol3-beta.5ex 1c - Tiled WMS example 3

「wms-tiled.js(201-ol3ex.js)」は、地図を表示するのに必要な javascript です。
var layers = [
 new ol.layer.Tile({ // タイルレイヤを定義
  source: new ol.source.MapQuest({layer: 'sat'}) // MapQuest Open Aerial
 })
 new ol.layer.Tile({
  source: new ol.source.TileWMS(/** @type {olx.source.TileWMSOptions} */ ({
   url: 'http://demo.opengeo.org/geoserver/wms', // 参照1
   params: {'LAYERS': 'topp:states', 'TILED': true},
   extent: [-13884991, 2870341, -7455066, 6338219],
   serverType: 'geoserver'
  }))
 })
];
var map = new ol.Map({
 layers: layers,
 target: 'map',
 view: new ol.View2D({
  center: [-10997148, 4569099],
  zoom: 4
 })
});

参照1: OpenGeo Suite Library(http://suite.opengeo.org/opengeo-docs/geowebcache/index.html)の左ペインの「GeoWebCache
User Manual Contents」の「WMS - Web Map Service」リンクをクリックすると簡単な説明があります。

http://demo.opengeo.org/geoserver/ows?service=WMS&request=GetCapabilities&version=1.1.0

で情報が取得できます。「topp:states」に、「<SRS>EPSG:4326</SRS>」とあります。
OpenLayers 3 では、基本の座標系が EPSG:3857 です。
ol.sourse.Tile.WMS の extent や ol.View2D の center を EPSG:3857 の数値で表記すると自動的に変換します。

では、「topp:states」に換えて国土数値情報の東京都の行政区域(「npn:tokyo_kuiki」)を表示してみます。
データの設定に関しては、2013年11月にあるブログを参照してください。

「201-ol3ex.js」を次のように修正します。
var layers = [
 new ol.layer.Tile({
  source: new ol.source.MapQuest({layer: 'sat'})
 }),
 new ol.layer.Tile({
  source: new ol.source.TileWMS(/** @type {olx.source.TileWMSOptions} */ ({
/*
 *  url: 'http://demo.opengeo.org/geoserver/wms',
 *  params: {'LAYERS': 'topp:states', 'TILED': true},
 *  extent: [-13884991, 2870341, -7455066, 6338219],
 */
   url: 'http://localhost:8080/geoserver/wms?',
   params: {'LAYERS': 'npn:tokyo_kuiki', 'TILED': true},
   extent: [15456711, 4218373, 15584728, 4297181],
// EPSG:4326の座標[138.85, 35.4, 140, 35.975]を(Proj4jsで)変換 
   serverType: 'geoserver'
  }))
 })
];
var map = new ol.Map({
 layers: layers,
 target: 'map',
 view: new ol.View2D({
/*
 * center: [-10997148, 4569099],
 * zoom: 4
 */
  center: [15520720, 4257706],
  zoom: 10
 })
});



2 - ol3-beta.5ex 1b - Tiled WMS example 2

「loader.js」は、examples のファイルが地図を表示するのに必要なファイルを読み込むために使用されます。

最初にファイルを Web ブラウザで読み込んだときや、表示された地図の選択リストで「Production」を選んだときは、Google Closure Tools で開発される前のファイル(wms-tiled.js など)が使用されます。表示された地図の選択リストで「Develpment」を選んだときは、Google Closure Tools で開発されたファイル(wms-tiled-require.js や ol-deps.js など)が使用されます。
(Google Closure Tools に関しては、関連サイトを参照してください。)

このまま使用すると、ファイルの位置関係が合わないので、「201-ol3ex.html」と同じディレクトリにコピーして内容を修正します。

「loader.js」
/**
 * Loader to add ol.css, ol.js and the example-specific js file to the documents.
 * loader は、ol.css、ol.js、例に必要な js ファイルをドキュメントに追加します。
 *
 * This loader is used for the hosted examples. It is used in place of the development loader (examples/loader.js).
 * この loader は、提供されている例に使用します。開発 loader の場所(examples/loader.js)で使用します。
 *
 * ol.js, ol-simple.js, ol-whitespace.js, and ol-deps.js are built by OL3's build.py script. They are located in the ../build/ directory,relatively to this script.
 * ol.js、ol-simple.js、ol-whitespace.js、ol-deps.js は、OpenLayers3 の build.py スクリプトで構築されています。これらは、この loader.js の相対パスで、../build/ デレクトリに配置されています。
 * ol.js: Google Compiler で simple モードでコンパイル
 * (もしかしたら修正が加えられているかもしれません。)
 * ol-whitespace.js: Google Library で書きなおしたものを whitespace モードでコンパイル
 * ol-simple.js:: Google Library で書きなおしたものを simple モードでコンパイル
 * The script must be named loader.js.
 * このファイル名は、loader.js でなければなりません。
 * 
 * Usage:
 *     <script src="../loader.js?id=my-demo"></script>
 */
---
http://127.0.0.1:8020/ol3proj/201-ol3ex.html
212a-ol3ex.png 「Production」時のアドレス
http://127.0.0.1:8020/ol3proj/201-ol3ex.html?mode=advanced

212b-ol3ex.png 「Development」時のアドレス
http://127.0.0.1:8020/ol3proj/201-ol3ex.html?mode=raw
(advanced と raw 名前をつけ間違えたのかな?)
---
(function() {

 var i, pair;
// モード(mode: "raw","advancd" [選択リストでは、"Development","Production"]切替)
 var href = window.location.href, start, end, paramsString, pairs,pageParams = {};
 if (href.indexOf('?') > 0) {
  start = href.indexOf('?') + 1;
  end = href.indexOf('#') > 0 ? href.indexOf('#') : href.length;
  paramsString = href.substring(start, end);
  pairs = paramsString.split(/[&;]/);
  for (i = 0; i < pairs.length; ++i) {
   pair = pairs[i].split('=');
   if (pair[0]) {
    pageParams[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1]);
   }
  }
 }
// カスタムスクリプトの読込("loader.js?id=" の後の文字列取得)
 var scripts = document.getElementsByTagName('script');
 var src, index, search, chunks, scriptParams = {};
 for (i = scripts.length - 1; i >= 0; --i) {
  src = scripts[i].getAttribute('src');
  if (~(index = src.indexOf('loader.js?'))) {
   search = src.substr(index + 10);
   chunks = search ? search.split('&') : [];
   for (i = chunks.length - 1; i >= 0; --i) {
    pair = chunks[i].split('=');
    if (pair[0]) {
     scriptParams[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1]);
    }
   }
   break;
  }
 }
// OpenLyaers3 の読込(mode が 'advanced' か 'raw' なので、'ol.js' を読込)
 var oljs = 'ol.js', mode;
 if ('mode' in pageParams) {
  mode = pageParams.mode.toLowerCase();
  if (mode == 'debug') {
   mode = 'raw';
  }
  if (mode != 'advanced' && mode != 'raw') {
   oljs = 'ol-' + mode + '.js';
  }
 }
 var scriptId = encodeURIComponent(scriptParams.id);
 if (mode != 'raw') {
 // document.write('<scr' + 'ipt type="text/javascript" src="../build/' + oljs + '"></scr' + 'ipt>');
 // ディレクトリ修正
  document.write('<scr' + 'ipt type="text/javascript" src="v3.0.0-beta.5/build/' + oljs + '"></scr' + 'ipt>');
 } else {
  window.CLOSURE_NO_DEPS = true;
 // we've got our own deps file('ol-deps.js' のこと)
 // document.write('<scr' + 'ipt type="text/javascript" src="../closure-library/closure/goog/base.js"></scr' + 'ipt>');
 // document.write('<scr' + 'ipt type="text/javascript" src="../build/ol-deps.js"></scr' + 'ipt>');
 // ディレクトリ修正
  document.write('<scr' + 'ipt type="text/javascript" src="v3.0.0-beta.5/closure-library/closure/goog/base.js"></scr' + 'ipt>');
  document.write('<scr' + 'ipt type="text/javascript" src="v3.0.0-beta.5/build/ol-deps.js"></scr' + 'ipt>');
  document.write('<scr' + 'ipt type="text/javascript" src="' + scriptId + '-require.js"></scr' + 'ipt>');
 }
 document.write('<scr' + 'ipt type="text/javascript" src="' + scriptId + '.js"></scr' + 'ipt>');
}());


「201-ol3ex.html」の「loader.js」のディレクトリを修正します。
<!--
  <script src="loader.js?id=wms-tiled" type="text/javascript"></script>
  <script src="v3.0.0-beta.5/examples/loader.js?id=201-ol3ex" type="text/javascript"></script>
-->
  <!-- ファイル修正 -->  <!-- ディレクトリ修正 -->
  <script src="loader.js?id=201-ol3ex" type="text/javascript"></script>

 </body>
</html>

2 - ol3-beta.5ex 1a - Tiled WMS example 1

OpenLayers 3 Examole
http://ol3js.org/en/master/examples/

の例を国土数値情報や基盤地図情報なども使って試してみます。

「Tiled WMS example(wms-tiled.html)」を参考に地図を表示してみます。

a Eclipse のメニューの「ファイル」->「ファイルを開く」をクリックします。





b 「ファイルを開く」ウィンドウで、「user」->「mapsite」->「ol3proj」->「v3.0.0-beta.5」->「examples」->「wms-tiled.html」をクリックして選択し、「OK」ボタンをクリックします。
同じように「wms-tiled.js」を開きます。





c メニューの「ファイル」->「新規」 -> 「ファイル」をクリックします。



d 「ファイル」ウィンドウで「ol3proj」をクリックして選択し、「ファイル名」を「201-ol3ex.html」と入力し、「次へ」ボタンをクリックします。








e 「File Template」ウィンドウで「HTML 5 Template」をクリックして選択し、「OK」ボタンをクリックします。











f 「wms-tiled.html」の内容をコピーして「201-ol3ex.html」に貼り付け、修正します。
g 同じように、新規に「201-ol3ex.js」ファイルを作成し、「File Template」ウィンドウで「JavaScript Template」をクリックして選択し、「完了」ボタンをクリックして、「wms-tiled.js」の内容をコピーして貼り付け、修正します。



「201-ol3ex.html」
<!doctype html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="chrome=1">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
 
<!--
  <link rel="stylesheet" href="../css/ol.css" type="text/css">
  <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
  <link rel="stylesheet" href="../resources/layout.css" type="text/css">
  <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
-->
  <!-- ディレクトリ修正 -->
  <link rel="stylesheet" href="v3.0.0-beta.5/css/ol.css" type="text/css">
  <link rel="stylesheet" href="v3.0.0-beta.5/resources/bootstrap/css/bootstrap.min.css" type="text/css">
  <link rel="stylesheet" href="v3.0.0-beta.5/resources/layout.css" type="text/css">
  <link rel="stylesheet" href="v3.0.0-beta.5/resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
  <title>Tiled WMS example</title>
 </head>
 
 <body>
  <div class="navbar navbar-inverse navbar-fixed-top">
   <div class="navbar-inner">
    <div class="container">
 
<!--
     <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
-->
      <!-- ディレクトリ修正 -->
     <a class="brand" href="v3.0.0-beta.5/examples/"><img src="v3.0.0-beta.5/resources/logo.png"> OpenLayers 3 Examples</a>
 
    </div>
   </div>
  </div>

  <div class="container-fluid">
   <div class="row-fluid">
    <div class="span12">
     <div id="map" class="map"></div>
    </div>
   </div>
   <div class="row-fluid">
    <div class="span12">
     <h4 id="title">Tiled WMS example</h4>
     <p id="shortdesc">Example of a tiled WMS layer.</p>
     <div id="docs">
 
<!--
      <p>See the <a href="wms-tiled.js" target="_blank">wms-tiled.js source</a> to see how this is done.</p>
-->
       <!-- ファイル修正 -->
      <p>See the <a href="201-ol3ex.js" target="_blank">201-ol3ex.js source</a> to see how this is done.</p>
 
     </div>
     <div id="tags">wms, tile, tilelayer</div>
    </div>
   </div>
  </div>
 
<!--
  <script src="jquery.min.js" type="text/javascript"></script>
  <script src="../resources/example-behaviour.js" type="text/javascript"></script>
-->
  <!-- ディレクトリ修正 -->
  <script src="v3.0.0-beta.5/examples/jquery.min.js" type="text/javascript"></script>
  <script src="v3.0.0-beta.5/resources/example-behaviour.js" type="text/javascript"></script>
<!--
  <script src="loader.js?id=wms-tiled" type="text/javascript"></script>
-->
  <!-- ファイル修正 -->
  <script src="v3.0.0-beta.5/examples/loader.js?id=201-ol3ex" type="text/javascript"></script>
 </body>
</html>

2 - ol3-beta.5ex 0 - OpenLayers 3 Example

OpenLayers 3 Examole
http://ol3js.org/en/master/examples/

の例を国土数値情報や基盤地図情報なども使って試してみます。
最初に、OpenLayers 3 ライブラリを設定します。

0-1 ダウンロード
OpenLayers 3 ライブラリをダウンロードします。

a 「OpenLayers 3(http://ol3js.org/)」ページの「Download」リンクをクリクします。
b 「Releases openlayers/ol3(https://github.com/openlayers/ol3/releases)」ページの最新版(2014.6.2現在 v3.0.0-beta.5.zip)ボタンをクリックしてダウンロードします。

0-2 解凍
ダウンロードしたファイルを解凍します。

user@debian7-vmw:~$ cd ダウンロード
user@debian7-vmw:~/ダウンロード$ ls
---
v3.0.0-beta.5.zip
---
user@debian7-vmw:~/ダウンロード$ unzip v3.0.0-beta.5.zip
user@debian7-vmw:~/ダウンロード$ ls
---
v3.0.0-beta.5
v3.0.0-beta.5.zip

0-3 Eclipse にプロジェクトを作成
Aptana を設定した Eclipse に 解凍した OpenLayers 3 ライブラリを設定します。
(Eclipse と Aptana については、7 - Eclipse 4.2 "Juno" のインストール 1~3 [2013.11.8] を参考にしてください。)

a Eclipseを起動します。
user@debian7-vmw:~$ cd デスクトップ/eclipse/
user@debian7-vmw:~/デスクトップ/eclipse$ ./eclipse

プロジェクトを作成します。
b Aptanaのパースペクティブを開きます。
パースペクティブボタンをクリック -> 「Web」をクリック -> 「OK」ボタンをクリック







c メニューの「ファイル」 -> 「新規」 -> 「プロジェクト」をクリックします。




d 「ウィザードを選択」ウィンドウで「Webプロジェクト」をクリックして選択し、「次へ」ボタンをクリックします。







e 「Project template」ウィンドウで、「使用可能なテンプレート」の「Basic Web Template」をクリックして選択し、「次へ」ボタンをクリックします。








f 「プロジェクト」ウィンドウでの「プロジェクト名」(例えばol3proj)を入力して「完了」ボタンをクリックします。









「App Explorer」ビューの「RemoteSystemsTempFiles」右側の▼をクリックして、リストから「ol3proj」をクリックして選択します。



0-4 ライブラリのインポート
a ファイル -> インポート をクリックします。









b 「選択」ウィンドウの「インポート・ソースの選択」で「ファイルシステム」をクリックして選択し、「次へ」ボタンをクリックします。







c 「ファイル・システム」ウィンドウの「参照」ボタンをクリックします。









d 「ディレクトリからインポート」ウィンドウでライブラリのフォルダ(ここでは「ダウンロード/v3.0.0-beta.5」)を選択し、「OK」ボタンをクリックします。








e 「ファイル・システム」ウィンドウの「v3.0.0-beta.5」ボタンをクリックしてチェックをつけ、「完了」ボタンをクリックします。


OpenLayers のライブラリの構文チェックで問題が表示されましたが、このままにしておきます。