2 - ol3.12ex 152b - WMS GetFeatureInfo (Layers) 2

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

「2152-ol3ex.js」

$.ajax({
/** jQuery.ajax( url [, settings ] )
 * Perform an asynchronous HTTP (Ajax) request.
 * 非同期HTTP（アヤックス）リクエストを実行します。
 * （jQuery[http://api.jquery.com/jquery.ajax/]）
 */

 // url: './data/wmsgetfeatureinfo/osm-restaurant-hotel.xml',
 url: 'v3.14.0/examples/data/wmsgetfeatureinfo/osm-restaurant-hotel.xml',
 /** url  Type: String
  * A string containing the URL to which the request is sent.
  * リクエストが送信される URL を含む文字列。
  * （jQuery[http://api.jquery.com/jquery.ajax/]）
  */

 success: function(response) {
 /** success  Type: Function( Anything data, String 
  * textStatus, jqXHR jqXHR ) 
  * A function to be called if the request succeeds. The 
  * function gets passed three arguments: The data returned 
  * from the server, formatted according to the dataType 
  * parameter or the dataFilter callback function, if 
  * specified; a string describing the status; and the jqXHR 
  * (in jQuery 1.4.x, XMLHttpRequest) object. As of jQuery 
  * 1.5, the success setting can accept an array of 
  * functions. Each function will be called in turn. This is 
  * an Ajax Event.
  * リクエストが成功した場合、関数は呼び出されます。この関数は3
  * つの引数が渡されます：指定される場合、dataType のパラメータ、
  * または、dataFilter callbach 関数に従ってフォーマットされ
  * た、サーバから返されるデータ; 状況を説明する文字列; そして、
  * jqXHR（jQuery 1.4.x の、XMLHttpRequest）オブジェクト、で
  * す。jQuery 1.5 のように、成功の設定は関数の配列を受け入れる
  * ことができます。各関数は順番に呼び出されます。これは Ajax 
  * Event です。
  * （jQuery[http://api.jquery.com/jquery.ajax/]）
  */

  // this is the standard way to read the features
  // これはフィーチャを読み込む標準的な方法です。

  var allFeatures = new ol.format.WMSGetFeatureInfo().readFeatures(response);
  /** ol.format.WMSGetFeatureInfo 
   * Format for reading WMSGetFeatureInfo format. It uses 
   * ol.format.GML2 to read features.
   * WMSGetFeatureInfo 形式を読み取るためのフォーマット。これ
   * は、フィーチャを読み取るためにol.format.GML2を使用してい
   * ます。
   * （ol3 API[説明は Stable Only のチェックを外すと表示]）
   */

  /** readFeatures(source, opt_options)
   * Read all features from a WMSGetFeatureInfo response.
   * WMS GetFeatureInfo 応答のすべてのフィーチャを読み込みます。
   * （ol3 API）
   */

  $('#all').html(allFeatures.length.toString());
  /** .html()
   * Get the HTML contents of the first element in the set 
   * of matched elements.
   * マッチした要素のセットの最初の要素のHTMLコンテンツを取得し
   * ます。
   * （jQuery[http://api.jquery.com/html/]）
   */

  /** Number.prototype.toString()
   * 指定された Number オブジェクトを表す 文字列を返します。
   * （MDN[https://developer.mozilla.org/ja/docs/Web/
   * JavaScript/Reference/Global_Objects/Number/toString]）
   */

  // when specifying the 'layers' options, only the 
  // features of those layers are returned by the format
  // 「layers」オプションを指定するときに、これらのレイヤのフィー
  // チャだけ、形式によって返されます

  var hotelFeatures = new ol.format.WMSGetFeatureInfo({

   layers: ['hotel']
   /** layers:
    * If set, only features of the given layers will be 
    * returned by the format when read.
    * 設定した場合、読み込まれたとき、与えられたレイヤのフィー
    * チャでだけ、フォーマットによって返されます。
   * （ol3 API[説明は Stable Only のチェックを外すと表示]）
    */

  }).readFeatures(response);
  $('#hotel').html(hotelFeatures.length.toString());

  var restaurantFeatures = new ol.format.WMSGetFeatureInfo({
   layers: ['restaurant']
  }).readFeatures(response);
  $('#restaurant').html(restaurantFeatures.length.toString());

 }
});

