2016年2月29日月曜日

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.

1つ以上のレイヤにレイヤ名によって読み取られるのを要求する単一の 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 のコンテキストメニューが表示されると動作しています。

2 - ol3.14ex 151b - Full Screen Control with extended source element 2

「full-screen-source.js(2151-ol3ex.js)」は、マップを表示するための JavaScript ファイルです。

「2151-ol3ex.js」
var view = new ol.View({
 center: [-9101767, 2822912],
 zoom: 14
});
var map = new ol.Map({
 controls: ol.control.defaults().extend([
 /** controls
  * Controls initially added to the map. 
  * If not specified, ol.control.defaults() is used.
  * 初期設定で、マップに追加されたコントロール。
  * 明示されていなければ、ol.control.defaults() が使用されます。
  * (ol3 API)
  */
 /** ol.control.defaults()
  * Set of controls included in maps by default. 
  * Unless configured otherwise, this returns a 
  * collection containing an instance of each of the 
  * following controls:
  * ol.control.Zoom, ol.control.Rotate, 
  * ol.control.Attribution
  * デフォルトでは、マップに含まコントロールのセット。
  * 特に設定しない限り、これは、以下の各コントロールの
  * インスタンスを含むコレクションを返します。(ol3 API)
  */
  new ol.control.FullScreen({
  /**ol.control.FullScreen
   * Provides a button that when clicked fills up the 
   * full screen with the map. The full screen source 
   * element is by default the element containing the 
   * map viewport unless overriden by providing the 
   * source option. In which case, the dom element 
   * introduced using this parameter will be displayed 
   * in full screen.
   * When in full screen mode, a close button is shown 
   * to exit full screen mode. The Fullscreen API is 
   * used to toggle the map in full screen mode.
   * クリックされたとき、マップと共にフルスクリーンにするボタ
   * ンを提供します。フルスクリーンソース要素は、デフォルトで
   * は、ソースのオプションを提供することによって上書きされな
   * い限り、マップビューポートを含む要素です。その場合には、
   * このパラメータを使用して導入されたDOM要素は、フルスク
   * リーンで表示されます。
   * フルスクリーンモードで、閉じるボタンは、
   * フルスクリーンモードを終了するように示されています。フル
   * スクリーン API は、フルスクリーンモードでマップを切り替
   * えるために使用されます。(ol3 API)
   */
   source: 'fullscreen'
   /** source:
    * The element to be displayed fullscreen. When not 
    * provided, the element containing the map viewport 
    * will be displayed fullscreen.
    * 全画面を表示する要素。提供されていない場合には、マップ
    * ビューポートを含む要素がフルスクリーン表示されます。
    * (ol3 API[説明は Stable Only のチェックを外すと表示])
    */
  })
 ]),
 layers: [
  new ol.layer.Tile({
  /** ol.layer.Tile 
   * For layer sources that provide pre-rendered, tiled 
   * images in grids that are organized by zoom levels 
   * for specific resolutions. 
   * プリレンダリング(事前描画)を提供するレイヤソースのため
   * の、特定の解像度でのズームレベルによって編成されているグ
   * リッドのタイルイメージ。(ol3 API)
   */
   source: new ol.source.OSM()
   /** source:
    * Source for this layer. Required.(ol3 API)
     */
   /** ol.source.OSM 
    * Layer source for the OpenStreetMap tile server.
    * OpenStreetMap タイルサーバのレイヤソース。(ol3 API)
    */
  })
 ],
 renderer: common.getRendererFromQueryString(),
// 'common.js' により URL にある renderer を返します
 target: 'map',
 view: view
});

2 - ol3.14ex 151a - Full Screen Control with extended source element 1

「Full Screen Control with extended source element (full-screen-source.html)」を参考に地図を表示してみます。
説明に次のようにあります。

Click the control in the top right corner to go full screen. Click it again to exit full screen.
If there is no button on the map, your browser does not support the Full Screen API.
フルスクリーンにするために右上隅のコントロールをクリックします。全画面表示を終了するには、それをもう一度クリックしてください。
マップにボタンがない場合は、お使いのブラウザは、フルスクリーンAPIをサポートしていません。

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





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





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




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








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











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

「2151-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>
  <link rel="stylesheet" href="full-screen-source.css">
  
  「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>
  <link rel="stylesheet" href="v3.14.0/examples/full-screen-source.css">
  <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch"></script>
  <title>Full Screen Control with extended source 
   element</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">Full Screen Control with extended source 
      element</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">Example of a full screen control with 
      a source option definition.</p>
     <div id="docs"><p>Click the control in the top right 
      corner to go full screen.  Click it again to exit full 
      screen.</p> 
      <p>If there is no button on the map, your browser does 
      not support the 
      <a href="http://caniuse.com/#feat=fullscreen">Full 
      Screen API</a>.</p>
     </div>
     <div id="api-links">Related API documentation: 
      <ul class="inline">
       <li>
        <!-- <a href="../apidoc/ol.Map.html" title="API documentation for ol.Map">ol.Map</a> -->
        <a href="v3.14.0/apidoc/ol.Map.html" title="API documentation for ol.Map">ol.Map</a>
       </li>,
       <li>
        <!-- <a href="../apidoc/ol.View.html" title="API documentation for ol.View">ol.View</a> -->
        <a href="v3.14.0/apidoc/ol.View.html" title="API documentation for ol.View">ol.View</a>
       </li>,
       <li>
        <!-- <a href="../apidoc/ol.control.html" title="API documentation for ol.control">ol.control</a> -->
        <a href="v3.14.0/apidoc/ol.control.html" title="API documentation for ol.control">ol.control</a>
       </li>,
       <li>
         <!-- <a href="../apidoc/ol.control.FullScreen.html" title="API documentation for ol.control.FullScreen">ol.control.FullScreen</a> -->
        <a href="v3.14.0/apidoc/ol.control.FullScreen.html" title="API documentation for ol.control.FullScreen">ol.control.FullScreen</a>
       </li>,
       <li>
        <!-- <a href="../apidoc/ol.layer.Tile.html" title="API documentation for ol.layer.Tile">ol.layer.Tile</a> -->
        <a href="v3.14.0/apidoc/ol.layer.Tile.html" title="API documentation for ol.layer.Tile">ol.layer.Tile</a>
       </li>,
       <li>
        <!-- <a href="../apidoc/ol.source.OSM.html" title="API documentation for ol.source.OSM">ol.source.OSM</a> -->
        <a href="v3.14.0/apidoc/ol.source.OSM.html" title="API documentation for ol.source.OSM">ol.source.OSM</li>,
       </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=full-screen-source"></script>
  -->
  <!-- ファイル修正 -->  <!-- ディレクトリ修正 -->
  <script src="loader.js?id=2151-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 のコンテキストメニューが表示されると動作しています。

v3.14.0 がリリースされました

日本時間で(2016.2.24)に v3.14.0 がリリースされました。

