2017年11月28日火曜日

2 - ol4.5ex 175b - Vector Tile Info vector-tile-info 2

「vector-tile-info.js(2175-ol4ex.js)」は、マップを表示するための JavaScript ファイルです。

「2175-ol4ex.js」
var map = new ol.Map({
 target: 'map',
 view: new ol.View({
  center: [0, 0],
  zoom: 2
 }),
 layers: [new ol.layer.VectorTile({
 /** ol.layer.VectorTile
  * Layer for vector tile data that is rendered client-side. 
  * クライアント側にレンダリングされるベクタタイルデータのレイ 
  * ヤ。
  * (ol4 API)
  */
  source: new ol.source.VectorTile({
  /** ol.source.VectorTile
   * Class for layer sources providing vector data divided 
   * into a tile grid, to be used with ol.layer.VectorTile. 
   * Although this source receives tiles with vector 
   * features from the server, it is not meant for feature 
   * editing. Features are optimized for rendering, their 
   * geometries are clipped at or near tile boundaries and 
   * simplified for a view resolution. See ol.source.Vector 
   * for vector sources that are suitable for feature 
   * editing.
   * ol.layer.VectorTile で使用するタイルとグリッドに分割され
   * たベクタデータを提供するレイヤソースのクラス。このソース
   * はベクタフィーチャを持つタイルをサーバから受信しますが、
   * フィーチャの編集を意味したものではありません。フィーチャ
   * はレンダリングのために最適化され、そのジオメトリはタイル
   * の境界線、または、その近くでクリップされ、ビュー解像度の
   * ために単純化されます。フィーチャ編集に適したベクトルソー
   * スについては、ol.source.Vector を参照してください。
   * (ol4 API)
   */
   format: new ol.format.MVT(),
   /** format:
    * Feature format for tiles. Used and required by the 
    * default tileLoadFunction.
    * タイルのためのフィーチャフォーマット。デフォルトの 
    * tileLoadFunction によって使用され、必須とされます。
    * (ol4 API)
    */
   /** ol.format.MVT
    * Feature format for reading data in the Mapbox MVT 
    * format.
    * Mapbox MVT フォーマットの描画データのためのフィーチャ
    * フォーマット。(ol4 API)
    */
   url: 'https://basemaps.arcgis.com/v1/arcgis/rest/services/World_Basemap/VectorTileServer/tile/{z}/{y}/{x}.pbf'
   /** url:
    * URL template. Must include {x}, {y} or {-y}, and {z} 
    * placeholders. A {?-?} template pattern, for example 
    * subdomain{a-f}.domain.com, may be used instead of 
    * defining each one separately in the urls option.
    * URLテンプレート。 {x}、{y}、{-y}、{z} のプレースホル
    * ダーが必要です。 urlsオプションでそれぞれ個別に定義する
    * 代わりに、例えばサブドメイン {a-f}.domain.com の、
    * {?-?} テンプレートパターンを使用することができます。
    * (ol4 API)
    */
  })
 })]
});
map.on('pointermove', showInfo);
/** on
 * Listen for a certain type of event.
 * あるタイプのイベントをリッスンします。
 * (ol4 API)
 */
var info = document.getElementById('info');
/** document.getElementById()
 * Returns a reference to the element by its ID; the ID 
 * is a string which can be used to uniquely identify 
 * the element, found in the HTML id attribute.
 * ID によってエレメントに参照を返します。ID は、HTML id 
 * 属性に見られるエレメントを一意に識別するために使用される
 * 文字列です。
 * (MDN[https://developer.mozilla.org/en-US/docs/Web/
 * API/Document/getElementById])
 */
function showInfo(event) {
 var features = map.getFeaturesAtPixel(event.pixel);
 /** getFeaturesAtPixel(pixel, opt_options)
  * Get all features that intersect a pixel on the 
  * viewport.
  * viewport(ビューポート)上のピクセルと交差するすべての
  * フィーチャを取得します。(ol4 API)
  */
 if (!features) {
  info.innerText = '';
  /** Node.innerText
   * Node.innerText is a property that represents the 
   * "rendered" text content of a node and its descendants. 
   * As a getter, it approximates the text the user would 
   * get if they highlighted the contents of the element 
   * with the cursor and then copied to the clipboard. 
   * This feature was originally introduced by Internet 
   * Explorer, and was formally specified in the HTML 
   * standard in 2016 after being adopted by all major 
   * browser vendors.
   * Node.innerTextは、ノードと子孫の「描画された」テキス
   * トコンテンツを表すプロパティです。getter と、カーソル
   * でエレメントのコンテンツを強調表示し、それからクリッ
   * プボードにコピーした場合取得するテキストを近似しま
   * す。この機能は、元々、Internet Explorer によって導
   * 入され、主要なブラウザベンダーによって採用された後、
   * 2016年に HTML標準に正式に制定されました。
   * (MDN[https://developer.mozilla.org/en-US/docs/Web/
   * API/Node/innerText])
   */
  /** getter
   * The get syntax binds an oject property to a function 
   * that will be called when that property is looked up.
   * get 構文は、オブジェクトプロパティを、そのプロパティが
   * 検索されたときに呼び出される関数にバインドします。
   * (MDN[https://developer.mozilla.org/en-US/docs/Web/
   * JavaScript/Reference/Functions/get])
   */
  info.style.opacity = 0;
  return;
 }
 var properties = features[0].getProperties();
 /** getProperties()
  * Get an object of all property names and values.
  * オブジェクトの全ての属性名と値を取得します。(ol4 API)
  */
 info.innerText = JSON.stringify(properties, null, 2);
 /** JSON.stringify()
  * The JSON.stringify() method converts a JavaScript 
  * value to a JSON string, optionally replacing values 
  * if a replacer function is specified, or optionally 
  * including only the specified properties if a replacer 
  * array is specified.
  * JSON.stringify()メソッドは、JavaScript 値を JSON 
  * 文字列に変換します。replacer 関数が指定されている場合は、
  * オプションで値を置換するか、または、replacer 配列が指定さ
  * れている場合は、指定のプロパティのみをオプションで含みま
  * す。
  * (MDN[https://developer.mozilla.org/en-US/docs/Web/
  * JavaScript/Reference/Global_Objects/JSON/stringify])
  */
 info.style.opacity = 1;
}