2 - ol3.14ex 152a - WMS GetFeatureInfo (Layers) 1

「WMS GetFeatureInfo (Layers) (getfeatureinfo-layers.html)」を参考に地図を表示してみます。
説明に次のようにあります。

Demonstrates the use of the layers option in the ol.format.WMSGetFeatureInfo format object, which allows features returned by a single WMS GetFeatureInfo request that asks for more than one layer to be read by layer name.

１つ以上のレイヤにレイヤ名によって読み取られるのを要求する単一の WMS GetFeatureInfo リクエストによって返されたフィーチャを可能にする ol.format.WMSGetFeatureInfo フォーマットオブジェクトのレイヤのオプションの使用方法を示します。


HTML ファイルの作成

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

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

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

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

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











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

「2152-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="http://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" type="text/css">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-combined.min.css" type="text/css">

  <!--
  <link rel="stylesheet" href="../css/ol.css" type="text/css">
  <link rel="stylesheet" href="./resources/layout.css" type="text/css">

  <link rel="stylesheet" href="./resources/prism/prism.css" type="text/css">
  <script src="./resources/zeroclipboard/ZeroClipboard.min.js"></script>
  
  「resources」の位置が変わりました。
  -->
  <!-- ディレクトリ修正 -->
  <link rel="stylesheet" href="v3.14.0/css/ol.css" type="text/css">
  <link rel="stylesheet" href="v3.14.0/examples/resources/layout.css" type="text/css">

  <link rel="stylesheet" href="v3.14.0/examples/resources/prism/prism.css" type="text/css">
  <script src="v3.14.0/examples/resources/zeroclipboard/ZeroClipboard.min.js"></script>

  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch"></script>

  <title>WMS GetFeatureInfo (Layers)</title>
 </head>
 <body>

  <!-- 
  bootstrap-combined.min.css, ol.css, layout.css,
  CSSファイルで設定されたセレクタを使用。
  -->
  <header class="navbar" role="navigation">
   <div class="container" id="navbar-inner-container">

    <!--
    <a class="navbar-brand" href="./"><img src="./resources/logo-70x70.png"> OpenLayers 3 Examples</a>
    -->
    <!-- ディレクトリ修正 -->
    <a class="navbar-brand" href="v3.14.0/examples/"><img src="v3.14.0/examples/resources/logo-70x70.png"> OpenLayers 3 Examples</a>

    <ul class="nav navbar-nav pull-right">
     <!-- <li><a href="../doc">Docs</a></li> -->
     <li><a href="v3.14.0/doc">Docs</a></li>
     <li><a class="active" href="index.html">Examples</a></li>
     <!-- <li><a href="../apidoc">Docs</a></li> -->
     <li><a href="v3.14.0/apidoc">API</a></li>
     <li><a href="https://github.com/openlayers/ol3">Code</a></li>
    </ul>

   </div>
  </header>
  <div class="container-fluid">
   <div class="row-fluid">
    <div class="span12">
     <h4 id="title">WMS GetFeatureInfo (Layers)</h4>
     <div class="row-fluid">
      <div id="fullscreen" class="fullscreen">
       <div id="map" class="map"></div>
      <div class="sidepanel">
       <span class="sidepanel-title">Side Panel</span>
      </div>
     </div>
    </div>
   </div>

   <div class="row-fluid">
    <div class="span12">

     <p id="shortdesc">Shows how to fetch features per layer 
      name in a single WMS GetFeatureInfo request</p>

     <div id="docs"><p>Demonstrates the use of the 
      <code>layers</code> option in the 
      <code>ol.format.WMSGetFeatureInfo</code> 
      format object, which allows features returned by a 
      single WMS GetFeatureInfo request that asks for more 
      than one layer to be read by layer name.</p>
     </div>

     <div id="api-links">Related API documentation: 
      <ul class="inline">
       <li>
        <!-- <a href="../apidoc/ol.format.WMSGetFeatureInfo.html" title="API documentation for ol.format.WMSGetFeatureInfo">ol.format.WMSGetFeatureInfo</a> -->
        <a href="v3.14.0/apidoc/ol.format.WMSGetFeatureInfo.html" title="API documentation for ol.format.WMSGetFeatureInfo">ol.format.WMSGetFeatureInfo</a>
       </li>
      </ui>
     </div>
    </div>
   </div>

   <div class="row-fluid">
    <div id="source-controls">
     <a id="copy-button">
      <i class="fa fa-clipboard"></i> Copy
     </a>
     <a id="jsfiddle-button">
      <i class="fa fa-jsfiddle"></i> Edit
     </a>
    </div>
    <form method="POST" id="jsfiddle-form" target="_blank" action="http://jsfiddle.net/api/post/jquery/1.11.0/">
    <textarea class="hidden" name="js">