Releases - openlayers/ol3 GitHub
(https://github.com/openlayers/ol3/releases)より

v3.14.0
Summary

The v3.14.0 release includes features and fixes from 93 pull requests since the v3.13.1 release. New features and improvements include:

v3.14.0 リリースは v3.13.1 のリリースから 71 プルリクエスト(訳注:Git でリクエストを出す機能)からの機能と修正が含まれています。新機能と改良点は次のとおりです。


● New source option for the ol.control.FullScreen, to allow including other elements besides the map in a full screen view (#4679).
● New target property for the Drag&Drop interaction allows using a different drop target than the map viewport (#4876).
● ol.style.RegularShape has a new rotateWithView option, for controlling how regular shape symbols are rendered on rotated views (#4698).
● New layers option for ol.format.WMSGetFeatureInfo format, to selectively only read features from specific layers (#4700).
● New precision parameter for formatting coordinates with ol.coordinate.toStringHDMS (#4787).
● Smarter tile queue for improved tile loading user experience when more than one tile layer is used (#4794).
● Improved rendering performance for tile layers by rendering tiles directly to the map canvas (#4597).
● The goog.events event system was replaced with our own lightweight event system. This significally reduces the build size (#4711). Replacement of other goog.* components with ES5 features or custom code marks a huge step towards the complete removal of the Closure Library dependency.

● フルスクリーン表示でマップに加えて他の要素を含むことを可能にする ol.control.FullScreen の新しいソースオプション(#4679)。
● ドラッグ&ドロップインタラクションのための新しいターゲットプロパティは、マップビューポートとは異なるドロップターゲットを使用できます(#4876)。
● ol.style.RegularShapeは、標準的な形状のシンボルが回転したビュー上にレンダリングされる方法を制御するために、新しい rotateWithView オプションを持ちます(#4698)。
● 選択的に特定のレイヤからフィーチャを読み取るだけのための ol.format.WMSGetFeatureInfo フォーマットのための新しいレイヤのオプション(#4700)。
● 書式設定のための新しい高精度のパラメータは、ol.coordinate.toStringHDMS で調整します(#4787)。
● ーつ以上のタイルレイヤが使用されている場合、ユーザーエクスペリエンスをローディングする改良されたタイルのためのよりスマートなタイルキュ(#4794)。
● マップのキャンバスに直接タイルをレンダリングすることにより、タイルレイヤのための改善されたレンダリング性能(#4597)。
● goog.events イベントシステムは、独自の軽量イベントシステムと交換しました。これは、ビルドサイズを減らせます(#4711)。 ES5の機能による他の goog.* コンポーネントの交換、または、カスタムコードは、クロージャライブラリの依存関係の完全な除去に向けた大きな一歩をマークします。


Upgrade notes

Internet Explorer 9 support

As of this release, OpenLayers requires a requestAnimationFrame/cancelAnimationFrame polyfill for IE 9 support. See http://cdn.polyfill.io/v2/docs/features/#requestAnimationFrame.

このリリースでは、OpenLayersをはIE9のサポートのためのrequestAnimationFrameの/ cancelAnimationFrameのポリフィルを必要とします。 http://cdn.polyfill.io/v2/docs/features/#requestAnimationFrameを参照してください。

Layer pre-/postcompose event changes

It is the responsibility of the application to undo any canvas transform changes at the end of a layer 'precompose' or 'postcompose' handler. Previously, it was ok to set a null transform. The API now guarantees a device pixel coordinate system on the canvas with its origin in the top left corner of the map. However, applications should not rely on the underlying canvas being the same size as the visible viewport.

レイヤ 'precompose' または 'postcompose' ハンドラの終了時にすべてのcanvas transform changes を元に戻すことは、アプリケーションの責任です。以前は、null transform を設定しても大丈夫でした。 APIは、現在、地図の左上隅にその原点を持つ、キャンバス上のデバイスピクセル座標系を保証します。ただし、アプリケーションは、可視ビューポートと同じサイズとなる基礎となるキャンバスに頼るべきではありません。

Old code:
layer.on('precompose', function(e) {
  // rely on canvas dimensions to move coordinate origin to center
  e.context.translate(e.context.canvas.width / 2, e.context.canvas.height / 2);
  e.context.scale(3, 3);
  // draw an x in the center of the viewport
  e.context.moveTo(-20, -20);
  e.context.lineTo(20, 20);
  e.context.moveTo(-20, 20);
  e.context.lineTo(20, -20);
  // rely on the canvas having a null transform
  e.context.setTransform(1, 0, 0, 1, 0, 0);
});

New code:
layer.on('precompose', function(e) {
  // use map size and pixel ratio to move coordinate origin to center
  var size = map.getSize();
  var pixelRatio = e.frameState.pixelRatio;
  e.context.translate(size[0] / 2 * pixelRatio, size[1] / 2 * pixelRatio);
  e.context.scale(3, 3);
  // draw an x in the center of the viewport
  e.context.moveTo(-20, -20);
  e.context.lineTo(20, 20);
  e.context.moveTo(-20, 20);
  e.context.lineTo(20, -20);
  // undo all transforms
  e.context.scale(1 / 3, 1 / 3);
  e.context.translate(-size[0] / 2 * pixelRatio, -size[1] / 2 * pixelRatio);
});


(Full list of changes と fixes リストはサイトをみてください。)


v3.14.0 の examples を試してみます
OpenLayers 3 のホームページ(http://openlayers.org/)の「LATEST」の文中の「v3.14.0」をクリックします。
開いたページ「Downloads for the v3.14.0 release(http://openlayers.org/download/)」の「v3.14.0.zip」ボタンをクリックしてダウンロードします。
展開したフォルダを Eclipse の ol3proj にコピーします。

ディレクトリは次のようにしました。
ol3proj
|-v3.0.0/
|-v3.1.1/
|-v3.2.0/
|-v3.2.1/
|-v3.3.0/
|-v3.4.0/
|-v3.5.0/
|-v3.6.0/
|-v3.7.0/
|-v3.8.2/
|-v3.9.0/
|-v3.10.1/
|-v3.11.2/
|-v3.12.1/
|-v3.13.1/
|-v3.14.0/
|-2xx-ol3ex.html
|-2xx-ol3ex.js
|-2xx-ol3ex-require.js
|-loader.js
|-loader-v3.0.0.js
|-loader-v3.1.1.js
|-loader-v3.2.0.js
|-loader-v3.2.1.js
|-loader-v3.3.0.js
|-loader-v3.4.0.js
|-loader-v3.5.0.js
|-loader-v3.6.0.js
|-loader-v3.7.0.js
|-loader-v3.8.2.js
|-loader-v3.9.0.js
|-loader-v3.10.1.js
|-loader-v3.11.2.js
|-loader-v3.12.1.js

v.3.13.1 の loader.js の名前を loader-v3.13.1.js に変更し、v3.14.0/examples/loader.js を ol3proj 直下にコピーします。
ol3proj
|-v3.0.0/
|-v3.1.1/
|-v3.2.0/
|-v3.2.1/
|-v3.3.0/
|-v3.4.0/
|-v3.5.0/
|-v3.6.0/
|-v3.7.0/
|-v3.8.2/
|-v3.9.0/
|-v3.10.1/
|-v3.11.2/
|-v3.12.1/
|-v3.13.1/
|-v3.14.0/
|-2xx-ol3ex.html
|-2xx-ol3ex.js
|-2xx-ol3ex-require.js
|-loader.js
|-loader-v3.0.0.js
|-loader-v3.1.1.js
|-loader-v3.2.0.js
|-loader-v3.2.1.js
|-loader-v3.3.0.js
|-loader-v3.4.0.js
|-loader-v3.5.0.js
|-loader-v3.6.0.js
|-loader-v3.7.0.js
|-loader-v3.8.2.js
|-loader-v3.9.0.js
|-loader-v3.10.1.js
|-loader-v3.11.2.js
|-loader-v3.12.1.js
|-loader-v3.13.1.js

loader.js の内容を次のように修正します。

---
  if (!raw) {
    // document.write('<scr' + 'ipt type="text/javascript" src="../build/ol.js"></scr' + 'ipt>');
     // ディレクトリ修正
    document.write('<scr' + 'ipt type="text/javascript" src="v3.14.0/build/ol.js"></scr' + 'ipt>');

  } else {
    window.CLOSURE_NO_DEPS = true; // we've got our own deps file
    // 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.14.0/closure-library/closure/goog/base.js"></scr' + 'ipt>');
    document.write('<scr' + 'ipt type="text/javascript" src="v3.14.0/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>');
}());

2016年2月15日月曜日

GeoExt3-dev 9 - Feature Grid Example 2

9-2 JavaScript ファイルの作成
「grid.js(9-geoext3.js)」は、マップを表示するための JavaScript ファイルです。

「9-geoext3.js」
Ext.require([
/** require( expressions, [fn], [scope] )
 * Loads all classes by the given names and all their 
 * direct dependencies; optionally executes the given 
 * callback function when finishes, within the optional 
 * scope.
 * 指定された名前とそのすべての直接依存によって、すべて
 * のクラスをロードします。任意の範囲内で、終了するとき
 * に任意で与えられたコールバック関数を実行します。
 * (GeoExt doc[w/ext])
 */
 'Ext.container.Container',
 /** Ext.container.Container
  * Base class for any Ext.Component that may contain other 
  * Components. Containers handle the basic behavior of 
  * containing items, namely adding, inserting and removing 
  * items.
  * The most commonly used Container classes are 
  * Ext.panel.Panel, Ext.window.Window and Ext.tab.Panel. 
  * If you do not need the capabilities offered by the 
  * aforementioned classes you can create a lightweight 
  * Container to be encapsulated by an HTML element to your 
  * specifications by using the autoEl config option.
  * 他の Component を含むことができる任意の Ext.Component の
  * 基本クラス。コンテナ(Container)は、items(アイテム)を
  * 含む基本的な動作、すなわち、items(アイテム)を追加、挿入、
  * 削除すること、を処理します。
  * 最も一般的に使用される Container クラスは Ext.panel.Panel、
  * Ext.window.Window と Ext.tab.Panel です。上記のクラスに
  * よって提供される機能が必要ない場合は、autoEl 設定オプショ
  * ンを使用して、にHTML要素によってカプセル化される軽量のコン
  * テナを独自に作成することができます。
  * (GeoExt doc[w/ext])
  */
 'Ext.panel.Panel',
 /** Ext.panel.Panel
  * Panel is a container that has specific functionality 
  * and structural components that make it the perfect 
  * building block for application-oriented user interfaces.
  * Panels are, by virtue of their inheritance from 
  * Ext.container.Container, capable of being configured 
  * with a layout, and containing child Components.
  * パネルは、特定の機能とそれアプリケーション指向のユーザ
  * インターフェイスに最適なビルディングブロックにする構造
  * 的要素を持っているコンテナです。パネルは、
  * Ext.container.Container からの継承のおかげで、layout 
  * で構成し、子コンポーネントを含むことができます。
  * (GeoExt doc[w/ext])
  */
 'Ext.grid.Panel',
 /** Ext.grid.Pane
  * Grids are an excellent way of showing large amounts of 
  * tabular data on the client side. Essentially a 
  * supercharged <table>, GridPanel makes it easy to fetch, 
  * sort and filter large amounts of data.
  * Grids are composed of two main pieces - a Store full of 
  * data and a set of columns to render.
  * grid(グリッド)は、クライアント側で大量の表データを示すた
  * めの優れた方法です。基本的に過給された <table> は、
  * GridPanelは、大量のデータを簡単にフェッチ、並べ替え、および
  * フィルタリングすることができます。
  * grid は、 2つの主要部品 - データの完全な保存とレンダリング
  * する列のセット - で構成されています。
  * (GeoExt doc[w/ext])
  */
 'GeoExt.component.Map',
 /** GeoExt.component.Map
  * The map component and a panel side by side
  * map component(マップコンポーネント)とパネルの位置関
  * 係(並び)。
  * (GeoExt doc[w/ext])
  */
 'GeoExt.data.store.Features',
 /** GeoExt.data.store.Features
  * A data store holding OpenLayers feature objects 
  * (ol.Feature).
  * OpenLayers feature オブジェクトを保持するデータストア
  *  (ol.Feature)。
  * (GeoExt doc[w/ext])
  */
 'GeoExt.grid.column.Symbolizer'
 /** GeoExt.grid.column.Symbolizer
  * An Ext.grid.column.Column pre-configured with a 
  * GeoExt.FeatureRenderer. This can be used to display the 
  * rendering style of a vector feature in a grid column.
  * GeoExt.FeatureRenderer を使用して事前に設定された 
  * Ext.grid.column.Column。これは、グリッドカラムにベクタ
  * フィーチャのレンダリングスタイルを表示するために使用されま
  * す。
  * (GeoExt doc[w/ext])
  */
]);
var olMap, gridWest, gridEast, featStore1, featStore2;
Ext.application({
/** Ext.app.Application
 * Represents an Ext JS application, which is typically 
 * a single page app using a Viewport.
 * An application consists of one or more Views. The 
 * behavior of a View is managed by its corresponding 
 * ViewController and ViewModel.
 * Global activities are coordinated by Controllers 
 * which are ultimately instantiated by an instance 
 * of this (or a derived) class.
 * 通常、ビューポートを使用して1つのページの app である 
 * ExtJS アプリケーションを表します。
 * アプリケーションは、1つまたは複数の View で構成されて
 * います。View の動作は、その対応する ViewController 
 * と ViewModel によって管理されます。
 * グローバルな動作は、このインスタンス(または派生)
 * クラスで最終的にインスタンス化されている Controller 
 * によって調整されます。(GeoExt doc[w/ext])
 */
 name: 'FeatureGrids',
 /** name : String
  * The name of your application. This will also be the 
  * namespace for your views, controllers models and 
  * stores. Don't use spaces or special characters in 
  * the name. Application name is mandatory.
  * アプリケーションの名前。これはまた、views、controllers 
  * models と stores の名前空間になります。name には
  * スペースや特殊文字を使用しないでください。アプリケー
  * ション名は必須です。初期値は、''。
  * (GeoExt doc[w/ext])
  */
 launch: function() {
 /** launch( profile ) : Booleantemplate
  * Called automatically when the page has completely 
  * loaded. This is an empty function that should be 
  * overridden by each application that needs to take 
  * action on page load.
  * ページが完全にロードされたときに自動的に呼び出されます。
  * これは、ページのロード時にアクションを実行する必要があ
  * る各アプリケーションによって上書きされなければならない
  * 空の関数です。(GeoExt doc[w/ext])
  */
  var geojson1 = {
   "type": "FeatureCollection",
   "features": [
    {
     "type": "Feature",
     "properties": {
      "city": "Hamburg",
      "pop": 1700000
     },
     "geometry": {
      "type": "Point",
      "coordinates": [
       10.107421874999998,
       53.527247970102465
      ]
     }
    },
    {
     "type": "Feature",
     "properties": {
      "city": "Frankfurt / Main",
      "pop": 700000
     },
     "geometry": {
      "type": "Point",
      "coordinates": [
       8.76708984375,
       50.064191736659104
      ]
     }
    },
    {
     "type": "Feature",
     "properties": {
      "city": "Berlin",
      "pop": 3500000
     },
     "geometry": {
      "type": "Point",
      "coordinates": [
       13.447265624999998,
       52.53627304145948
      ]
     }
    },
    {
     "type": "Feature",
     "properties": {
      "city": "München",
      "pop": 1400000
     },
     "geometry": {
      "type": "Point",
      "coordinates": [
       11.6455078125,
       48.1367666796927
      ]
     }
    }
   ]
  };
  var geojson2 = {
   "type": "FeatureCollection",
   "features": [
    {
     "type": "Feature",
     "properties": {
      "city": "Dortmund"
     },
     "geometry": {
      "type": "Point",
      "coordinates": [
       7.481689453125,
       51.49506473014368
      ]
     }
    },
    {
     "type": "Feature",
     "properties": {
      "city": "Köln"
     },
     "geometry": {
      "type": "Point",
      "coordinates": [
       6.976318359375,
       50.93073802371819
      ]
     }
    },
    {
     "type": "Feature",
     "properties": {
      "city": "Kaiserslautern"
     },
     "geometry": {
      "type": "Point",
      "coordinates": [
       7.7838134765625,
       49.44670029695474
      ]
     }
    },
    {
     "type": "Feature",
     "properties": {
      "city": "Bonn"
     },
     "geometry": {
      "type": "Point",
      "coordinates": [
       7.102661132812499,
       50.74688365485319
      ]
     }
    },
    {
     "type": "Feature",
     "properties": {
      "city": "Stuttgart"
     },
     "geometry": {
      "type": "Point",
      "coordinates": [
       9.1461181640625,
       48.77429274267509
      ]
     }
    }
   ]
  };
  // style objects
  var blueStyle = new ol.style.Style({
  /** ol.style.Style 
   * Container for vector feature rendering styles. Any 
   * changes made to the style or its children through 
   * set*() methods will not take effect until the 
   * feature or layer that uses the style is re-rendered.
   * ベクタフィーチャがスタイルを描画するためのコンテナ。
   * スタイルや set*() メソッドを通じてその子に加えられた変
   * 更は、スタイルを使用するフィーチャまたはレイヤが再レン
   * ダリングされるまで有効になりません。
   * (ol3 API[説明は Stable Only のチェックを外すと表示])
   */
   image: new ol.style.Circle({
   /** ol.style.Circle
    * Set circle style for vector features.
    * ベクタフィーチャの円のスタイルを設定。(ol3 API)
    */
    radius: 6,
    fill: new ol.style.Fill({
    /** ol.style.Fill 
     * Set fill style for vector features.
     * ベクタフィーチャの塗りつぶしスタイルを設定。
     * (ol3 API[説明は Stable Only のチェックを外すと表示])
     */
     color: '#0099CC'
    }),
    stroke: new ol.style.Stroke({
    /** ol.style.Stroke 
     * Set stroke style for vector features. 
     * Note that the defaults given are the Canvas defaults, 
     * which will be used if option is not defined. 
     * The get functions return whatever was entered 
     * in the options;  they will not return the default.
     * ベクタフィーチャのためのストロークスタイルの設定。
     * デフォルトは、オプションが定義されていない場合に使用さ
     * れる Canvas のデフォルトを与えられることに注意してくだ
     * さい。GET 関数は、オプションで入力されたものはすべて返
     * す。それらはデフォルトを返しません。
     * (ol3 API[説明は Stable Only のチェックを外すと表示])
     */
     color: '#fff',
     width: 2
    })
   })
  });
  var redStyle = new ol.style.Style({
   image: new ol.style.Circle({
    radius: 6,
    fill: new ol.style.Fill({
     color: '#8B0000'
    }),
    stroke: new ol.style.Stroke({
     color: '#fff',
     width: 2
    })
   })
  });
  var selectStyle = new ol.style.Style({
   image: new ol.style.Circle({
    radius: 6,
    fill: new ol.style.Fill({
     color: '#EE0000'
    }),
    stroke: new ol.style.Stroke({
     color: 'gray',
     width: 3
    })
   })
  });
  // create a feature collection in order to put into a 
  // feature store
  //フィーチャストアに置くためにフィーチャコレクションを作成
  //します。
  var vectorSource = new ol.source.Vector({
  /** ol.source.Vector
   * Provides a source of features for vector layers. 
   * Vector features provided by this source are 
   * suitable for editing. See ol.source.VectorTile for 
   * vector data that is optimized for rendering.
   * ベクタレイヤのフィーチャのソースを用意します。このソース
   * が提供するベクタフィーチャは、編集に適しています。レンダ
   * リングのために最適化されたベクタデータの 
   * ol.source.VectorTile を参照してください。(ol3 API)
   */
   features: (new ol.format.GeoJSON()).readFeatures(geojson1, {
   /** ol.format.GeoJSON 
    * Feature format for reading and writing data in the 
    * GeoJSON format.
    * GeoJSON フォーマットのデータを読み書きするためのフィー
    * チャフォーマット。(ol3 API)
    */
   /** readFeatures(source, opt_options)
    * Read all features from a GeoJSON source.
    * Works with both Feature and FeatureCollection 
    * sources. 
    * GeoJSON ソースからすべてのフィーチャを読み取ります。
    * フィーチャとフィーチャコレクションソースの両方で動作し
    * ます。
    * (ol3 API)
    */
    dataProjection: 'EPSG:4326',
    /** dataProjection:
     * Projection of the data we are reading. If not 
     * provided, the projection will be derived from the 
     * data (where possible) or the defaultDataProjection 
     * of the format is assigned (where set). If the 
     * projection can not be derived from the data and if 
     * no defaultDataProjection is set for a format, the 
     * features will not be reprojected.
     * 読み込んでいるデータの投影。提供されていない場合は、
     * 投影は、データ(可能な場合)または、割り当てられた
     * フォーマットの defaultDataProjection (設定されてい
     * る場合)が導き出されます。投影がデータから導き出され
     * ることができない場合、そして、defaultDataProjection 
     * がフォーマットに対して設定されていない場合、フィーチャ
     * は再投影されることはありません。(ol3 API)
     */
    featureProjection: 'EPSG:3857'
    /** featureProjection:
     * Projection of the feature geometries created by the 
     * format reader. If not provided, features will be 
     * returned in the dataProjection.
     * フォーマットリーダによって作成されたフィーチャジオメト
     * リの投影。提供されていない場合、フィーチャは、
     * dataProjection で返されます。(ol3 API)
     */
   })
  });
  var featColl = new ol.Collection(vectorSource.getFeatures());
  /** ol.Collection
   * An expanded version of standard JS Array, adding 
   * convenience methods for manipulation. Add and remove 
   * changes to the Collection trigger a Collection event. 
   * Note that this does not cover changes to the objects 
   * within the Collection; they trigger events on the 
   * appropriate object, not on the Collection as a whole.
   * 標準 JS Array の拡張バージョン、操作のための便利なメソッド
   * を追加します。Collection イベントを Collection トリガへ変
   * 更することを追加、削除します。これは Collection 内のオブ
   * ジェクトへの変更をカバーしていないことに注意してください。
   * それらは適切なオブジェクトにイベントをトリガし、Collection 
   * 全体にはしません。(ol3 API)
   */
  /** getFeatures()
   * Get all features on the source.
   * ソース上の不すべてのフィーチャを取得します。
   * (ol3 API)
   */
  // loading data via into ol source and create a vector 
  // layer to bind a vector layer to a feature store
  // ol.source を経由してデータをロードし、ベクタレイヤを
  // フィーチャストアに結合するためのベクタレイヤを作成します。
  var vectorLayer = new ol.layer.Vector({
  /** ol.layer.Vector
   * Vector data that is rendered client-side.
   * クライアント側で描画されるベクタデータ。(ol3 API)
   */
   source: new ol.source.Vector({
    features: (new ol.format.GeoJSON()).readFeatures(geojson2, {
     dataProjection: 'EPSG:4326',
     featureProjection: 'EPSG:3857'
    })
   }),
   style: redStyle
  });
  olMap = new ol.Map({
   layers: [
    new ol.layer.Tile({
    /** ol.layer.Tile 
     * For layer sources that provide pre-rendered, tiled 
     * images in grids that are organized by zoom levels 
     * for specific resolutions. 
     * プリレンダリング(事前描画)を提供するレイヤソースの
     * ための、特定の解像度でのズームレベルによって編成され
     * ているグリッドのタイルイメージ。(ol3 API)
     */
     source: new ol.source.TileWMS({
     /** ol.source.TileWMS
      * Layer source for tile data from WMS servers.
      * WMS サーバからのタイルデータのレイヤソース。
      * (ol3 API)
      */
      url: 'http://ows.terrestris.de/osm-gray/service',
      params: {'LAYERS': 'OSM-WMS', 'TILED': true}
     })
    }),
    vectorLayer
   ],
   view: new ol.View({
    center: ol.proj.fromLonLat([8, 50]),
    /** ol.proj.fromLonLat(coordinate, opt_projection)
     * Transforms a coordinate from longitude/latitude to a 
     * different projection.
     * 緯度/経度座標から異なる投影に変換します。(ol3 API)
     */
    zoom: 5
   })
  });
  // create feature store by passing a feature collection
  // フィーチャコレクションを渡すことによって、フィーチャスト
  // アを作成します。
  featStore1 = Ext.create('GeoExt.data.store.Features', {
  /** create( [name], [args] ) : Object
   * Instantiate a class by either full name, alias or 
   * alternate name.
   * If Ext.Loader is enabled and the class has not been 
   * defined yet, it will attempt to load the class via 
   * synchronous loading.
   * 完全な名前、別名または代替名のいずれかによってクラスを
   * インスタンス化します。
   * Ext.Loader が有効になっており、クラスがまだ定義されて
   * いない場合は、同期ロードを経由してクラスをロードしよう
   * とします。(GeoExt doc[w/ext)
   */
   features: featColl,
   /** features : ol.Collection
    * Initial set of features. Has to be an ol.Collection 
    * object with ol.Feature objects in it.
    * フィーチャの初期セット。その中で ol.Feature オブジェク
    * トと ol.Collection オブジェクトである必要があります。
    * (GeoExt doc[w/ext)
    */
   map: olMap,
   /** map : ol.Map
    * A map object to which a possible layer will be added.
    * 可能なレイヤが追加されるマップオブジェクト。
    * (GeoExt doc[w/ext)
    */
   createLayer: true,
   /** createLayer : Boolean
    * Setting this flag to true will create a vector layer 
    * with the given features and adds it to the given map 
    * (if available).
    * Defaults to: false
    * このフラグを true に設定すると、指定したfフィーチャを備え
    * たベクトルレイヤを作成し、(可能なら)それを指定されたマッ
    * プに追加します。
    * デフォルトは:false。(GeoExt doc[w/ext)
    */
   style: blueStyle
   /** style : ol.Style
    * An OpenLayers 3 style object to style the vector layer 
    * representing the features of this store.
    * このストアのフィーチャを表すベクトルレイヤのスタイルを設定
    * する OpenLayers 3 スタイルオブジェクト。
    * (GeoExt doc[w/ext)
    */
  });
  // create feature store by passing a vector layer
  // ベクタレイヤを通すことによってフィーチャストアを作成
  featStore2 = Ext.create('GeoExt.data.store.Features', {
   layer: vectorLayer,
   /** layer : ol.Layer
    * Initial layer holding features which will be added to 
    * the store.
    * ストアに追加されるフィーチャを保持する初期レイヤ。
    * (GeoExt doc[w/ext)
    */
   map: olMap
  });
  // default feature grid
  gridWest = Ext.create('Ext.grid.Panel', {
  /** Ext.grid.Panel
   * Grids are an excellent way of showing large amounts of 
   * tabular data on the client side. Essentially a 
   * supercharged <table>, GridPanel makes it easy to fetch, 
   * sort and filter large amounts of data.
   * グリッドは、クライアント側で表形式の大量のデータを示すための
   * 優れた方法です。基本的にあふれるほどの <table> に、グリッド
   * パネルは、大量のデータを簡単に読み込み、ソート、および、フィ
   * ルタリングすることができます。
   * (GeoExt doc[w/ext)
   */
   title: 'Feature Grid',
   /** title : String
    * The title text to be used to display in the Panel 
    * Header. Or a config object for a Panel Title. When 
    * a title is specified the Ext.panel.Header will 
    * automatically be created and displayed unless header 
    * is set to false.
    * Panel Header に表示するために使用される title テキスト。
    * または Panel Title のための config オブジェクト。タイト
    * ルが指定されている場合、ヘッダがfalseに設定されていない限 
    * り Ext.panel.Headerが自動的に作成され、表示されます。
    * (GeoExt doc[w/ext)
    */
   border: true,
   /** border : Boolean
    * Specify as false to render the Panel with zero width 
    * borders.
    * Leaving the value as true uses the selected theme's 
    * $panel-border-width
    * Defaults to false when using or extending Neptune.
    * Defaults to: true
    * Overrides: Ext.Component.border
    * ゼロ幅の border(境界線)でパネルを描画するため false 
    * を指定します。
    * true として値を残すためには、選択されたテーマ 
    * $panel-border-width を使用します。
    * ネプチューン(Neptune Theme)を使用するか拡張すると
    * き、デフォルトは false です。
    * デフォルトは:true。
    * (GeoExt doc[w/ext)
    */
   region: 'west',
   /** region : "north"/"south"/"east"/"west"/"center"
    * Defines the region inside border layout.
    * ボーダレイアウトの内側の領域を定義します。
    * Possible values:
    * north - Positions component at top.
    * south - Positions component at bottom.
    * east - Positions component at right.
    * west - Positions component at left.
    * center - Positions component at the remaining space. 
    *  There must be a component with region: "center" in 
    *  every border layout.
    *  region でコンポーネント、すべてのボーダレイアウト内の
    *  「center」、が存在する必要があります。
    * (GeoExt doc[w/ext)
    */
   store: featStore1,
   /** store : Ext.data.Store/String/Object
    * The data source to which the grid / tree is bound. 
    * Acceptable values for this property are:
    * grid / tree がバインドされているデータソース。このプロ
    * パティに指定できる値は以下のとおりです。
    * 
    * any Store class / subclass
    * an ID of a store
    * a Store config object. When passing a config you can 
    * specify the store type by alias. Passing a config 
    * object with a store type will dynamically create a 
    * new store of that type when the grid / tree is 
    * instantiated.
    * 設定を渡すときは、エイリアスによって、ストレージタイプを
    * 指定することができます。grid / tree がインスタンス化さ
    * れるときにストアタイプでconfigオブジェクトを渡すと、動
    * 的にそのタイプの新しいストアを作成します。
    * (GeoExt doc[w/ext)
    */
   columns: [
   /** columns : Ext.grid.column.Column[]/Object
    * An array of column definition objects which define all 
    * columns that appear in this grid. Each column 
    * definition provides the header text for the column, 
    * and a definition of where the data for that column 
    * comes from.
    * This can also be a configuration object for a 
    * HeaderContainer which may override certain default 
    * configurations if necessary. For example, the special 
    * layout may be overridden to use a simpler layout, or 
    * one can set default values shared by all columns:
    * このグリッドに表示されるすべてのカラムを定義するカラム定義
    * オブジェクトの配列。各カラム定義は、カラムに対してヘッダー
    * テキスト、およびそのカラムのデータの発生場所の定義を提供し
    * ます。
    * これは、必要に応じて、特定のデフォルト設定を上書きすること
    * ができる HeaderContainer ための設定オブジェクトにすること
    * もできます。例えば、特殊なレイアウト(layout)が簡単なレイ
    * アウトを使用するために上書きすることができ、または、すべて
    * のカラムによって共有されるデフォルト値を設定することができ
    * ます。
    * (GeoExt doc[w/ext)
    */
    {xtype: 'gx_symbolizercolumn', width: 40},
    /** gx_symbolizercolumn
     * Alias for GeoExt.grid.column.Symbolizer.
     * Defaults to: 'gx_symbolizercolumn'
     * (GeoExt doc[w/ext)
     */
    /** GeoExt.grid.column.Symbolizer
     * An Ext.grid.column.Column pre-configured with a 
     * GeoExt.FeatureRenderer. This can be used to display 
     * the rendering style of a vector feature in a grid 
     * column.
     * GeoExt.FeatureRenderer で事前に設定された 
     * Ext.grid.column.Column 。これは、グリッドカラムにベクタ
     * のフィーチャのレンダリングスタイルを表示するために使用で
     * きます。
     * (GeoExt doc[w/ext)
     */
    {text: 'Name', dataIndex: 'city', flex: 1},
    /** dataIndex : String
     * The name of the field in the grid's 
     * Ext.data.Store's Ext.data.Model definition from 
     * which to draw the column's value. Required.
     * グリッドのExt.data.Store.のカラムの値を描画する 
     * Ext.data.Model 定義内のフィールド名。必須。
     * (GeoExt doc[w/ext])
     */
    /** flex : Number
     * Flex may be applied to child items of a box layout 
     * (vbox or hbox). Each child item with a flex property 
     * will fill space (horizontally in hbox, vertically in 
     * vbox) according to that item's relative flex value 
     * compared to the sum of all items with a flex value 
     * specified.
     * Any child items that have either a flex of 0 or 
     * undefined will not be 'flexed' (the initial size 
     * will not be changed).
     * flex(フレックス)は、ボックスレイアウト(VBOX または 
     * hbox)の子 item(アイテム)に適用することができます。
     * flex プロパティを持つそれぞれの子 item は、指定された 
     * flex 値を持つすべての item の合計と比べ、その item の
     * 相対的な flex 値に応じて(VBOX に垂直方向、hbox に水
     * 平方向)スペースを埋めます。
     * 0 flex または、未定義のいずれかを持っている任意の子 
     * item は、「(ウィンドウに合わせて)伸縮」されることは
     * ありません(初期サイズは変更されません)。
     * (GeoExt doc[w/ext)
     */
    {
     text: 'Population',
     dataIndex: 'pop',
     xtype: 'numbercolumn',
     /** numbercolumn(Ext.grid.column.Number)
      * Ext.grid.column.Number
      * A Column definition class which renders a numeric 
      * data field according to a format string.
      * 書式文字列に従って、数値データフィールドをレンダリン
      * グするカラム定義クラス。
      * (GeoExt doc[w/ext)
      */
     format: '0,000',
     /** format : String
      * A formatting string as used by Ext.util.Format.number
      * to format a numeric value for this Column.
      * Defaults to: '0,000.00'
      * このカラムの数値をフォーマットするため 
      * Ext.util.Format.number で使用される書式文字列。
      * デフォルト:「0,000.00」
      * (GeoExt doc[w/ext)
      */
     flex: 1
    }
   ],
   width: 250
   /** width : Number|String
    * The width of this component. A numeric value will be 
    * interpreted as the number of pixels; a string value 
    * will be treated as a CSS value with units.
    * このコンポーネントの幅。数値は、ピクセル数として解釈さ
    * れます。文字列値は単位でCSS値として扱われます。
    * (GeoExt doc[w/ext)
    */
  });
  // feature grid with some selection logic
  gridEast = Ext.create('Ext.grid.Panel', {
   title: 'Feature Grid with selection',
   border: true,
   region: 'east',
   store: featStore2,
   columns: [
    {xtype: 'gx_symbolizercolumn', width: 40},
    {text: 'Name', dataIndex: 'city', flex: 2}
   ],
   width: 250,
   listeners: {
   /** listeners : Object
    * A config object containing one or more event handlers 
    * to be added to this object during initialization. This 
    * should be a valid listeners config object as specified 
    * in the addListener example for attaching multiple 
    * handlers at once.
    * 初期化中にこのオブジェクトに追加される、1つまたは複数の
    * イベントハンドラを含む設定オブジェクト。これは、一度に
    * 複数のハンドラを取り付ける addListener の例で指定され
    * た有効なリスナ設定オブジェクトである必要があります。
    * (GeoExt doc[w/ext)
    */
    'selectionchange': function(grid, selected) {
     // reset all selections
     featStore2.each(function(rec) {
     /**.each( function )
      * Iterate over a jQuery object, executing a function 
      * for each matched element. 
      * 一致する各要素に対して関数を実行し、jQueryオブジェク
      * トを反復処理します。
      * (jQuery[http://api.jquery.com/each/])
      */
      rec.getFeature().setStyle(redStyle);
      /** getFeatures()
       * Get the selected features.
       * 選択されたフィーチャを取得します。
       * Return: Features collection(ol3 API)
       */
      /** setStyle(style)
       * Set the style for the feature. This can be a single 
       * style object, an array of styles, or a function 
       * that takes a resolution and returns an array of 
       * styles. If it is null the feature has no style (a 
       * null style).
       * フィーチャのスタイルを設定します。これは、単一のスタイ
       * ルオブジェクト、スタイルの配列、または解像度をとり、ス
       * タイルの配列を返す関数とすることができます。null の場
       * 合、フィーチャは、スタイルなし(null のスタイル)を持
       * ちます。(ol3 API)
       */
     });
     // highlight grid selection in map
     Ext.each(selected, function(rec) {
     /** each( iterable, fn, [scope], [reverse] ) : Boolean
      * Iterates an array or an iterable value and invoke 
      * the given callback function for each item.
      * 配列または反復可能オブジェクトの値を反復処理し、各項
      * 目に与えられたコールバック関数を呼び出します。
      * (GeoExt doc[w/ext)
      */
      rec.getFeature().setStyle(selectStyle);
     });
    }
   }
  });
  var mapComponent = Ext.create('GeoExt.component.Map', {
   map: olMap
  });
  var mapPanel = Ext.create('Ext.panel.Panel', {
   region: 'center',
   height: 400,
   /** height : Number|String
    * The height of this component. A numeric value will be 
    * interpreted as the number of pixels; a string value 
    * will be treated as a CSS value with units.
    * このコンポーネントの高さ。数値は、ピクセル数として解釈さ
    * れます。文字列値は単位でCSS値として扱われます。
    * (GeoExt doc[w/ext)
    */
   layout: 'fit',
   /** layout
    * By default, a lockable grid uses an HBox layout to 
    * arrange the two grids (possibly separated by a 
    * splitter).
    * Using this config it is possible to specify a 
    * different layout to arrange the two grids.
    * Defaults to: 'fit'
    * Overrides: Ext.grid.locking.Lockable.layout 
    * デフォルトでは、ロック可能なグリッドは(おそらくスプリッ
    * タで分離された)2つのグリッドを配置するのHBoxレイアウトを
    * 使用しています。
    * この設定を使用すると、2つのグリッドを配置する別のレイアウ
    * トを指定することが可能です。
    * デフォルト:"fit"
    * オーバーライド:Ext.grid.locking.Lockable.layout
    * (GeoExt doc[w/ext)
    */
   items: [mapComponent]
   /** layout : Ext.enums.Layout/Object
    * Important: In order for child items to be correctly 
    * sized and positioned, typically a layout manager must 
    * be specified through the layout configuration option.
    * The sizing and positioning of child items is the 
    * responsibility of the Container's layout manager 
    * which creates and manages the type of layout you have 
    * in mind. 
    * 重要:子アイテムが正しいサイズと配置されるためには、
    * 一般的にレイアウトマネージャは、layout configuration 
    * option(レイアウト設定オプション)を使用して指定する
    * 必要があります。
    * 子アイテムのサイズと位置は、レイアウトの種類を管理す
    * るContainer's layout manager(コンテナレイアウトマ
    * ネージャ)の役割です。
    * (GeoExt doc[w/ext)
    */
  });
  var description = Ext.create('Ext.panel.Panel', {
   contentEl: 'description',
   /** contentEl : String
    * Specify an existing HTML element, or the id of an 
    * existing HTML element to use as the content for this 
    * component.
    * This config option is used to take an existing HTML 
    * element and place it in the layout element of a new 
    * component (it simply moves the specified DOM element 
    * after the Component is rendered to use as the content.
    * 既存のHTMLエレメントを指定するか、既存のHTMLエレメン
    * トの id は、このコンポーネントのコンテンツとして使用
    * します。
    * Component(コンポーネント)が 、content(コンテンツ)
    * として使用するためにレンダリングされた後に、この設定オ
    * プションは、既存のHTMLエレメントを取得し、新しい 
    * component(コンポーネント)の layout(レイアウト)エレ
    * メントでそれを配置するために使用されます(それは単に指定
    * された DOM エレメントを移動させます)。
    * (GeoExt doc[w/ext)
    */
   region: 'south',
   title: 'Description',
   height: 180,
   border: false,
   bodyPadding: 5,
   /** bodyPadding : Number/String
    * A shortcut for setting a padding style on the body 
    * element. The value can either be a number to be 
    * applied to all sides, or a normal css string 
    * describing padding.
    * bodyエレメントにパディングスタイルを設定するための
    * ショートカット。値は、すべての側面に適用される数字、
    * または通常のCSSの文字列記述パディングのいずれかにで
    * きます。
    * (GeoExt doc[w/ext)
    */
   autoScroll: true
   /** autoScroll : Booleandeprecated
    * This cfg has been deprected since 5.1.0
    * Use scrollable instead
    */
  });
  Ext.create('Ext.Viewport', {
  /** Ext.Viewport (Ext.container.Viewport)
   * A specialized container representing the viewable 
   * application area (the browser viewport).
   * The Viewport renders itself to the document body, 
   * and automatically sizes itself to the size of the 
   * browser viewport and manages window resizing. There 
   * may only be one Viewport created in a page.
   * 表示可能なアプリケーション領域(ブラウザのビューポート)
   * を表す特殊なコンテナ。
   * Viewport は、document body にそれ自身をレンダリングし、
   * 自動的に自身のサイズをブラウザのビューポートのサイズにし、
   * ウィンドウのサイズ変更を管理します。1ページに作成した
   * ビューポートは一つだけ設定できます。
   * (GeoExt doc[w/ext])
   */
   layout: 'border',
   /** layout : Ext.enums.Layout/Object
    * Important: In order for child items to be correctly 
    * sized and positioned, typically a layout manager must 
    * be specified through the layout configuration option.
    * The sizing and positioning of child items is the 
    * responsibility of the Container's layout manager 
    * which creates and manages the type of layout you have 
    * in mind. 
    * 重要:子アイテムが正しいサイズと配置されるためには、
    * 一般的にレイアウトマネージャは、layout configuration 
    * option(レイアウト設定オプション)を使用して指定する
    * 必要があります。
    * 子アイテムのサイズと位置は、レイアウトの種類を管理す
    * るContainer's layout manager(コンテナレイアウトマ
    * ネージャ)の役割です。
    * (GeoExt doc[w/ext)
    */
   items: [mapPanel, gridWest, gridEast, description]
  });
 }
});

GeoExt3-dev 9 - Feature Grid Example 1

GeoExt3(https://geoext.github.io/geoext3/)の例(Examoles)をみていきます。

9 - Feature Grid Example
「Feature Grid Example(grid.html)」(「Examples」の「Feature Grid」)を参考に地図を表示してみます。
説明に次のようにあります。

This example shows how to display features in grids.

The grid on the left side is created by passing an OpenLayers collection (ol.Collection) with feature objects (ol.Feature)
The grid on the right side is created from an existing vector layer and also highlights the selected feature in the grid on the map.

この例では、グリッドのフィーチャを表示する方法を示しています。

左側のグリッドがフィーチャオブジェクト(ol.Feature)と共に OpenLayers コレクション(ol.Collection)を渡すことによって作成されます。
右側のグリッドは、既存のベクトルレイヤから作成され、また、マップ上のグリッド内の選択したフィーチャを強調しています。

9-1 HTML ファイルの作成
1 NetBeans を起動します。









2 「プロジェクト」ペインでツリーを geoext3proj -> サイト・ルート -> js -> libs -> geoext3-master -> examples -> features とクリックして展開し grid.html をダブルクリックして開きます。grid.js もダブルクリックして開きます。



3 「新規ファイル」ボタンをクリックします。

4 ステップ「1.ファイル・タイプを選択」の「カテゴリ」で「HTML5」、「ファイルタイプ」で「HTMLファイル」を選択して「次>」ボタンをクリックします。






5 「new HTML ファイル」ダイアログで「ファイル名」を「9-geoext3」と入力して「終了」ボタンをクリックします。







保存フォルダを変更するときは、「フォルダ」右の「参照」ボタンをクリックして「フォルダを参照」で「geoext3proj-サイト・ルート」をクリックして選択し「フォルダを選択」ボタンをクリックします。









6 「grid.html」の内容をコピーして「9-geoext3.html」に貼り付け、修正します。

7 同じように、「新規ファイル」ボタンをクリックし、ステップ「1.ファイル・タイプを選択」の「カテゴリ」で「HTML5」、「ファイルタイプ」で「JavaScriptファイル」をクリックして選択し「次>」ボタンをクリック。「ファイル名」を「9-geoext3」と入力して「終了」ボタンをクリック。「grid.js」の内容をコピーして貼り付け、修正します。



「index.html」
<html>
 <head>
  <title>TODO supply a title</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 </head>
 <body>
  <div>TODO write content</div>
  <div><a href="./3-geoext3.html">3-geoext3.html</a></div>
  <div><a href="./4-geoext3.html">4-geoext3.html</a></div>
  <div><a href="./5-geoext3.html">5-geoext3.html</a></div>
  <div><a href="./6-geoext3.html">6-geoext3.html</a></div>
  <div><a href="./7-geoext3.html">7-geoext3.html</a></div>
  <div><a href="./8-geoext3.html">8-geoext3.html</a></div>
  <div><a href="./9-geoext3.html">9-geoext3.html</a></div>
 </body>
</html>


「9-geoext3.html」
<!DOCTYPE HTML>
<html>
 <head>
  <meta charset=utf-8" />
  <title>Feature Grid Example</title>
  <link rel="stylesheet" type="text/css" href="http://openlayers.org/en/master/css/ol.css" />
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-crisp/resources/theme-crisp-all.css" />
 </head>
 <body>
  <div id='description'>
   <p>This example shows how to display features in grids. 
    <br><br>
    The grid on the left side is created by passing an 
    OpenLayers collection (ol.Collection) with feature 
    objects (ol.Feature)<br>
    The grid on the right side is created from an existing  
    vector layer and also highlights the selected feature  
    in the grid on the map. </p>
   <p>Have a look at 
    <!-- <a href="grid.js">grid.js</a> --> 
    <a href="9-geoext3.js">9-geoext3.js</a> 
    to see how this is done.</p>
  </div>
  <script src="http://openlayers.org/en/master/build/ol.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
  <script>
   Ext.Loader.setConfig({
   /** ExtLoader
    * This class provides dynamic loading support for 
    * JavaScript classes. Application code does not 
    * typically need to call Ext.Loader except perhaps 
    * to configure path mappings when not using Sencha 
    * Cmd.
    * このクラスは、JavaScript クラスの動的ローディン
    * グサポートを提供します。アプリケーションコードは、
    * Sencha Cmd を使用しないでパスマッピングを設定する
    * 大方の場合以外 通常、Ext.Loader を呼び出す必要は
    * ありません。
    * (GeoExt doc[w/ext])
    */
   /** setConfig(config) 
    * Set the configuration for the loader. This should 
    * be called right after ext-(debug).js is included 
    * in the page, and before Ext.onReady. i.e:
    * ローダの設定を設定します。これは、ext-(debug).js 
    * がページに読み込まれる後と Ext.onReady の前に正し
    * く呼び出さなければなりません。
    * (GeoExt doc[w/ext])
    */
    enabled: true,
    /** nabled : Boolean
     * Whether or not to enable the dynamic dependency 
     * loading feature. Defaults to: true.
     * 動的依存関係のロード機能の有効または無効。
     * デフォルト: true
     * (GeoExt doc[w/ext])
     */
    paths: {
    /** paths : Object
     * The mapping from namespaces to file paths.
     * Note that all relative paths are relative to the 
     * current HTML document. If not being specified, 
     * for example, Other.awesome.Class will simply be 
     * loaded from "./Other/awesome/Class.js".
     * 名前空間からファイルパスへのマッピング。すべて
     * の相対パスは、現在のHTMLドキュメントに対して相
     * 対的であることに注意してください。指定されてい
     * ない場合には、例えば、Other.awesome.Class は単
     * に「./Other/awesome/Class.js」からロードされま
     * す。
     * (GeoExt doc[w/ext])
     */
     // 'GeoExt': '../../src/'
     'GeoExt': './js/libs/geoext3-master/src/'
    }
   });
  </script>
  <!-- <script src="gridp.js"></script> -->
  <script src="9-geoext3.js"></script>
 </body>
</html>

GeoExt3-dev 8 - Popup Example 2

8-2 JavaScript ファイルの作成
「gx-popup.js(8-geoext3.js)」は、マップを表示するための JavaScript ファイルです。

「8-geoext3.js」
Ext.require([
/** require( expressions, [fn], [scope] )
 * Loads all classes by the given names and all their 
 * direct dependencies; optionally executes the given 
 * callback function when finishes, within the optional 
 * scope.
 * 指定された名前とそのすべての直接依存によって、すべて
 * のクラスをロードします。任意の範囲内で、終了するとき
 * に任意で与えられたコールバック関数を実行します。
 * (GeoExt doc[w/ext])
 */
 'GeoExt.component.Map',
 /** GeoExt.component.Map
  * The map component and a panel side by side
  * map component(マップコンポーネント)とパネルの位置関
  * 係(並び)。
  * (GeoExt doc[w/ext])
  */
]);
var olMap,
 mapComp,
 popup;
Ext.application({
/** Ext.app.Application
 * Represents an Ext JS application, which is typically 
 * a single page app using a Viewport.
 * An application consists of one or more Views. The 
 * behavior of a View is managed by its corresponding 
 * ViewController and ViewModel.
 * Global activities are coordinated by Controllers 
 * which are ultimately instantiated by an instance 
 * of this (or a derived) class.
 * 通常、ビューポートを使用して1つのページの app である 
 * ExtJS アプリケーションを表します。
 * アプリケーションは、1つまたは複数の View で構成されて
 * います。View の動作は、その対応する ViewController 
 * と ViewModel によって管理されます。
 * グローバルな動作は、このインスタンス(または派生)
 * クラスで最終的にインスタンス化されている Controller 
 * によって調整されます。(GeoExt doc[w/ext])
 */
 name: 'Popup',
 /** name : String
  * The name of your application. This will also be the 
  * namespace for your views, controllers models and 
  * stores. Don't use spaces or special characters in 
  * the name. Application name is mandatory.
  * アプリケーションの名前。これはまた、views、controllers 
  * models と stores の名前空間になります。name には
  * スペースや特殊文字を使用しないでください。アプリケー
  * ション名は必須です。初期値は、''。
  * (GeoExt doc[w/ext])
  */
 launch: function() {
 /** launch( profile ) : Booleantemplate
  * Called automatically when the page has completely 
  * loaded. This is an empty function that should be 
  * overridden by each application that needs to take 
  * action on page load.
  * ページが完全にロードされたときに自動的に呼び出されます。
  * これは、ページのロード時にアクションを実行する必要があ
  * る各アプリケーションによって上書きされなければならない
  * 空の関数です。(GeoExt doc[w/ext])
  */
  var description;
  olMap = new ol.Map({
   layers: [
    new ol.layer.Tile({
    /** ol.layer.Tile 
     * For layer sources that provide pre-rendered, tiled 
     * images in grids that are organized by zoom levels 
     * for specific resolutions. 
     * プリレンダリング(事前描画)を提供するレイヤソースの
     * ための、特定の解像度でのズームレベルによって編成され
     * ているグリッドのタイルイメージ。(ol3 API)
     */
     source: new ol.source.Stamen({
     /** ol.source.Stamen
      * Layer source for the Stamen tile server.
      * Stamen タイルサーバのレイヤソース。(ol3 API)
      * (2 - ol3ex 24b - Stamen example 1 参照)
      */
      layer: 'watercolor'
     })
    }),
    new ol.layer.Tile({
     source: new ol.source.Stamen({
      layer: 'terrain-labels'
     })
    })
   ],
   view: new ol.View({
    center: ol.proj.fromLonLat( [-122.416667, 37.783333] ),
    /** ol.proj.fromLonLat(coordinate, opt_projection)
     * Transforms a coordinate from longitude/latitude to a 
     * different projection.
     * 緯度/経度座標から異なる投影に変換します。(ol3 API)
     */
    zoom: 12
   })
  });
  popup = Ext.create('GeoExt.component.Popup', {
  /** create( [name], [args] ) : Object
   * Instantiate a class by either full name, alias or 
   * alternate name.
   * If Ext.Loader is enabled and the class has not been 
   * defined yet, it will attempt to load the class via 
   * synchronous loading.
   * 完全な名前、別名または代替名のいずれかによってクラスを
   * インスタンス化します。
   * Ext.Loader が有効になっており、クラスがまだ定義されて
   * いない場合は、同期ロードを経由してクラスをロードしよう
   * とします。(GeoExt doc[w/ext)
   */
  /** GeoExt.component.Popup
   * An GeoExt.component.Popup can be used to displays a 
   * popup over the map.
   * GeoExt.component.Popup はマップ(map)上にポップアップ
   * を表示するために使用されます。
   * (GeoExt doc[w/ext])
   */
   map: olMap,
   width: 140
   /** width : Number|String
    * The width of this component. A numeric value will be 
    * interpreted as the number of pixels; a string value 
    * will be treated as a CSS value with units.
    * このコンポーネントの幅。数値は、ピクセル数として解釈され
    * ます。文字列値は単位でCSS値として扱われます。
    * (GeoExt doc[w/ext])
    */
  });
  mapComp = Ext.create('GeoExt.component.Map', {
   title: 'GeoExt.component.Map Example',
   /** title : String
    * The title text to be used to display in the Panel 
    * Header. Or a config object for a Panel Title.
    * Panel Header に表示するために使用される title テキ
    * スト。または Panel Title のための config オブジェ
    * クト。(GeoExt doc[w/ext)
    */
   map: olMap,
   region: 'center',
   /** region : "north"/"south"/"east"/"west"/"center"
    * Defines the region inside border layout.
    * ボーダレイアウト内の領域を遅疑します。
    * (GeoExt doc[w/ext])
    */
   pointerRest: true,
   /** pointerRest : Boolean
    * A boolean flag to control whether the map component 
    * will fire the events pointerrest and pointerrestout. 
    * If this is set to false (the default), no such events 
    * will be fired.Whether the component shall provide the 
    * pointerrest and pointerrestout events.
    * Defaults to: false
    * マップコンポーネントが pointerrest と pointerrestout 
    * イベントを発生するかどうかを制御するための boolean フラ
    * グ。これが false に設定されている(デフォルト)場合は、
    * コンポーネントが pointerrest と pointerrestoutイベント
    * を提供しなければならないかどうかというようなイベントは発
    * 生されません。
    * デフォルト:false
    * (GeoExt doc[w/ext])
    */
   pointerRestInterval: 750,
   /** pointerRestInterval : Number
    * The amount of milliseconds after which we will 
    * consider a rested pointer as pointerrest. Only 
    * relevant if pointerRest is true.The interval in 
    * milliseconds.
    * Defaults to: 1000
    * pointerrest として停止ポインタを考慮した後のミリ秒単位の
    * 量。pointerRest が true の場合のみ関連性があります。ミリ
    * 秒単位の間隔。
    * デフォルト: 1000
    * (GeoExt doc[w/ext])
    */
   pointerRestPixelTolerance: 5
   /** pointerRestPixelTolerance : Number
    * The amount of pixels that a pointer may move in both 
    * vertical and horizontal direction, and still be 
    * considered to be a pointerrest. Only relevant if 
    * pointerRest is true.The tolerance in pixels.
    * Defaults to: 3
    * ポインタはまだ両方の垂直および水平方向に移動でき、そして 
    * pointerrest であると考られるピクセルの量。pointerRest 
    * が true の場合のみ関連性がある。ピクセル単位の許容範囲。
    * デフォルト:3
    * (GeoExt doc[w/ext])
    */
  });
  // Add a pointerrest handler to the map component to 
  // render the popup.
  // ポップアップをレンダリングするためにマップコンポーネント
  // にpointerrestハンドラを追加します。
  mapComp.on('pointerrest', function(evt) {
  /** on( eventName, [fn], [scope], [options], [order] ) : 
   * Object
   * The on method is shorthand for addListener.
   * on メソッドは addListener の短縮形。
   * (GeoExt doc[w/ext])
   */
   var coordinate = evt.coordinate,
   /** coordinate{ol.Coordinate}
    * The coordinate of the original browser event.
    * オリジナルブラウザイベントの coordinate。(ol3 API)
    */
   hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
    coordinate, 'EPSG:3857', 'EPSG:4326'));
   /** ol.coordinate.toStringHDMS(coordinate)
    * Format a geographic coordinate with the hemisphere, 
    * degrees, minutes, and seconds.
    * 半球、度、分、秒で地理座標をフォーマットします。
    * (ol3 API)
    */
   /** 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)
    */
   // Insert a linebreak after either N or S in hdms
   // hdms の N または S いずれかの後に改行を挿入します。
   hdms = hdms.replace(/([NS])/, '$1<br>');
   /** String.prototype.replace()
    * replace() メソッドは、pattern にマッチした文字列の一部ま
    * たは全てを replacement で置き換えた新しい文字列を返しま
    * す。pattern は文字列または RegExp、replacement は文字列
    * または各マッチで呼び出される関数です。
    * str.replace(pattern, replacement[, flags])
    * (MDN[https://developer.mozilla.org/ja/docs/Web/
    * JavaScript/Reference/Global_Objects/String/replace])
    */
   // set content and position popup
   // コンテンツを設定しポップアップを配置します。
   popup.setHtml('<p><strong>Pointer rested on</strong>' +
    '<br /><code>' + hdms + '</code></p>');
   /** setHtml( html )private
    * Parameters - html : Object(GeoExt doc[w/ext])
    */
   popup.position(coordinate);
   /** position(coordinate)
    * (Re-)Positions the popup to the given coordinates.
    * 指定された座標にポップアップを配置します。
    * (GeoExt doc[w/ext])
    */
   popup.show();
   /** show( this, eOpts )
    * Fires after the component is shown when calling the 
    * show method.
    * show メソッドを呼び出すときにコンポーネントが表示された
    * 後発生します。
    * (GeoExt doc[w/ext])
    */
  });
  // hide the popup once it isn't on the map any longer
  //それがマップ(map)上にすでにないときポップアップを隠します。
  mapComp.on('pointerrestout', popup.hide, popup);
  description = Ext.create('Ext.panel.Panel', {
  /** Ext.panel.Panel
   * Panel is a container that has specific functionality 
   * and structural components that make it the perfect 
   * building block for application-oriented user interfaces.
   * Panels are, by virtue of their inheritance from 
   * Ext.container.Container, capable of being configured 
   * with a layout, and containing child Components.
   * パネルは、特定の機能とそれアプリケーション指向のユーザ
   * インターフェイスに最適なビルディングブロックにする構造
   * 的要素を持っているコンテナです。パネルは、
   * Ext.container.Container からの継承のおかげで、layout 
   * で構成し、子コンポーネントを含むことができます。
   * (GeoExt doc[w/ext])
   */
   contentEl: 'description',
   /** contentEl : String
    * Specify an existing HTML element, or the id of an 
    * existing HTML element to use as the content for this 
    * component.
    * This config option is used to take an existing HTML 
    * element and place it in the layout element of a new 
    * component (it simply moves the specified DOM element 
    * after the Component is rendered to use as the content.
    * 既存のHTMLエレメントを指定するか、既存のHTMLエレメン
    * トの id は、このコンポーネントのコンテンツとして使用
    * します。
    * Component(コンポーネント)が 、content(コンテンツ)
    * として使用するためにレンダリングされた後に、この設定オ
    * プションは、既存のHTMLエレメントを取得し、新しい 
    * component(コンポーネント)の layout(レイアウト)エレ
    * メントでそれを配置するために使用されます(それは単に指定
    * された DOM エレメントを移動させます)。
    * (GeoExt doc[w/ext)
    */
   title: 'Description',
   region: 'east',
   width: 300,
   border: false,
   /** border : Boolean
    * Specify as false to render the Panel with zero width 
    * borders.
    * Leaving the value as true uses the selected theme's 
    * $panel-border-width.
    * Defaults to false when using or extending Neptune.
    * Defaults to: true.
    * ゼロ幅の border(境界線)でパネルを描画するため false 
    * を指定します。
    * true として値を残すためには、選択されたテーマ 
    * $panel-border-width を使用します。
    * ネプチューン(Neptune Theme)を使用するか拡張すると
    * き、デフォルトは false です。
    * デフォルトは:true。
    * (GeoExt doc[w/ext)
    */
   bodyPadding: 5
   /** bodyPadding : Number/String
    * A shortcut for setting a padding style on the body 
    * element. The value can either be a number to be 
    * applied to all sides, or a normal css string 
    * describing padding.
    * bodyエレメントにパディングスタイルを設定するための
    * ショートカット。値は、すべての側面に適用される数字、
    * または通常のCSSの文字列記述パディングのいずれかにで
    * きます。
    * (GeoExt doc[w/ext)
    */
  });
  Ext.create('Ext.Viewport', {
  /** Ext.Viewport (Ext.container.Viewport)
   * A specialized container representing the viewable 
   * application area (the browser viewport).
   * The Viewport renders itself to the document body, 
   * and automatically sizes itself to the size of the 
   * browser viewport and manages window resizing. There 
   * may only be one Viewport created in a page.
   * 表示可能なアプリケーション領域(ブラウザのビューポート)
   * を表す特殊なコンテナ。
   * Viewport は、document body にそれ自身をレンダリングし、
   * 自動的に自身のサイズをブラウザのビューポートのサイズにし、
   * ウィンドウのサイズ変更を管理します。1ページに作成した
   * ビューポートは一つだけ設定できます。
   * (GeoExt doc[w/ext])
   */
   layout: "border",
   /** layout : Ext.enums.Layout/Object
    * Important: In order for child items to be correctly 
    * sized and positioned, typically a layout manager must 
    * be specified through the layout configuration option.
    * The sizing and positioning of child items is the 
    * responsibility of the Container's layout manager 
    * which creates and manages the type of layout you have 
    * in mind. 
    * 重要:子アイテムが正しいサイズと配置されるためには、
    * 一般的にレイアウトマネージャは、layout configuration 
    * option(レイアウト設定オプション)を使用して指定する
    * 必要があります。
    * 子アイテムのサイズと位置は、レイアウトの種類を管理す
    * るContainer's layout manager(コンテナレイアウトマ
    * ネージャ)の役割です。
    * (GeoExt doc[w/ext)
    */
   items: [
   /** items : Object/Object[]
    * A single item, or an array of child Components to be 
    * added to this container
    * Unless configured with a layout, a Container simply 
    * renders child Components serially into its 
    * encapsulating element and performs no sizing or 
    * positioning upon them.
    * 単一の item(アイテム)、または子 Compornents(コン
    * ポーネント)の配列は、このコンテナに追加します。
    * layout(レイアウト)で構成されていない限り、Container
    * (コンテナ)は単に、子 Compornents(コンポーネント)
    * をそのカプセル化要素に直列にレンダリングし、それらに
    * サイズや位置調整も実行しません。
    * (GeoExt doc[w/ext)
    */
    mapComp,
    description
   ]
  });
 }
});