2 - ol4.5ex 175a - Vector Tile Info 1

「Vector Tile Info (vector-tile-info.html)」を参考に地図を表示してみます。
説明に次のようにあります。

Move your pointer over rendered features to display feature properties.

フィーチャプロパティを表示するために描画されたフィーチャ上でポインタを移動します。

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



b 「ファイルを開く」ウィンドウで、「user」->「public_html」->「eclipse-workspace」->「ol4proj」-> 「v4.5.0」->「examples」->「vector-tile-info.html」をクリックして選択し、「OK」ボタンをクリッ クします。
同じように「vector-tile-info.js」を開きます。



(この状態でファイル名をキーボードで打つと検索欄が表示されて候補が絞り込めます。)

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



d 「ファイル」ウィンドウで「ol4proj」->「v4.5.0」->「examples」をクリックして選択し、「ファイル名」を「2175-ol4ex.html」と入力し、「完了」ボタンをクリックします。
(「ファイル」->「新規」->「その他」をクリックし、「ウィザードを選択」ダイアログで「Web」->「HTMLファイル」からテンプレートも作成できます。)







e 「vector-tile-info.html」の内容をコピーして「2175-ol4ex.html」に貼り付け、修正します。

f 同じように、新規に「2175-ol4ex.js」ファイルを作成し、「vector-tile-info.js」の内容をコピーして貼り付け、修正します。「svector-tile-info-require.js」も「2175-ol4ex-require.js」に貼り付けます。
(「ファイル」->「新規」->「JavaScript ソース・ファイル」をクリックし、「新規 JavaScript ファイル」ダイアログでテンプレートも作成できます。)