// --- 省略 ---
&lt;/html&gt;</code></pre>

   </div>
  </div>

  <!--
  <script src="./resources/common.js"></script>
  <script src="./resources/prism/prism.min.js"></script>
  -->
  <!-- ディレクトリ修正
   CommonJS と
   prism.js
 -->
  <script src="v3.14.0/examples/resources/common.js"></script>
  <script src="v3.14.0/examples/resources/prism/prism.min.js"></script>

  <!-- 
  <script src="loader.js?id=getfeatureinfo-layer"></script>
  -->
  <!-- ファイル修正 -->  <!-- ディレクトリ修正 -->
  <script src="loader.js?id=2152-ol3ex"></script>

  </body>
</html>

COMMONJS は

COMMONJS
http://webpack.github.io/docs/commonjs.html

に、次のようにあります。

The CommonJS group defined a module format to solve JavaScript scope issues by making sure each module is executed in its own namespace.
This is achieved by forcing modules to explicitly export those variables it wants to expose to the “universe”, and also by defining those other modules required to properly work.
To achieve this CommonJS give you two tools:
the require() function, which allows to import a given module into the current scope.
the module object, which allows to export something from the current scope.

CommonJSグループは、それ自身の名前空間内で実行されている各モジュールを確認することによって、JavaScriptのスコープ問題を解決するためのモジュールフォーマットを定義しました。
これは、それが「universe（？）」に公開したい変数を明示的にエクスポートするモジュールを強制することによって、同じように、正常に動作するのに必要な他のモジュールを定義することによって、達成されます。
この CommonJS を達成するために2つのツールを与えます：
require()関数、指定したモジュールを現在のスコープにインポートすることができます。
モジュールオブジェクト、現在のスコープからエクスポートすることができます。


Prism は、

Prism
http://prismjs.com/

に、次のようにあります。

Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind. It’s a spin-off from Dabblet and is tested there daily by thousands.
Prismは、最新のWeb標準に構築されたことを考慮し軽量で拡張可能なシンタックスハイライトです。それは Dabblet からスピンオフで、何千人も日々そこで試験されています。


ZeroClipboard は

ZeroClipboard v2.x
http://zeroclipboard.org/

に、次のようにあります。

The ZeroClipboard library provides an easy way to copy text to the clipboard using an invisible Adobe Flash movie and a JavaScript interface.
ZeroClipboard ライブラリは、見えない Adobe Flash ムービーとJavaScript のインターフェイスを使用してテキストをクリップボードにコピーする簡単な方法を提供します。

Debian 8 では動作しませんでした。ボタンを右クリックしたときに flash のコンテキストメニューが表示されると動作しています。

39 - OpenLayers Mobile 3 - Mobile Layers

39-3 Mobile Layers
「Mobile Layers（mobile-layers.html）」を参考に、WMS、WFS、KML レイヤを表示します。

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

b 「ファイルを開く」ウィンドウで、「OpenLayers-2.13.1」->「examples」->「mobile-layers.html」をクリックして選択し、「OK」ボタンをクリックします。
同じように「mobile_layers.js」を開きます。

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

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

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











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

「ol019c-nippon_bmi_takata_pgis.html」

<!DOCTYPE html>
<html>

  <head>
  <title>OpenLayers Mobile Layers(R.Takata)</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta name="apple-mobile-web-app-capable" content="yes">

<!-- 追加 -->
  <script src="OpenLayers-2.13.1/lib/proj4js/lib/proj4js.js"></script>
  <script src="OpenLayers-2.13.1/lib/proj4js/lib/proj4js-combined.js"></script>
  <script src="OpenLayers-2.13.1/lib/proj4js/lib/defs/EPSG2452.js"></script>
<!-- 追加ここまで -->

<!-- 修正 -->
  <link rel="stylesheet" href="OpenLayers-2.13.1/theme/default/style.css" type="text/css">
  <link rel="stylesheet" href="OpenLayers-2.13.1/theme/default/style.mobile.css" type="text/css" />
  <link rel="stylesheet" href="OpenLayers-2.13.1/examples/style.css" type="text/css">
  <script type="text/javascript" src="OpenLayers-2.13.1/lib/OpenLayers.js?mobile"></script>
  <script src="mobile-layers_takata.js"></script>
<!-- 修正ここまで -->

---

「mobile-layers_takata.js」

// initialize map when page ready
var map;
var bounds = new OpenLayers.Bounds(55000,-121000,78000,-97000); // 追加

// Get rid of address bar on iphone/ipod
var fixSize = function() {
 window.scrollTo(0,0);
 document.body.style.height = '100%';
 if (!(/(iphone|ipod)/.test(navigator.userAgent.toLowerCase()))) {
  if (document.body.parentNode) {
   document.body.parentNode.style.height = '100%';
  }
 }
};

setTimeout(fixSize, 700);
setTimeout(fixSize, 1500);

// allow testing of specific renderers via "?renderer=Canvas", etc
var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;

OpenLayers.ProxyHost = "/cgi-bin/proxy.cgi?url="; // 修正

function init() {
 map = new OpenLayers.Map({
  div: "map",
  theme: null,

// ここから追加
  projection: new OpenLayers.Projection("EPSG:2452"),
  displayProjection: new OpenLayers.Projection("EPSG:4326"),
  maxResolution: 'auto',
  units: 'meters',
  maxExtent: bounds,
  restrictedExtent: bounds.clone(),
 // ここまで

  controls: [
   new OpenLayers.Control.Attribution(),
   new OpenLayers.Control.TouchNavigation({
    dragPanOptions: {
     enableKinetic: true
    },
   }),
   new OpenLayers.Control.Zoom()    
  ]
 });

// ここから修正
 var wms = new OpenLayers.Layer.WMS( "R.Takata Height WMS",
  "http://192.168.1.200:8080/geoserver/wms",
  {
   layers: 'npn:rikuzentakata5m-epsg2452'
  },{
   isBaselayer: true
 });

 var kml = new OpenLayers.Layer.Vector("KML", {
  projection: map.displayProjection,
  strategies: [new OpenLayers.Strategy.Fixed()],
  protocol: new OpenLayers.Protocol.HTTP({
   url: "kml/rikuzentakata.kml",
   format: new OpenLayers.Format.KML({
    extractStyles: true,
    extractAttributes: true
   })
  }),
  renderers: renderer
 });

 var wfs = new OpenLayers.Layer.Vector( "R.Takata Kukakusen WFS", {
  strategies: [new OpenLayers.Strategy.Fixed()],
  protocol: new OpenLayers.Protocol.WFS({
   url: "http://192.168.1.200:8080/geoserver/wfs",
   featureType: "rikuzentakata_kukakusen",
   featureNS: "http://www.myhome.net/npn"
  }),
  renderers: renderer
 });
 // ここまで

 map.addLayers([wms, wfs, kml]);
// map.addLayers([wms, wfs]);
// map.setCenter(new OpenLayers.LonLat(-104, 42), 3);
 map.setCenter(bounds.getCenterLonLat(), 0); // 追加
};