「2175-ol3ex.html」
<!DOCTYPE html>
<html lang="en-US">
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <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.6/css/bootstrap.min.css" type="text/css">
  <link rel="stylesheet" href="./resources/prism/prism.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="vector-tile-info.css">

  <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,URL"></script>
  <script src="./resources/zeroclipboard/ZeroClipboard.min.js"></script>
  <title>Vector Tile Info</title>
 </head>
 <body>
  <!-- 
  bootstrap-combined.min.css, ol.css, layout.css,
  CSSファイルで設定されたセレクタを使用。
  -->
  <header class="navbar" role="navigation">
   <div class="container">
    <div class="display-table pull-left" id="navbar-logo-container">
     <a class="navbar-brand" href="./"><img src="./resources/logo-70x70.png"> OpenLayers Examples</a>
    </div>
    <!-- menu items that get hidden below 768px width -->
    <nav class='collapse navbar-collapse navbar-responsive-collapse'>
     <ul class="nav navbar-nav pull-right">
      <li><a href="../doc">Docs</a></li>
      <li><a class="active" href="index.html">Examples</a></li>
      <li><a href="../apidoc">API</a></li>
      <li><a href="https://github.com/openlayers/openlayers">Code</a></li>
     </ul>
    </nav>
   </div>
  </header>
  <div class="container-fluid">
   <div id="latest-check" class="alert alert-warning alert-dismissible" role="alert" style="display:none">
    <button id="latest-dismiss" type="button" class="close" data-dismiss="alert" aria-label="Close">
     <span aria-hidden="true">&times;</span>
    </button>
     This example uses OpenLayers v<span>4.5.0</span>. 
     The <a id="latest-link" href="#" class="alert-link">latest</a>
     is v<span id="latest-version"></span>.
   </div>
   <div class="row-fluid">
    <div class="span12">
     <h4 id="title">Vector Tile Info</h4>
     <div id="map" class="map">
     <pre id="info" />
     </div>
    </div>
   </div>
   <div class="row-fluid">
    <div class="span12">
     <p id="shortdesc">Getting feature information from 
      vector tiles.</p>
     <div id="docs"><p>Move your pointer over rendered 
      features to display feature properties.</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>
       </li>,
       <li>
        <a href="../apidoc/ol.View.html" title="API documentation for ol.View">ol.View</a>
       </li>,
       <li>
        <a href="../apidoc/ol.format.MVT.html" title="API documentation for ol.format.MVT">ol.format.MVT</a>
       </li>,
       <li>
        <a href="../apidoc/ol.layer.VectorTile.html" title="API documentation for ol.layer.VectorTile">ol.layer.VectorTile</a>
       </li>,
       <li>
        <a href="../apidoc/ol.source.VectorTile.html" title="API documentation for ol.source.VectorTile">ol.source.VectorTile</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="codepen-button">
      <i class="fa fa-codepen"></i> Edit
     </a>
    </div>
    <form method="POST" id="codepen-form" target="_blank" action="https://codepen.io/pen/define/">
     <textarea class="hidden" name="title">Vector Tile Info</textarea>
     <textarea class="hidden" name="description">Getting feature information from vector tiles.</textarea>
     <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>
  <!-- 
  <script src="loader.js?id=svector-tile-info"></script>
  -->
  <!-- ファイル修正 -->
  <script src="loader.js?id=2175-ol4ex"></script>
 </body>
 <script>
  var packageUrl = 'https://raw.githubusercontent.com/openlayers/openlayers.github.io/build/package.json';
  fetch(packageUrl).then(function(response) {
  /** GlobalFetch.fetch()(This is an experimental technology)
   * The fetch() method of the GlobalFetch interface 
   * starts the process of fetching a resource. This 
   * returns a promise that resolves to the Response 
   * object representing the response to your request.
   * GlobalFetch インタフェースの fetch() メソッドは、リソー
   * スを取得する処理を開始します。これは要求に対する応答を表す 
   * Response オブジェクトに解決のプロミス(promise)を返しま
   * す。
   *(MDN[https://developer.mozilla.org/ja/docs/Web/API/
   * FGlobalFetch/fetch])
   */
   return response.json();
   /** Response(This is an experimental technology)
    * The Response interface of the Fetch API represents 
    * the response to a request.
    * Fetch API の Response インタフェースは、要求に対する応答
    * を表します。
    * (MDN[https://developer.mozilla.org/en-US/docs/Web/
    * API/Response])
    */
   /** Body.json()(This is an experimental technology)
    * The json() method of the Body mixin takes a Response 
    * stream and reads it to completion. It returns a 
    * promise that resolves with an object literal 
    * containing the JSON data.
    * Body mixin の json() メソッドは、Response ストリームを
    * 受け取り、それを完了させるために読み込みます。これは、
    * JSON データを含むオブジェクトリテラルで解決する約束
    * (promisee)を返します。
    * (MDN[https://developer.mozilla.org/en-US/docs/Web/
    * API/Body/json])
    */
  }).then(function(json) {
   var latestVersion = json.version;
   document.getElementById('latest-version').innerHTML = latestVersion;
   var url = window.location.href;
   var branchSearch = url.match(/\/([^\/]*)\/examples\//);
   /** String.prototype.match()
    * 正規表現 に対する 文字列 のマッチングの際に、そのマッチ結
    * 果を得るために使われます。
    * (MDN[https://developer.mozilla.org/ja/docs/Web/
    * JavaScript/Reference/Global_Objects/String/match])
    */
   var cookieText = 'dismissed=-' + latestVersion + '-';
   var dismissed = document.cookie.indexOf(cookieText) != -1;
   /** String.prototype.indexOf()
    * 呼び出す String オブジェクト 中で、指定された値が最初に現
    * れたインデックスを返します。fromIndex から検索を始め、値が
    * 見つからない場合は -1 を返します。
    * (MDN[https://developer.mozilla.org/ja/docs/Web/
    * JavaScript/Reference/Global_Objects/String/indexOf])
    */
   if (!dismissed && /^v[0-9\.]*$/.test(branchSearch[1]) && '4.1.0' != latestVersion) {
    var link = url.replace(branchSearch[0], '/latest/examples/');
    /** Location.replace()
     * The Location.replace() method replaces the current 
     * resource with the one at the provided URL. The 
     * difference from the assign() method is that after 
     * using replace() the current page will not be saved 
     * in session History, meaning the user won't be able 
     * to use the back button to navigate to it.
     * 指定された URL に現在の文書を置き換えます。 assign() メ
     * ソッドとの違いは、replace() を用いた後、現在のページは、
     * セッションの履歴には保持されないことです。つまり、ユーザ
     * は、置き換え前のページに戻るために、戻るボタンを使うこと
     * ができません。
     * (MDN[https://developer.mozilla.org/en-US/docs/Web/
     * API/Location/replace])
     */
    fetch(link, {method: 'head'}).then(function(response) {
     var a = document.getElementById('latest-link');
     a.href = response.status == 200 ? link : '../../latest/examples/';
     /** Response.status(This is an experimental technology)
      * The status read-only property of the Response 
      * interface contains the status code of the response 
      * (e.g., 200 for a success).
      * Response インタフェースの status 読み取り専用プロパティ
      * は、応答のステータス・コード(例えば、成功のために 200)
      * を含みます。
     * (MDN[https://developer.mozilla.org/en-US/docs/Web/
     * API/Response/status])
      */
    });
    var latestCheck = document.getElementById('latest-check');
    latestCheck.style.display = '';
    document.getElementById('latest-dismiss').onclick = function() {
     latestCheck.style.display = 'none';
     document.cookie = cookieText;
    }
   }
  });
 </script>
</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 9 では動作しませんでした。ボタンを右クリックしたときに flash のコンテキストメニューが表示されると動作しています。

2 - ol4.5ex 174b - Street Labels 2

「street-labels.js(2174-ol4ex.js)」は、マップを表示するための JavaScript ファイルです。

「2174-ol4ex.js」
var style = 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*() メソッドを通じてその子に加えられた変
 * 更は、スタイルを使用するフィーチャまたはレイヤが再レン
 * ダリングされるまで有効になりません。
 * (ol4 API)
 */
 text: new ol.style.Text({
 /** text:
  * Text style.(ol4 API)
  */
 /** ol.style.Text
  * Set text style for vector features.
  * ベクタフィーチャの文字列のスタイルを設定します。
  * (ol4 API)
  */
  font: 'bold 11px "Open Sans", "Arial Unicode MS", "sans-serif"',
  /** font:
   * Font style as CSS 'font' value, see: https://
   * developer.mozilla.org/en-US/docs/Web/API/
   * CanvasRenderingContext2D/font. Default is '10px 
   * sans-serif'
   * CSS「font」値と同じフォントスタイル。デフォルトは、
   * 「10px sans-serif」。(ol4 API)
   */
  placement: 'line',
  /** placement:
   * Text placement.(ol4 API)
   */
  fill: new ol.style.Fill({
  /** fill:
   * Fill style. If none is provided, we'll use a dark 
   * fill-style (#333).
   * 塗りつぶしスタイル。名前が提供されていなければダーク
   * フィルスタイル(#333)を使用します。(ol4 API)
   */
  /** ol.style.Fill 
   * Set fill style for vector features.
   * ベクタフィーチャの塗りつぶしスタイルを設定。
   * (ol4 API)
   */
   color: 'white'
   /** color:
    * A color, gradient or pattern. See ol.color and 
    * ol.colorlike for possible formats. Default null; 
    * if null, the Canvas/renderer default black will 
    * be used.
    * 色、グラデーション、または、パターン。可能なフォー
    * マットは、ol.color と ol.colorlike を参照して
    * ください。デフォルトは null。null の場合 
    * Canvas/renderer のデフォルト black(黒)が使
    * 用されます。(ol4 API)
    */
  })
 })
});
var viewExtent = [1817379, 6139595, 1827851, 6143616];
var map = 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. 
  * プリレンダリング(事前描画)を提供するレイヤソースのた
  * めの、特定の解像度でのズームレベルによって編成されてい
  * るグリッドのタイルイメージ。(ol4 API)
  */
  source: new ol.source.BingMaps({
  /** source:
   * Source for this layer. Required.
   * このレイヤのソース。必須。(ol4 API)
   */
  /** ol.source.BingMaps
   * Layer source for Bing Maps tile data.
   * Bing Maps タイルデータのレイヤソース。(ol4 API)
   */
  key: 'As1Hi...(省略)',
  /** key:
   * Bing Maps API key. Get yours at 
   * http://www.bingmapsportal.com/. Required.
   * (ol4 API)
   */
  imagerySet: 'Aerial'
  /** imagerySet:
   * Type of imagery. Required. 
   * 画像のタイプ。必須。(ol4 API)
   */
  })
 }), new ol.layer.Vector({
 /** ol.layer.Vector
  * Vector data that is rendered client-side.
  * クライアント側で描画されるベクタデータ。(ol4 API)
  */
  declutter: true,
  /** declutter:
   * Declutter images and text. Decluttering is 
   * applied to all image and text styles, and the 
   * priority is defined by the z-index of the style. 
   * Lower z-index means higher priority. Default is 
   * false.
   * 画像とテキストをぼかします。 ぼかし(デクラッタ)は、
   * すべての画像とテキストスタイルに適用され、優先順位は、
   * スタイルのZ-インデックスによって定義されます。 Z-イ
   * ンデックスが低いほど優先度が高くなります。デフォルト
   * は、false です。(ol4 API)
   */
  source: 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 を参照してください。
   * (ol4 API)
   */
  format: new ol.format.GeoJSON(),
  /** format: 
   * The feature format used by the XHR feature loader 
   * when url is set. Required if url is set, otherwise 
   * ignored. Default is undefined.
   * url が設定されたときに XHR フィーチャローダに使用さ
   * れるフィーチャフォーマット。url が設定された場合、必
   * 須で、それ以外は無視されます。デフォルトは、未定義です。
   * (ol4 API)
   */
  /** ol.format.GeoJSON 
   * Feature format for reading and writing data in the 
   * GeoJSON format.
   * GeoJSON フォーマットのデータを読み書きするためのフィー
   * チャフォーマット。(ol4 API)
   */
  url: 'data/geojson/vienna-streets.geojson'
  /** url
   * Setting this option instructs the source to load 
   * features using an XHR loader (see 
   * ol.featureloader.xhr). Use a string and an 
   * ol.loadingstrategy.all for a one-off download of 
   * all features from the given URL. Use a 
   * ol.FeatureUrlFunction to generate the url with 
   * other loading strategies. Requires format to be 
   * set as well. When default XHR feature loader is 
   * provided, the features will be transformed from 
   * the data projection to the view projection during 
   * parsing. If your remote data source does not 
   * advertise its projection properly, this 
   * transformation will be incorrect. For some formats, 
   * the default projection (usually EPSG:4326) can be 
   * overridden by setting the defaultDataProjection 
   * constructor option on the format. Note that if a 
   * source contains non-feature data, such as a 
   * GeoJSON geometry or a KML NetworkLink, these will 
   * be ignored. Use a custom loader to load these.
   * このオプションを設定すると、XHR ローダを
   * (ol.featureloader.xhr参照)を使用してフィーチャを
   * ロードするためのソースを指示します。指定された URL から
   * のすべてのフィーチャの1回限りのダウンロードのために 
   * string と ol.loadingstrategy.all を使用してくださ
   * い。他のローディングストラテジと共に URL を生成するため
   * に、ol.FeatureUrlFunctionを使用してください。format 
   * も同様に設定する必要があります。デフォルトの XHR フィー
   * チャローダが提供される場合、フィーチャは、解析中にデータ
   * 投影からビュー投影へ変換されます。リモート・データ・ソー
   * スが適切に投影を示していない場合は、この変換は不正確にな
   * ります。いくつかのフォーマットでは、デフォルトの投影(通
   * 常は EPSG:4326)は、フォーマット上の 
   * defaultDataProjection constructor オプションを設
   * 定することで上書きすることができます。ソースが、このよう
   * な GeoJSON ジオメトリ、または、 KML NetworkLink などの
   * 非フィーチャデータを含んでいる場合、これらは無視される
   * ことに注意してください。これらをロードするために、カス
   * タムローダを使用してください。
   * (ol4 API)
   */
  }),
  style: function(feature) {
  /** style:
   * Layer style. See ol.style for default style which 
   * will be used if this is not defined.
   * レイヤスタイル。これが定義されたいない場合、使用されるデ
   * フォルトスタイルについて ol.style を参照してください。
   * (ol4 API)
   */
   style.getText().setText(feature.get('name'));
   /** getText()
    * Get the text style.(ol4 API)
    */
   /** setText()
    * Set the text style.(ol4 API)
    */
   /** get(key)
    * Gets a value.(ol4 API)
    */
   return style;
  }
 })],
 target: 'map',
 view: new ol.View({
  extent: viewExtent,
  center: ol.extent.getCenter(viewExtent),
  /** ol.extent.getCenter(extent)
   * Get the center coordinate of an extent.
   * 範囲の中心座標を取得します。(ol4 API)
   */
  zoom: 17,
  minZoom: 14
 })
});
 
 

2 - ol4.5ex 174a - Street Labels 1

「Street Labels (street-labels.html)」を参考に地図を表示してみます。
説明に次のようにあります。

Example showing the use of a text style with placement: 'line' to render text along a path.

パスに沿ってテキストを描画するために「placement: 'line'」を使ったテキストスタイルの使用を示した例。


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



b 「ファイルを開く」ウィンドウで、「user」->「public_html」->「eclipse-workspace」->「ol4proj」-> 「v4.5.0」->「examples」->「street-labels.html」をクリックして選択し、「OK」ボタンをクリッ クします。
同じように「street-labels.js」を開きます。



(この状態でファイル名をキーボードで打つと検索欄が表示されて候補が絞り込めます。)

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



d 「ファイル」ウィンドウで「ol4proj」->「v4.5.0」->「examples」をクリックして選択し、「ファイル名」を「2174-ol4ex.html」と入力し、「完了」ボタンをクリックします。
(「ファイル」->「新規」->「その他」をクリックし、「ウィザードを選択」ダイアログで「Web」->「HTMLファイル」からテンプレートも作成できます。)







e 「street-labels.html」の内容をコピーして「2174-ol4ex.html」に貼り付け、修正します。

f 同じように、新規に「2174-ol4ex.js」ファイルを作成し、「street-labels.js」の内容をコピーして貼り付け、修正します。「street-labels-require.js」も「2174-ol4ex-require.js」に貼り付けます。
(「ファイル」->「新規」->「JavaScript ソース・ファイル」をクリックし、「新規 JavaScript ファイル」ダイアログでテンプレートも作成できます。)






「2174-ol3ex.html」
<!DOCTYPE html>
<html lang="en-US">
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <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.6/css/bootstrap.min.css" type="text/css">
  <link rel="stylesheet" href="./resources/prism/prism.css" type="text/css">
  <link rel="stylesheet" href="../css/ol.css" type="text/css">
  <link rel="stylesheet" href="./resources/layout.css" type="text/css">

  <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,URL"></script>
  <script src="./resources/zeroclipboard/ZeroClipboard.min.js"></script>
  <title>Street Labels</title>
 </head>
 <body>
  <!-- 
  bootstrap-combined.min.css, ol.css, layout.css,
  CSSファイルで設定されたセレクタを使用。
  -->
  <header class="navbar" role="navigation">
   <div class="container">
    <div class="display-table pull-left" id="navbar-logo-container">
     <a class="navbar-brand" href="./"><img src="./resources/logo-70x70.png"> OpenLayers Examples</a>
    </div>
    <!-- menu items that get hidden below 768px width -->
    <nav class='collapse navbar-collapse navbar-responsive-collapse'>
     <ul class="nav navbar-nav pull-right">
      <li><a href="../doc">Docs</a></li>
      <li><a class="active" href="index.html">Examples</a></li>
      <li><a href="../apidoc">API</a></li>
      <li><a href="https://github.com/openlayers/openlayers">Code</a></li>
     </ul>
    </nav>
   </div>
  </header>
  <div class="container-fluid">
   <div id="latest-check" class="alert alert-warning alert-dismissible" role="alert" style="display:none">
    <button id="latest-dismiss" type="button" class="close" data-dismiss="alert" aria-label="Close">
     <span aria-hidden="true">&times;</span>
    </button>
     This example uses OpenLayers v<span>4.5.0</span>. 
     The <a id="latest-link" href="#" class="alert-link">latest</a>
     is v<span id="latest-version"></span>.
   </div>
   <div class="row-fluid">
    <div class="span12">
     <h4 id="title">Tile Transitions</h4>
     <div id="map" class="map"></div>
     <label>
      render with an opacity transition
     <input id="transition" type="checkbox" checked>
    </label>
    </div>
   </div>
   <div class="row-fluid">
    <div class="span12">
     <p id="shortdesc">Render street names with a 
      custom render.</p>
     <div id="docs"><p>Example showing the use of a 
       text style with <code>placement: &amp#39;line&amp#39;
      </code> to render text along a path.</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>
       </li>,
       <li>
        <a href="../apidoc/ol.View.html" title="API documentation for ol.View">ol.View</a>
       </li>,
       <li>
        <a href="../apidoc/ol.extent.html" title="API documentation for ol.extent">ol.extent</a>
       </li>,
       <li>
        <a href="../apidoc/ol.format.GeoJSON.html" title="API documentation for ol.format.GeoJSON">ol.format.GeoJSON</a>
       </li>,
       <li>
        <a href="../apidoc/ol.layer.Tile.html" title="API documentation for ol.layer.Tile">ol.layer.Tile</a>
       </li>,
       <li>
        <a href="../apidoc/ol.layer.Vector.html" title="API documentation for ol.layer.Vector">ol.layer.Vector</a>
       </li>,
       <li>
        <a href="../apidoc/ol.source.BingMaps.html" title="API documentation for ol.source.BingMaps">ol.source.BingMaps</a>
       </li>,
       <li>
        <a href="../apidoc/ol.source.Vector.html" title="API documentation for ol.source.Vector">ol.source.Vector</a>
       </li>,
       <li>
        <a href="../apidoc/ol.style.Fill.html" title="API documentation for ol.style.Fill">ol.style.Fill</a>
       </li>,
       <li>
        <a href="../apidoc/ol.style.Style.html" title="API documentation for ol.style.Style">ol.style.Style</a>
       </li>,
       <li>
        <a href="../apidoc/ol.style.Text.html" title="API documentation for ol.style.Text">ol.style.Text</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="codepen-button">
      <i class="fa fa-codepen"></i> Edit
     </a>
    </div>
    <form method="POST" id="codepen-form" target="_blank" action="https://codepen.io/pen/define/">
     <textarea class="hidden" name="title">Street Labels</textarea>
     <textarea class="hidden" name="description">Render street names with a custom render.</textarea>
     <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>
  <!-- 
  <script src="loader.js?id=street-labels"></script>
  -->
  <!-- ファイル修正 -->
  <script src="loader.js?id=2174-ol4ex"></script>
 </body>
 <script>
  var packageUrl = 'https://raw.githubusercontent.com/openlayers/openlayers.github.io/build/package.json';
  fetch(packageUrl).then(function(response) {
  /** GlobalFetch.fetch()(This is an experimental technology)
   * The fetch() method of the GlobalFetch interface 
   * starts the process of fetching a resource. This 
   * returns a promise that resolves to the Response 
   * object representing the response to your request.
   * GlobalFetch インタフェースの fetch() メソッドは、リソー
   * スを取得する処理を開始します。これは要求に対する応答を表す 
   * Response オブジェクトに解決のプロミス(promise)を返しま
   * す。
   *(MDN[https://developer.mozilla.org/ja/docs/Web/API/
   * FGlobalFetch/fetch])
   */
   return response.json();
   /** Response(This is an experimental technology)
    * The Response interface of the Fetch API represents 
    * the response to a request.
    * Fetch API の Response インタフェースは、要求に対する応答
    * を表します。
    * (MDN[https://developer.mozilla.org/en-US/docs/Web/
    * API/Response])
    */
   /** Body.json()(This is an experimental technology)
    * The json() method of the Body mixin takes a Response 
    * stream and reads it to completion. It returns a 
    * promise that resolves with an object literal 
    * containing the JSON data.
    * Body mixin の json() メソッドは、Response ストリームを
    * 受け取り、それを完了させるために読み込みます。これは、
    * JSON データを含むオブジェクトリテラルで解決する約束
    * (promisee)を返します。
    * (MDN[https://developer.mozilla.org/en-US/docs/Web/
    * API/Body/json])
    */
  }).then(function(json) {
   var latestVersion = json.version;
   document.getElementById('latest-version').innerHTML = latestVersion;
   var url = window.location.href;
   var branchSearch = url.match(/\/([^\/]*)\/examples\//);
   /** String.prototype.match()
    * 正規表現 に対する 文字列 のマッチングの際に、そのマッチ結
    * 果を得るために使われます。
    * (MDN[https://developer.mozilla.org/ja/docs/Web/
    * JavaScript/Reference/Global_Objects/String/match])
    */
   var cookieText = 'dismissed=-' + latestVersion + '-';
   var dismissed = document.cookie.indexOf(cookieText) != -1;
   /** String.prototype.indexOf()
    * 呼び出す String オブジェクト 中で、指定された値が最初に現
    * れたインデックスを返します。fromIndex から検索を始め、値が
    * 見つからない場合は -1 を返します。
    * (MDN[https://developer.mozilla.org/ja/docs/Web/
    * JavaScript/Reference/Global_Objects/String/indexOf])
    */
   if (!dismissed && /^v[0-9\.]*$/.test(branchSearch[1]) && '4.1.0' != latestVersion) {
    var link = url.replace(branchSearch[0], '/latest/examples/');
    /** Location.replace()
     * The Location.replace() method replaces the current 
     * resource with the one at the provided URL. The 
     * difference from the assign() method is that after 
     * using replace() the current page will not be saved 
     * in session History, meaning the user won't be able 
     * to use the back button to navigate to it.
     * 指定された URL に現在の文書を置き換えます。 assign() メ
     * ソッドとの違いは、replace() を用いた後、現在のページは、
     * セッションの履歴には保持されないことです。つまり、ユーザ
     * は、置き換え前のページに戻るために、戻るボタンを使うこと
     * ができません。
     * (MDN[https://developer.mozilla.org/en-US/docs/Web/
     * API/Location/replace])
     */
    fetch(link, {method: 'head'}).then(function(response) {
     var a = document.getElementById('latest-link');
     a.href = response.status == 200 ? link : '../../latest/examples/';
     /** Response.status(This is an experimental technology)
      * The status read-only property of the Response 
      * interface contains the status code of the response 
      * (e.g., 200 for a success).
      * Response インタフェースの status 読み取り専用プロパティ
      * は、応答のステータス・コード(例えば、成功のために 200)
      * を含みます。
     * (MDN[https://developer.mozilla.org/en-US/docs/Web/
     * API/Response/status])
      */
    });
    var latestCheck = document.getElementById('latest-check');
    latestCheck.style.display = '';
    document.getElementById('latest-dismiss').onclick = function() {
     latestCheck.style.display = 'none';
     document.cookie = cookieText;
    }
   }
  });
 </script>
</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 9 では動作しませんでした。ボタンを右クリックしたときに flash のコンテキストメニューが表示されると動作しています。

v4.5.0 がリリースされました

日本時間で(2017.11.13)に v4.5.0 がリリースされました。

Releases 4.5.0 - openlayers/openlayers GitHub
(https://github.com/openlayers/openlayers/releases/tag/v4.5.0)より

4.5.0
Summary

The 4.5 release includes enhancements and fixes from 50 or so pull requests. Headlining this release, vector layers got a new declutter option that can be used to avoid overlapping labels. See the street labels example for a demonstration of this feature.

4.5リリースには、50個程度のプルリクエストからの拡張と修正が含まれています。 このリリースの表題をつけると、ベクタレイヤは、重複するラベルを避けるために使用される新しい declutter オプションが追加されました。 この機能のデモンストレーションの street labels の例を参照してください。

Please note that if you are using closure-util to build your OpenLayers based application, it is time to migrate to using the ol package and a module bundler like webpack. OpenLayers has not had a dependency on the Closure Library since the 3.19 release; and with the 5.0 release we will be moving completely away from goog.require and goog.provide, dropping support for closure-util, and going with ES modules for our sources.

OpenLayers ベースのアプリケーションを構築するために closure-util を使用している場合は、ol パッケージと webpack のようなモジュールバンドラを使用するように移行する機会です。 OpenLayers は、3.19リリース以来 Closure Library に依存していませんでした。 5.0リリースでは、goog.require と goog.provide から完全に離れ、closure-util のサポートを廃止し、ソースにESモジュールを使用します。

We will be adding details to the wiki about upcoming changes in 5.0 and tips on how to upgrade. We'll likely have a few more 4.x releases before the 5.0 release. But if you're interested in continuing to get feature enhancements in future releases, migrating to the ol package now will make the transition easier.

今後の5.0の変更点やアップグレード方法のヒントについては、wikiに詳細を追加します。 おそらく5.0リリースの前に4.xのリリースがいくつかあります。 しかし、将来のリリースで機能強化を継続したい場合は、今すぐ ol パッケージに移行することで簡単に(将来のリリースに)移行できます。

Upgrade notes

Removed GeoJSON crs workaround for GeoServer
GeoServer の GeoJSON crs 回避策を削除

Previous version of GeoServer returned invalid crs in GeoJSON output. The workaround in ol.format.GeoJSON used to read this crs code is now removed.

GeoServer の以前のバージョンでは、GeoJSON 出力に無効な crs が返されました。 この crs コードの読み取りに使用された ol.format.GeoJSON の回避策が削除されました。


Deprecation of ol.Attribution
ol.Attribution の非推奨

ol.Attribution is deprecated and will be removed in the next major version. Instead, you can construct a source with a string attribution or an array of strings. For dynamic attributions, you can provide a function that gets called with the current frame state.

ol.Attribution は非推奨とされ、次のメジャーバージョンで削除されます。 その代わりに、文字列属性または文字列の配列を使用してソースを構築することができます。 動的属性の場合、現在のフレーム状態で呼び出される関数を提供できます。

Before:
var source = new ol.source.XYZ({
 attributions: [
  new ol.Attribution({html: 'some attribution'})
 ]
});
After:
var source = new ol.source.XYZ({
 attributions: 'some attribution'
});
In addition to passing a string or an array of strings for the attributions option, you can also pass a function that will get called with the current frame state.

attributionsオプションに文字列または文字列の配列を渡すことに加え、現在のフレーム状態で呼び出される関数を渡すこともできます。
var source = new ol.source.XYZ({
 attributions: function(frameState) {
  // inspect the frame state and return attributions
  return 'some attribution'; // or ['multiple', 'attributions'] or null
 }
});

(Detailed Changes リストはサイトをみてください。)


OpenLayers のダウンロード
OpenLayers のホームページ(http://openlayers.org/)の「LATEST」の文中の「v4.5.0」をクリックします。


開いたページ「Downloads for the v4.5.0 release(http://openlayers.org/download/)」の「v4.5.0.zip」をクリックしてダウンロードします。


■参考■
「The ol package」と「Hosted builds for development」には、次のようなことが記載されています。

The ol package

The recommended way to use OpenLayers is to work with the ol package. You can install the latest with npm:

OpenLayers を使用する推奨方法は、ol パッケージで作業することです。npm で最新版をインストールできます:

npm install ol


Hosted builds for development

If you want to try out OpenLayers without downloading anything, a full build of each release which can be used in a script tag is available from cdnjs. You will need both the JS build and the CSS files; see the examples or the Quickstart tutorial for usage. Note that you should not use a full build in production, instead you are encouraged to use the ol package described above.

ダウンロードしないで OpenLayers を試したい場合は、スクリプトタグで使用できる各リリースのフルビルドを cdnjs から入手できます。 JSビルドファイルとCSSファイルの両方が必要になります。 使用例については、examples または Quickstart tutorial を参照してください。 本番環境では完全ビルドを使用しないでください。代わりに、上記の ol パッケージを使用することをお勧めします。
■ここまで■

次のようなダイアログが表示されたら「ファイルを保存する」のラジオボタンがオンになっていることを確認して「OK」ボタンをクリックします。



このファイルを解凍します。

user@deb9-vmw:~$ cd ダウンロード
user@deb9-vmw:~/ダウンロード$ ls
---
v4.5.0.zip
---
user@deb9-vmw:~/ダウンロード$ unzip v4.5.0.zip
user@deb9-vmw:~/ダウンロード$ ls
---
v4.5.0
v4.5.0.zip
---

ol4proj フォルダに、解凍した v4.5.0 フォルダを eclipse にインポートします。
eclipse を起動します。

user@deb9-vmw:~/ダウンロード$ cd
user@deb9-vmw:~$ eclipse

起動の途中で「ワークスペースの選択」ウィンドウが表示されます。
「参照」ボタンをクリックして /home/user/public_html/eclipse-workspace でとりあえず「OK」をクリックします。(Web ブラウザで表示しやすくするため eclipse-workspace を /home/user/public_html に移動しました。)


メニューの ファイル -> インポート をクリックします。











「インポート」ダイアログの「選択」の「インポート・ウィザードの選択(S):」で、一般 -> ファイル・システム をクリックして選択し、「次へ」ボタンをクリックします。







「インポート」ダイアログの「ファイル・システム」の「次のディレクトリから(Y):」欄の右側の「参照(R)」ボタンをクリックします。







「ディレクトリーからインポート」ダイアログで左側の「ホーム」をクリックして、表示された「名前」欄の「ダウンロード」をクリックして選択し、「OK」ボタンをクリックします。





「インポート」ダイアログの「ファイル・システム」の「ダウンロード」の左側の三角形をクリックして「ダウンロード」以下の一覧を表示し、「v4.5.0」をクリックして選択します。





「インポート」ダイアログの「ファイル・システム」の「宛先フォルダー(L):」欄の右側の「参照(W)」ボタンをクリックします。



「フォルダーにインポート」ダイアログで「ol4proj」をクリックして選択し、「OK」ボタンをクリックします。











「インポート」ダイアログの「ファイル・システム」の「完了(F)」ボタンをクリックします。




検証(時間がかかることがあります)が終わったあと「プロジェクタ・エクスプローラー」ビューの「ol4proj」左側の▽をクリックして、「v4.5.0」を表示します。
「v4.5.0」左側の▽をクリックすると中身が表示されます。

追加された Examples を試してみます。