2017年6月19日月曜日

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

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

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

4.2.0
Summary

The v4.2.0 release includes features and fixes from 87 pull requests.

バージョン 4.2.0 には、87個のプルリクエスト(訳注:Git でリクエストを出す機能)からの機能と修正が含まれています。

New movestart event on ol.Map

The map now has a movestart event, as countarpart(counterpart?) to the already existing moveend event.

map は、現在、movestart イベントがあり、すでにある moveend イベントの対になるものです。

New moveTolerance option in ol.Map

Some touch devices do not play well with OpenLayers's way of detecting clicks. To overcome this, a new moveTolerance option was introduced, so users can override the 1 pixel threshold above which a touch-release sequence won't be considered a click any more.

いくつかのタッチデバイスは、OpenLayers のクリック検出方法ではうまく動作しません。これを克服するために、新しい moveTolerance が導入され、ユーザは1ピクセルしきい値を上書でき、それ以上はタッチ-リリースシーケンスはもはやクリックと見なされません。

Support for multiple layers in ol.format.TopoJSON

With the new layerName and layers options, applications can extract the layer as additional attribute for vector features from ol.format.TopoJSON. This can especially be useful for styling vector tile layers.

新しい layerName と layers オプションを使用して、アプリケーションは ol.format.TopoJSON からベクタフィーチャの追加属性としてレイヤ(layer)を抽出できます。これは、特に、ベクタタイルレイヤのスタイリングに有効です。

New tileJSON option for ol.source.TileJSON

Like ol.source.TileUTFGrid, ol.source.TileJSON now also has a tileJSON option to configue it with inline TileJSON instead of a TileJSON URL.

ol.source.TileUTFGrid のように、ol.source.TileJSON は、現在、同じように、 TileJSON URL の替わりにインライン TileJSON を使用して設定するために tileJSON オプションがあります。

New ol.format.filter.during filter

Although OpenLayers has no support for WFS v2.0, we added ol.format.filter.during for the During temporal operator.

OpenLayers は、WFS v2.0 をサポートしていないので、During の一時的オペレータのための ol.format.filter.during を追加します。

Improved vector tile rendering at non-native resolutions
非ネイティブ解像度でのベクトルタイル描画の向上。

The vector tile renderer now uses an internal tile grid for all resolutions to cache pre-rendered tiles, even if the tile source does not have tiles for the viewed resolution. This improves rendering quality and performance.

ベクタタイルレンダラは、現在、タイルソースに表示された解像度に対するタイルがない場合も、プリレンダ(事前描画)タイルをキャッシュするためすべての投影法に対して内部タイルグリッドを使用しています。これは、描画の品質とパフォーマンスを向上します。

New insertVertexCondition for ol.interaction.Modify

Applications can now control whether a vertex will be inserted into the modified geometry. This makes it easier to modify custom geometries.

アプリケーションは、現在、頂点が、変形されたジオメトリに挿入されるかどうかを制御します。これは、カスタムジオメトリを変形するすることを容易にします。

New callback option for ol.View#fit()

To allow applications to perform custom actions when an animation associated with ol.View#fit() is completed, that method now has a new callback option.

ol.View#fit() と関連付けられたアニメーションが完了するとき、 アプリケーションがカスタムアクションを実行することを許可するために、そのメソッドは、現在、新しい callback オプションがあります。

New ol.View#getInteracting() getter

Like ol.View#getAnimating() returns true during a view animation, ol.View#getInteracting() returns true while users are interacting with the view.

ol.View#getAnimating() がビューアニメーションの間 true を返すように、ol.View#getInteracting() は、ユーザがビューと対話している間、true を返します。

New hasZ option for ol.format.WFS#writeTransaction()

When the new hasZ option is set to true, 3D coordinates will be preserved and encoded when writing a WFS transaction.

新しい hasZ オプションが true に設定されているとき、3D 座標は、WFS transaction を記述するときに保存およびエンコードされます。

New wrapX option for ol.source.Stamen

Like other tile sources, ol.source.Stamen now also has a wrapX option, which allows applications to turn off wrapping the world in x direction.

他のタイルソースと同じように、ol.source.Stamen も、現在、アプリケーションが x 方向に世界を覆う設定をオフにすることを許可する wrapX オプションがあります。

Label support for ol.Graticule

The ol.Graticule component has several new options to add and control the output of labels. To turn on labelling, configure ol.Graticule with showLabels: true. The new options to control label formatting are lonLabelFormatter, latLabelFormatter, lonLabelPosition and latLabelPosition.

ol.Graticule コンポーネントは、ラベルの追加と制御をするいくつかの新しいいオプションがあります。ラベリングをオンにするために、 ol.Graticule を「showLabels: true」に設定します。ラベルフォーマッチングを制御する新しいオプションは、lonLabelFormatter、latLabelFormatter、lonLabelPosition、latLabelPosition です。

Return values of two ol.style.RegularShape getters have changed

To provide a more consistent behaviour the following getters now return the same value that was given to constructor:

より一貫した動作を提供するために、次のgetterはコンストラクタに与えられたのと同じ値を返すようになりました:

ol.style.RegularShape#getPoints does not return the double amount of points anymore if a radius2 is set.

ol.style.RegularShape#getPoints は、radius2 設定されている場合、もはや点(ポイント)の倍数を返しません。

ol.style.RegularShape#getRadius2 will return undefined if no radius2 is set.

ol.style.RegularShape#getRadius2 は、radius2 設定されている場合、未定義(undefined)を返します。

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


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


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


次のようなダイアログが表示されたら「OK」ボタンをクリックします。



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

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


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

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


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











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







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






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






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



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






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










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









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

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

2017年6月10日土曜日

OpenLayers Workshop - 5.2. Create custom builds

このセクションでは、前の章(4.3. Custom styles)で作成したマップのカスタムビルドを作成します。

1. 前に作成した map.html ファイルを使って始めます。
<!doctype html>
<html lang="en">
 <head>
  <link rel="stylesheet" href="/ol.css" type="text/css">
  <style>
   #map {
    height: 256px;
    width: 512px;
   }
  </style>
  <title>OpenLayers example</title>
  <script src="/loader.js" type="text/javascript"></script>
 </head>
 <body>
  <h1>My Map</h1>
  <div id="map"></div>
  <script type="text/javascript">
   var style = (function() {
    var stroke = new ol.style.Stroke({
     color: 'black'
    });
    var textStroke = new ol.style.Stroke({
     color: '#fff',
     width: 3
    });
    var textFill = new ol.style.Fill({
     color: '#000'
    });
    return function(feature, resolution) {
     return [new ol.style.Style({
      stroke: stroke,
      text: new ol.style.Text({
       font: '12px Calibri,sans-serif',
       text: feature.get('key'),
       fill: textFill,
       stroke: textStroke
      })
     })];
    };
   })();
   var map = new ol.Map({
    target: 'map',
    layers: [
     new ol.layer.Tile({
      source: new ol.source.OSM()
     }),
     new ol.layer.Vector({
      title: 'Buildings',
      source: new ol.source.Vector({
       url: '/data/layers/buildings.kml',
       format: new ol.format.KML({
        extractStyles: false
       })
      }),
      style: style
     })
    ],
    view: new ol.View({
     center: ol.proj.fromLonLat([-122.79264450073244, 42.30975194250527]),
     zoom: 16
    })
   });
  </script>
 </body>
</html>
2. マップのためのビルド設定ファイル  ol-custom.json を作成します。
{
 "exports": [
  "ol.Map",
  "ol.View",
  "ol.format.KML",
  "ol.layer.Tile",
  "ol.layer.Vector",
  "ol.proj.fromLonLat",
  "ol.source.OSM",
  "ol.source.Vector",
  "ol.style.Fill",
  "ol.style.Stroke",
  "ol.style.Style",
  "ol.style.Text"
 ],
 "jvm": [],
 "umd": true,
 "compile": {
  "externs": [
   "externs/bingmaps.js",
   "externs/cartodb.js",
   "externs/closure-compiler.js",
   "externs/esrijson.js",
   "externs/geojson.js",
   "externs/oli.js",
   "externs/olx.js",
   "externs/proj4js.js",
   "externs/tilejson.js",
   "externs/topojson.js"
  ],
  "define": [
   "goog.DEBUG=false",
   "ol.ENABLE_WEBGL=false",
   "ol.ENABLE_PROJ4JS=false"
  ],
  "jscomp_error": [
    "*"
  ],
  "jscomp_off": [
   "analyzerChecks",
   "lintChecks",
   "unnecessaryCasts",
   "useOfGoogBase"
  ],
  "extra_annotation_name": [
   "api", "observable"
  ],
  "compilation_level": "ADVANCED",
  "warning_level": "VERBOSE",
  "use_types_for_optimization": true,
  "manage_closure_dependencies": true
 }
}
1. OpenLayers の build.js Node スクリプトを使用して、カスタムビルドを作成します。

$ node node_modules/openlayers/tasks/build.js ol-custom.json ol-custom.js

これは、プロジェクトのルートに ol-custom.js カスタムビルドを発生します。

2. では、map.html を開発 loader からカスタムビルド(ol-custom.js)に変更します。そのため、

<script src="/loader.js" type="text/javascript"></script>



<script src="/ol-custom.js" type="text/javascript"></script>

に変更します。
ページは、今、以前よりとても速くロードされます。

■□ Debian8 で試します■□
上記 map.html の内容のファイルをワークショップのルートディレクトリに作成します。

user@deb8-vmw:~/openlayers-workshop-en$ vim map.html

上記 ol-custom.json の内容のファイルをワークショップのルートディレクトリに作成します。

user@deb8-vmw:~/openlayers-workshop-en$ vim ol-custom.json

次のコマンドでカスタムビルドを作成します。

user@deb8-vmw:~/openlayers-workshop-en$ node node_modules/openlayers/tasks/build.js ol-custom.json ol-custom.js
info ol Parsing dependencies
info ol Compiling 345 sources

ol-custom.js は、ol.js から map.html に必要な機能だけを備えたカスタムビルドです。容量が少なくなっていることを確認します。

user@deb8-vmw:~/openlayers-workshop-en$ ls -l
---
-rw-r--r--   1 user user 184857  6月  6 16:03 ol-custom.js
---
user@deb8-vmw:~/openlayers-workshop-en$ find -name ol.js -ls
2365510  492 -rw-r--r--   1 user    user      503391  2月 14 18:25 ./node_modules/openlayers/dist/ol.js

map.html を開発 loader からカスタムビルド(ol-custom.js)に変更します。

user@deb8-vmw:~/openlayers-workshop-en$ vim map.html
---
<script src="/ol-custom.js" type="text/javascript"></script>
---



■□ここまで■□

OpenLayers4 Workshop - 5.1. Concepts(5. Custom Builds)

カスタムビルドを理解する
OpenLayers はたくさんのきのを提供する大きなライブラリです。ですが、アプリケーションが OpenLayers 3(現在は 4)が提供する機能をすべて必要とし、使用するはほとんどありません。カスタムビルド(a.k.a. application-specific builds)は、アプリケーションが必要とする機能だけを使用する OpenLayers 3(現在は 4)ビルドです。カスタムビルドは、フルビルドよりとても小さくなることがあるので、カスタムビルドを作成することは良い考えになることがあります。

5.1.1 必要条件
OpenLayers ビルドは Closure Compiler を使用することによって作成されます。Closure Compiler の目標は、ダウンロードの時間を少なくし実行速度を上げるよりよい JavaScript にするために、JavaScript をコンパイルすることです。
Closure Compiler は Java プログラムで、Compiler を実行するためには Java Virtual Machine を必要とします。それで、次のセクションに進み、カスタムビルドを作成する前に、Java がインストールされていることを確認します。
Java Runtime Environment が必要で、これは Oracle Java site からダウンロードできます。例えば、Windows なら、jre-8u60-windows-i586.exe をダウンロードし、インストールします。

5.1.2 ビルド設定ファイル
カスタムビルドを作成するにはビルド設定ファイルを書く必要があります。ビルド設定ファイルのフォーマットは JSON です。これはビルド設定ファイルの簡単な例です。
{
 "exports": [
  "ol.Map",
  "ol.View",
  "ol.layer.Tile",
  "ol.source.OSM"
 ],
 "jvm": [],
 "umd": true,
 "compile": {
  "externs": [
   "externs/bingmaps.js",
   "externs/closure-compiler.js",
   "externs/esrijson.js",
   "externs/geojson.js",
   "externs/oli.js",
   "externs/olx.js",
   "externs/proj4js.js",
   "externs/tilejson.js",
   "externs/topojson.js"
  ],
  "define": [
   "goog.dom.ASSUME_STANDARDS_MODE=true",
   "goog.DEBUG=false",
   "ol.ENABLE_DOM=false",
   "ol.ENABLE_WEBGL=false",
   "ol.ENABLE_PROJ4JS=false",
   "ol.ENABLE_IMAGE=false"
  ],
  "jscomp_error": [
    "*"
  ],
  "jscomp_off": [
   "analyzerChecks",
   "lintChecks",
   "unnecessaryCasts",
   "useOfGoogBase"
  ],
  "extra_annotation_name": [
   "api", "observable"
  ],
  "compilation_level": "ADVANCED",
  "warning_level": "VERBOSE",
  "use_types_for_optimization": true,
  "manage_closure_dependencies": true
 }
} 
この設定オブジェクトの最も関連する部分は export 配列です。この配列は、JavaScript コードで使用する関数/コンストラクタを宣言します。例えば、上記の設定ファイルは、次の JavaScript コードで使用します。
var map = new ol.Map({
 target: 'map',
 layers: [
  new ol.layer.Tile({
   source: new ol.source.OSM()
  })
 ],
 view: new ol.View({
  center: [0, 0],
  zoom: 4
 })
});

OpenLayers4 Workshop - 4.3. Custom styles

4.3. ベクタレイヤのスタイリング
1. ベクタレイヤに建物の水平投影を表示する演習例から始めます。テキストエディタを開き、ワークショップディレクトリのルートに map.html として次のように保存します。
<!doctype html>
<html lang="en">
 <head>
  <link rel="stylesheet" href="/ol.css" type="text/css">
  <style>
   #map {
    height: 256px;
    width: 512px;
   }
  </style>
  <title>OpenLayers example</title>
  <script src="/loader.js" type="text/javascript"></script>
 </head>
 <body>
  <h1>My Map</h1>
  <div id="map"></div>
  <script type="text/javascript">
   var map = new ol.Map({
    target: 'map',
    layers: [
     new ol.layer.Tile({
      source: new ol.source.OSM()
     }),
     new ol.layer.Vector({
      title: 'Buildings',
      source: new ol.source.Vector({
       url: '/data/layers/buildings.kml',
       format: new ol.format.KML({
        extractStyles: false
       })
      }),
      style: new ol.style.Style({
       stroke: new ol.style.Stroke({color: 'red', width: 2})
      })
     })
    ],
    view: new ol.View({
     center: ol.proj.fromLonLat[-122.79264450073244, 42.30975194250527],
     zoom: 16
    })
   });
  </script>
 </body>
</html>
2. ブラウザでこの map.html ファイルを開き、赤いアウトラインの建物を見ます。:http://localhost:4000/map.html


3. OpenLayers のスタイリングを基本的に理解した上で、水平投影のサイズに基づいた異なる色の建物を表示するスタイル関数を作成することができます。マップの初期化コードで、次の2つのスタイルの配列を追加し、「Buildings」レイヤの style オプションを以下のスタイル関数に置き換えます。
 var defaultStyles = [
  new ol.style.Style({
   fill: new ol.style.Fill({color: 'navy'}),
   stroke: ol.style.Stroke({color: 'black', width: 1})
  })
 ];
 var smallStyles = [
  new ol.style.Style({
   fill: new ol.style.Fill({color: 'olive'}),
   stroke: new ol.style.Stroke({color: 'black', width: 1})
  })
 ];
 function style(feature, resolution) {
  if (feature.get('shape_area') < 3000) {
   return smallStyles;
  } else {
   return defaultStyles;
  }
 }
4. 変更を保存し、map.htm をブラウザで開きます。:http://localhost:4000/map.html


5. 今、最後のステップとして、建物にラベルを追加してみます。簡単にするために、スタイルとしてラベルと黒のアウトラインだけ使用しています。
style: (function() {
 var stroke = new ol.style.Stroke({
  color: 'black'
 });
 var textStroke = new ol.style.Stroke({
  color: '#fff',
  width: 3
 });
 var textFill = new ol.style.Fill({
  color: '#000'
 });
 return function(feature, resolution) {
  return [new ol.style.Style({
   stroke: stroke,
   text: new ol.style.Text({
    font: '12px Calibri,sans-serif',
    text: feature.get('key'),
    fill: textFill,
    stroke: textStroke
   })
  })];
 };
})()
6. 変更を保存し、map.htm をブラウザで開きます。:http://localhost:4000/map.html


キーフィールドによってラベルが付けられた建物。

OpenLayers4 Workshop - 4.2. Styling concepts

4.2. スタイルを理解する
HTML 要素をスタイリングするとき、次のような CSS を使用します。
.someClass {
 background-color: blue;
 border-width: 1px;
 border-color: olive;
}
.someClass テキストはセレクタ(この場合は、クラス名 「someClass」を含むすべての要素を選択します)と、次のブロックは名前付きプロパティと値のグループですが、スタイル宣言として知られています。

4.2.1. Layer style
ベクタレイヤは、スタイル(style)を持つことができます。より具体的には、ベクタレイヤは ol.style.Style オブジェクト、または、 ol.style.Style オブジェクトの配列、または、ol.Feature インスタンスと解像度を取得し ol.style.Style オブジェクトの配列を返す関数で設定できます。
これは、静的スタイルで設定されるベクタレイヤの例です。
var layer = new ol.layer.Vector({
 source: new ol.source.Vector(),
 style: new ol.style.Style({
  // ---
 })
});
そして、これは、「sameClass」値で class を名付けられた属性を持つ全てのフィーチャにスタイルを適用するスタイル関数で設定されるベクタレイヤの例です。
var layer = new ol.layer.Vector({
 source: new ol.source.Vector(),
 style: function(feature, resolution) {
  if (feature.get('class') === 'someClass') {
   // create styles...
   return styles;
  }
 },
});
4.2.2. Symbolizers
CSS の宣言ブロックと同義は、OpenLayers では symbolizer です。(これらは通常、ol.style クラスのインスタンスです。)青の背景と1ピクセル幅のオリーブ色のストローク(縁)でポリゴンフィーチャを塗るには、次のような2つの symbolizer を使用します。
new ol.style.Style({
 fill: new ol.style.Fill({
  color: 'blue'
 }),
 stroke: new ol.style.Stroke({
  color: 'olive',
  width: 1
 })
});
ジオメトリタイプに応じて、異なる symbolizer を適用することができます。ライン(線)はポリゴン(面)のように動作しますが、それらは塗りつぶすことができません。ポイント(点)は ol.style.Circle または ol.style.Icon でスタイリングされます。前者は円形形状を描画するために使用され、後者はファイルのグラフィックス(例えば、PNG画像)を使用します。これは、円のスタイルの例です。
new ol.style.Circle({
 radius: 20,
 fill: new ol.style.Fill({
  color: '#ff9900',
  opacity: 0.6
 }),
 stroke: new ol.style.Stroke({
  color: '#ffcc00',
  opacity: 0.4
 })
});
4.2.3. ol.style.Style
ol.style.Style オブジェクトは4つのキー:fill(塗りつぶし)、image(イメージ)、stroke(線)および text(テキスト)を持っています。オプションの zIndex プロパティもあります。スタイル関数は ol.style.Style オブジェクトの配列を返します。「someClass」の値でクラス(class)属性を持っているものを除いて(それらのフィーチャは、1px 幅のオリーブ色の縁(stroke)の青色で塗りつぶす)すべてのフィーチャを赤く着色したい場合は、、スタイル関数を以下のように作成します。(ところで、それらがスタイルの関数の外側でオブジェクトを作成して再利用できるようにすることが重要ですが、下の例でオブジェクトがインラインに作成される理由は簡単にするためです。)
 var primarytyle = new ol.style.Style({
  fill: new ol.style.Fill({
   color: 'blue'
  }),
  stroke: new ol.style.Stroke({
   color: 'olive',
   width: 1
  })
 });
 var otherStyle = new ol.style.Style({
  fill: new ol.style.Fill({
   color: 'red'
  })
 });
 layer.setStyle(function(feature, resolution) {
  if (feature.get('class') === 'someClass') {
   return primaryStyle;
  } else {
   return otherStyle;
  }
 });
:実際のスタイル関数の外側でスタイルを作成することが重要です。スタイル関数はレンダリングの間何度も呼び出されます。そして、スタイル関数がたくさんの不要データを作成しないなら、なめらかなアニメーションを取得します。
フィーチャは、引数として解像度のみを持つ関数を取ることができるスタイル設定オプションを持っています。これは、(解像度に基づく)個々のフィーチャをスタイルすることが可能です。

4.2.4. 擬似クラス
CSS はセレクタに擬似クラスを可能にします。これらはマウスの位置、隣接する要素、またはブラウザ履歴のような、セレクタ内で簡単に表現できない内容(コンテキスト)に基づいたスタイル宣言の適用を基本的に制限します。OpenLayers では、いくらか似たような概念は、 ol.interaction.Select 上にスタイル設定オプションを持っています。
例を次に示します。
var select = new ol.interaction.Select({
 style: new ol.style.Style({
  fill: new ol.style.Fill({
   color: 'rgba(255,255,255,0.5)'
  })
 })
});
スタイリングの基本を体験したので、ベクタレイヤのスタイルに移動する時です。(訳注:原文では、「styling vector layers」にリンクが設定されています。)

OpenLayers4 Workshop - 4.1. Formats

4. フォマット
4.1. ベクタフォーマットの演習
ベース ol.layer.Vector コンストラクタは、かなり柔軟なレイヤタイプが提供されています。デフォルトでは、新しいベクタレイヤを作成するとき、これは ol.source.Vector の定義域(domain)であるため、レイヤのためのフィーチャの由来に前提条件はありません。ベクタフィーチャのスタイルスタイリングに入る前に、このセクションではベクタデータフォーマットの基本を紹介します。

4.1.1. ol.format
OpenLayers の ol.format クラスは、ベクタフィーチャを表現するサーバからのデータの解析を担当しています。フォーマットは生のフィーチャデータを ol.Feature オブジェクトに変換します。
下の2つのデータブロックを考えてみましょう。どちらも同じ ol.Feature オブジェクト(スペイン、バルセロナのポイント)を表します。最初は、(ol.format.GeoJSON パーサを使用して)GeoJSON としてシリアル化されます。2つ目は(ol.format.KML パーサを使用して)KML としてシリアル化されます。

4.1.2. GeoJSON Example
{
 "type": "Feature",
 "id": "OpenLayers.Feature.Vector_107",
 "properties": {},
 "geometry": {
  "type": "Point",
  "coordinates": [-104.98, 39.76]
 }
}
4.1.3. KML Example
<?xml version="1.0" encoding="utf-8"?>
<kml xmlns="http://earth.google.com/kml/2.2">
 <Placemark>
  <Point>
   <coordinates>-104.98,39.76</coordinates>
  </Point>
 </Placemark>
</kml>

OpenLayers4 Workshop - 3.4. Modify interaction

3.4. フィーチャの修正
フィーチャの修正は、ol.interaction.Modify と組み合わせて ol.interaction.Select を使用して動作します。それらは、フィーチャの通常のコレクション(ol.Collection)を共有します。ol.interaction.Select で選択されたフィーチャは、ol.interaction.Modify で変形の候補になります。

3.4.1. ベクタレイヤと Modify インタラクションを作成
タスク
1. それでは演習例を始めます。テキストエディタで map.html を開き、以下のように修正して、確認します。
<!doctype html>
<html lang="en">
 <head>
  <link rel="stylesheet" href="/ol.css" type="text/css">
  <style>
    #map {
     height: 256px;
     width: 512px;
    }
  </style>
  <script src="/loader.js" type="text/javascript"></script>
  <title>OpenLayers example</title>
 </head>
 <body>
  <h1>My Map</h1>
  <div id="map"></div>
  <script type="text/javascript">
   // 追加 3.4.1
   var source = new ol.source.Vector({
    url: 'data/layers/7day-M2.5.json',
    format: new ol.format.GeoJSON()
   });
   var style = new ol.style.Style({
     image: new ol.style.Circle({
      radius: 7,
       fill: new ol.style.Fill({
        color: [0, 153, 255, 1]
       }),
       stroke: new ol.style.Stroke({
        color: [255, 255, 255, 0.75],
        width: 1.5
       })
      }),
      zIndex: 100000
    })
   });
   var select = new ol.interaction.Select({style: style});
   var modify = new ol.interaction.Modify({
    features: select.getfeatures()
   });
   var map = new ol.Map({
    interactions: ol.interaction.defaults().extend([select, modify]), // 修正 3.4.1
    target: 'map',
    layers: [
     new ol.layer.Tile({
      title: "Global Imagery",
      source: new ol.source.TileWMS({
       url: 'https://ahocevar.com/geoserver/wms',
       params: {LAYERS: 'nasa.bluemarble', TILED: true}
      })
     }),
     new ol.layer.Vector({
      title: 'Earthquakes',
      source: source, // 修正 3.4.1
      style: new ol.style.Style({
       image: new ol.style.Circle({
        radius: 5,
        fill: new ol.style.Fill({
         color: '#0000FF'
        }),
        stroke: new ol.style.Stroke({
         color: '#000000'
        })
       })
      })
     })
    ],
    view: new ol.View({
     projection: 'EPSG:4326',
     center: [0, 0],
     zoom: 1
    })
   });
  </script>
 </body>
</html>
2. map.html の変更を保存し、ブラウザでページを開きます。: http://localhost:4000/map.html フィーチャの修正の実行を確認するには、地震(の発生場所)を選択のためにマウスクリックと、それから、ポイントを移動するためにドラッグを使用します。

3.4.2. 詳しく見る
フィーチャの修正が動作するしくみを調べてみます。
var style = new ol.style.Style({
 image: new ol.style.Circle({
  radius: 7,
  fill: new ol.style.Fill({
   color: [0, 153, 255, 1]
  }),
  stroke: new ol.style.Stroke({
   color: [255, 255, 255, 0.75],
   width: 1.5
  })
 }),
 zIndex: 100000
});
var select = new ol.interaction.Select({style: style});
var modify = new ol.interaction.Modify({
 feature: select.getfeatures()
});
2 つのインターラクション、フィーチャを修正する前に選択するための ol.interaction.Select と実際のジオメトリを修正する ol.interaction.Modify を作成します。それらは、フィーチャの同じ ol.Collection を共有します。ol.interaction.Modify(訳注:正しくは ol.interaction.Select だと思われます) を使用して選択されたフィーチャは、ol.interaction.Modify で変形の候補になります。前と同様に ol.interaction.Select は style オブジェクトと一緒に設定され、選択されたフィーチャを描画するため使用される style を効果的に定義します。ユーザが再びマップ内をクリックすると、フィーチャはレイヤスタイルを使用して描画されます。

OpenLayers4 Workshop - 3.3. Draw interaction

3.3. フィーチャの描画
新しいフィーチャは ol.interaction.Draw を使用して描画することができます。描画インタラクションは、ベクタソースおよびジオメトリタイプで構成されています。

3.3.1. ベクタレイヤと Draw インタラクションを作成
タスク
1. 以下の例を始めます。テキストエディタで map.html を開き、以下のように修正して、確認します。
<!doctype html>
<html lang="en">
 <head>
  <link rel="stylesheet" href="/ol.css" type="text/css">
  <style>
    #map {
     height: 256px;
     width: 512px;
    }
  </style>
  <script src="/loader.js" type="text/javascript"></script>
  <title>OpenLayers example</title>
 </head>
 <body>
  <h1>My Map</h1>
  <div id="map"></div>
  <script type="text/javascript">
   // 追加 3.3.1
   var source = new ol.source.Vector({
    url: 'data/layers/7day-M2.5.json',
    format: new ol.format.GeoJSON()
   });
   var draw = new ol.interaction.Draw({
    source: source,
    type: 'Point'
   });
   var map = new ol.Map({
    interactions: ol.interaction.defaults().extend([draw]),     // 修正 3.3.1
    target: 'map',
    layers: [
     new ol.layer.Tile({
      title: "Global Imagery",
      source: new ol.source.TileWMS({
       url: 'https://ahocevar.com/geoserver/wms',
       params: {LAYERS: 'nasa.bluemarble', TILED: true}
      })
     }),
     new ol.layer.Vector({
      title: 'Earthquakes',
      source: source, // 修正 3.3.1
      style: new ol.style.Style({
       image: new ol.style.Circle({
        radius: 5,
        fill: new ol.style.Fill({
         color: '#0000FF'
        }),
        stroke: new ol.style.Stroke({
         color: '#000000'
        })
       })
      })
     })
    ],
    view: new ol.View({
     projection: 'EPSG:4326',
     center: [0, 0],
     zoom: 1
    })
   });
  </script>
 </body>
</html>
2. map.html の変更を保存し、ブラウザでページを開きます。: http://localhost:4000/map.html ポイントジオメトリの描画の実行を確認するには、新しいフィーチャを追加するために、マップ内をクリックします:


ベクタソースにフィーチャを追加するために描画インターラクションを使用。

ボーナスタスク
1. 描画された後、新しいフィーチャの X と Y を取得するリスナを作成します。

解答
これは最初のボーナスタスクの解答です。それに ol.interaction.Draw の drawend イベントのイベントリスナを登録します。このメソッドは、フィーチャの X と Y をデベロッパーコンソールに記録します。
draw.on('drawend', function(evt){
 var feature = evt.feature;
 var p = feature.getGeometry();
 console.log(p.getCoordinates());
});

■□ Debian8 で試します■□
上記のコードを map.html に追加します

user@deb8-vmw:~/openlayers-workshop-en$ vim map.html
---
   <!-- ここから追加 -->
   draw.on('drawend', function(evt){
    var feature = evt.feature;
    var p = feature.getGeometry();
    console.log(p.getCoordinates());
   });
   <!-- ここまで追加 -->
  </script>
 </body>
</html>
Firefox でマップを表示するタブで、「メニュー」ボタンをクリックします。


「開発ツール」ボタンをクリックします。


リストの「開発ツール」をクリックします。


マップを表示して、マップ上をクリックしてポイントを描画します。


OpenLayers4 Workshop - 3.2. Select interaction

3.2. フィーチャの選択
レイヤモジュールで見てきたように、ベクタとしてフィーチャを引き出し、ベースマップ の上にそれらを描くことができます。ベクタデータを提供することの利点の一つは、ユーザがデータとインターラクション(対話型操作)ができることです。この例では、ユーザが選択し、フィーチャ情報を表示することができるベクタレイヤを作成します。
前の例は、マップ上で ol.control.Control を使用してみました。Controls は、マップ上に視覚表現するか、ドキュメントに DOM エレメントを追加します。ol.interaction.Interaction は、ユーザの対話に反応しますが、一般的に視覚表現はしません。この例は、ベクタレイヤからフィーチャと対話するために ol.interactionSelect を使用しています。

3.2.1. ベクタレイヤと選択インターラクションを作成
タスク
1. 前のセクションからのベクタレイヤ例から始めます。テキストエディタで map.html を開き、以下のように修正して、確認します。
<!doctype html>
<html lang="en">
 <head>
  <link rel="stylesheet" href="/ol.css" type="text/css">
  <style>
    #map {
     height: 256px;
     width: 512px;
    }
  </style>
  <script src="/loader.js" type="text/javascript"></script>
  <title>OpenLayers example</title>
 </head>
 <body>
  <h1>My Map</h1>
  <div id="map"></div>
  <script type="text/javascript">
   var map = new ol.Map({
    // 追加 3.2.1
    interactions: ol.interaction.defaults().extend([
     new ol.interaction.Select({
      style: new ol.style.Style({
       image: new ol.style.Circle({
        radius: 5,
        fill: new ol.style.Fill({
         color: '#FF0000'
        }),
        stroke: new ol.style.Stroke({
         color: '#000000'
        })
       })
      })
     })
    ]),
    target: 'map',
    layers: [
     new ol.layer.Tile({
      title: "Global Imagery",
      source: new ol.source.TileWMS({
       url: 'https://ahocevar.com/geoserver/wms',
       params: {LAYERS: 'nasa.bluemarble', TILED: true}
      })
     }),
     new ol.layer.Vector({
      title: 'Earthquakes',
      source: new ol.source.Vector({
       url: 'data/layers/7day-M2.5.json',
       format: new ol.source.GeoJSON()
      }),
      style: new ol.style.Style({
       image: new ol.style.Circle({
        radius: 5,
        fill: new ol.style.Fill({
         color: '#0000FF'
        }),
        stroke: new ol.style.Stroke({
         color: '#000000'
        })
       })
      })
     })
    ],
    view: new ol.View({
     projection: 'EPSG:4326',
     center: [0, 0],
     zoom: 1
    })
   });
  </script>
 </body>
</html>
2. map.html の変更を保存し、ブラウザでページを開きます。: http://localhost:4000/map.html フィーチャ選択の実行を確認するには、地震(の発生場所)を選択するためマウスのクリックを使用します。


ベクタレイヤからフィーチャを選択するためにインターラクションを利用。

OpenLayers4 Workshop - 3.1. Scale line control

3. コントロールとインターラクション(対話操作)
3.1. スケールラインの表示
マップに表示するもうひとつの典型的なウィジェットは、スケールバーです。OpenLayers はまさにこのために ol.control.ScaleLine を提供しています。

3.1.1. ScaleLine コントロールの作成
タスク
1. テキストエディタで map.html を開きます。
2. マップ設定(map config)のどこかに、地図に新しいスケールラインコントロールを作成するための次のコードを追加します。
controls: ol.control.defaults().extend([
  new ol.control.ScaleLine()
]),
3. 変更を保存し、map.htm をブラウザで開きます。:http://localhost:4000/map.html


左下隅にあるデフォルトのスケールバー。

3.1.2. ScaleLine コントロールの移動
画像の上のスケールバーを読むのは少し難しいかもしれません。スケールの視認性を向上させるために取るべきアプローチ(見やすくする方法)がいくつかあます。マップのビューポート内のコントロールを維持したい場合は、ドキュメントの CSS 内でいくつかのスタイル宣言を追加することができます。これをテストするには、次のようなものでスケールバーに background color(背景色)と padding(パディング: ボーダとコンテンツの間隔)を含めることができます。
.ol-scale-line {
  background: black;
  padding: 5px;
}
しかしながら、この演習のために、マップのビューポートがひどく混雑しつつあると思うでしょう。このような過剰な混雑を避けるには、別の場所にスケールを表示することができます。これを実現するためには、まず最初に、マークアップに追加要素を作成して、それから、この新しい要素の中で scale コントロールにそのものを描画することを指示する必要があります。

タスク
1. ページの <body> に新しいブロックレベル要素を作成します。この要素の参照を簡単にするために、それに id 属性を与えます。map.html ページの <body> のどこかに次のマークアップを挿入します。(マップビューポート要素 <div id="map"></div> の後でスケール要素を右に配置することは、理にかなっています。):
<div id="scale-line" class="scale-line"></div>
2. ここでは、scale-line 要素を参照するために、スケールコントロールを作成するコードを修正します。
controls: ol.control.defaults().extend([
  new ol.control.ScaleLine({className: 'ol-scale-line', target: document.getElementById('scale-line')})
]),
3. 変更を保存し、map.html をブラウザで開きます。:http://localhost:4000/map.html

4.コントロールの位置を、例えば、次の CSS ルールで修正します。
.scale-line {
  position: absolute;
  top: 350px;
}
.ol-scale-line {
  position: relative;
  bottom: 0px;
  left: 0px;
}
5. ここで、変更を保存し、ブラウザで map.html を再び表示します。:http://localhost:4000/map.html


マップビューポートの外側のスケールラインコントロール。

注意:ol.control.Control から(ol.inherits を使用して)継承できるカスタムコントロールを作成します。この例を参照するために、次を確認します。:http://openlayers.org/en/master/examples/custom-controls.html

OpenLayers4 Workshop - 2.5. Image Vector source

2.5. 画像ベクタ
ol.layer.Vector を使用する前述の例では、アニメーションズーミング(固定されたままのポイント記号のサイズ)の間、続けて再描画される様子がみられます。ベクタレイヤで、OpenLayers は、各アニメーションフレームでソースデータを再描画します。これは、ビューの解像度が変化するとともに、線分やポイント記号、ラベルの一貫性のある描画を提供します。
別の描画方法は、ビューの遷移の間、再描画を無効にし、位置変更なしに、前のビューの状態から描画出力を縮尺します。これは ol.source.ImageVector とともに ol.layer.Image を使用することで達成されます。 この組み合わせで、データの「スナップショット」は、ビューがアニメーションをしていないときに再描画され、これらのスナップショットはビューの遷移の間、拒否されます。
下の例は、ol.source.ImageVector とともに ol.layer.Iamge を使用します。この例は、少量のデータを描画するのですが、この組み合わせは、大量の比較的に静的なデータを描画するアプリケーションに適しています。

2.5.1. ol.source.ImageVector
それでは世界地図の上に地震データを取得するために、ベクタレイヤの例に戻ります。
<!doctype html>
<html lang="en">
 <head>
  <link rel="stylesheet" href="/ol.css" type="text/css">
  <style>
    #map {
     height: 256px;
     width: 512px;
    }
  </style>
  <title>OpenLayers example</title>
  <script src="/loader.js" type="text/javascript"></script>
 </head>
 <body>
  <h1>My Map</h1>
  <div id="map"></div>
  <script type="text/javascript">
   var map = new ol.Map({
    target: 'map',
    layers: [
     new ol.layer.Tile({
      title: "Global Imagery",
      source: new ol.source.TileWMS({
       url: 'https://ahocevar.com/geoserver/wms',
       params: {LAYERS: 'nasa:bluemarble', TILED: true'}
      })
     })
     new ol.layer.Vector({
      title: 'Earthquakes',
      source: new ol.source.vector({
       url: '/data/layers/7day-M2.5.json',
       format newol.format.GeoJSON()
      }),
      style: new ol.style.Style({
       image: new ol.style.Circle({
        radius: 3,
        fill: new ol.style.Fill({color: 'white'})
       })
      })
     })
    ],
    view: new ol.View({
     projection: 'EPSG:4326',
     center: [0, 0],
     zoom: 0,
     maxResolution: 0.703125
    })
   });
  </script>
 </body>
</html>
タスク
1. テキスト·エディタで map.html を開き、上記からベクタ例の内容をコピーします。変更を保存して、ブラウザで正しく見えることを確認します。:http://localhost:4080/map.html
2. ベクタレイヤを次のように変更します。
new ol.layer.Image({
 title: 'Earthquakes',
 source: new ol.source.ImageVector({
  source: new ol.source.vector({
   url: '/data/layers/7day-M2.5.json',
   format newol.format.GeoJSON()
  }),
  style: new ol.style.Style({
   image: new ol.style.Circle({
    radius: 3,
    fill: new ol.style.Fill({color: 'white'})
   })
  })
 })
})
ブラウザで http://localhost:4000/map.html を再読み込みします。

注意:同じベクタデータのように見ますが、イメージとして描かれます。これは、それでもフィーチャ検出のようなものを可能にしますが、ベクタデータが鮮明でなくなります。これは基本的に性能と品質との釣り合いのためです。

2.5.2. 詳しく見る
それでは何が起こっているか理解するために、そのレイヤの作成を検討してみます。
new ol.layer.Image({
 title: 'Earthquakes',
 source: new ol.source.ImageVector({
  source: new ol.source.vector({
   url: '/data/layers/7day-M2.5.json',
   format newol.format.GeoJSON()
  }),
  style: new ol.style.Style({
   image: new ol.style.Circle({
    radius: 3,
    fill: new ol.style.Fill({color: 'white'})
   })
  })
 })
})
ol.layer.Vector の代わりに ol.layer.Image を使用しています。しかしながら、元の ol.source.Vector ベクタソースに接続する ol.source.ImageVector を通じて、ここでは、それでも、ベクタデータを使用することができます。スタイルはレイヤ上ではなく、 ol.source.ImageVector の設定として提供されます。

ボーナスタスク
1. マップ上の forEachFeatureAtPixel を呼び出すマップ上の「singleclick」リスナを登録することで、マップビューポートの下に地震情報を表示するフィーチャ検出が動作することを確認します。

■□ Debian8 で試します■□
前章(2.4. Vector data)の「ボーナスタスク」で追加したコード部分の次のコードの「title」を「summary」に変更します。

user@deb8-vmw:~/openlayers-workshop-en$ vim map.html
---
   <!-- ここを変更 -->
    infoElement.innerHTML = feature ? feature.get('summary') : '';
---



表示された内容は、/data/layers/7day-M2.5.json の summary の値の一部しか表示されませんでした。

内容を確認すると
---
"title": "M 4.9, Gulf of Aden"
---
"summary": "<img src=\"http:\/\/earthquake.usgs.gov\/images\/globes\/10_45.jpg\" alt=\"12.111°N 46.435°E\" align=\"left\" hspace=\"20\" \/><p>Sunday, June 27, 2010 06:32:03 UTC<br>Sunday, June 27, 2010 09:32:03 AM at epicenter<\/p><p><strong>Depth<\/strong>: 10.00 km (6.21 mi)<\/p>",

となっていました。

OpenLayers4 Workshop - 2.4. Vector data

2.4. ベクタレイヤ
ベクタレイヤは ol.layer.Vector で表示され、ベクタデータのクライアント側の表示を処理しています。現在、OpenLayers は Canvas レンダラのベクタレンダリング全てと、WebGL レンダラのポイントジオメトリだけをサポートしています。

2.4.1. クライアント側のフィーチャ描画
基本の世界地図を取得するには、WMS の例に戻ります。ベクタレイヤでこの上にいくつかのフィーチャデータを追加します。
<!doctype html>
<html lang="en">
 <head>
  <link rel="stylesheet" href="/ol.css" type="text/css">
  <style>
    #map {
     height: 256px;
     width: 512px;
    }
  </style>
  <title>OpenLayers example</title>
  <script src="/loader.js" type="text/javascript"></script>
 </head>
 <body>
  <h1>My Map</h1>
  <div id="map"></div>
  <script type="text/javascript">
   var map = new ol.Map({
    target: 'map',
    layers: [
     new ol.layer.Tile({
      title: "Global Imagery",
      source: new ol.source.TileWMS({
       url: 'http://ahocevar.com/geoserver/wms',
       params: {LAYERS: 'nasa:bluemarble', TILED: true}
      })
     })
    ],
    view: new ol.View({
     projection: 'EPSG:4326',
     center: [0, 0],
     zoom: 0,
     maxResolution: 0.703125
    })
   });
  </script>
 </body>
</html>
タスク
1. テキストエディタで map.html を開き、最初の WMS example の内容をコピーします。変更を保存して、ブラウザで正しく見えることを確認します。:http://localhost:4000/map.html
2. マップの初期化コードで Tile layer の後にもうひとつのレイヤを追加(下記のものを貼り付け)します。これは GeoJSON に格納されている一連のフィーチャを要求したマップに新しいベクタレイヤを追加します。
new ol.layer.Vector({
 title: 'Earthquakes',
 source: new ol.source.Vector({
  url: '/data/layers/7day-M2.5.json',
  format: new ol.format.GeoJSON()
 }),
 style: new ol.style.Style({
  image: new ol.style.Circle({
   radius: 3,
   fill: new ol.style.Fill({color: 'white'})
  })
 })
})

地震の場所を表す白丸と世界地図。

2.4.2. 詳しく見る
それでは何が起こっているか理解するために、そのベクタレイヤの作成を検討してみます。
new ol.layer.Vector({
 title: 'Earthquakes',
 source: new ol.source.Vector({
  url: '/data/layers/7day-M2.5.json',
  format: new< ol.format.GeoJSON()
 }),
 style: new ol.style.Style({
  image: new ol.style.Circle({
   radius: 3,
   fill: new ol.style.Fill({color: 'white'})
  })
 })
})
レイヤは、title の「Earthquakes」といくつかのカスタムオプションを与えられています。オプションオブジェクトでは、url を指示する ol.source.vector タイプの source を用意しています。

注意:属性に基づいたフィーチャのスタイルを設定したい場合は、 ol.layer.Vector の style 設定オプションである ol.style.Style の替りににスタイル関数を使用します。

ボーナスタスク
1. マップ上の白丸は、 ol.layer.Vector レイヤの上に ol.Feature オブジェクトを表します。これらの各フィーチャは、それぞれ、title と summary(要約) のプロパティの属性データを持っています。マップ上で forEachFeatureAtPixel を呼び出す、マップ上の 「singleclick」リスナを登録し、マップビューポートの下に地震情報を表示します。
2. ベクタレイヤのデータは、USGS(http://earthquake.usgs.gov/earthquakes/catalogs/)が発行した地震のフィード由来しています。OpenLayers でサポートされているフォーマットの空間情報がある追加データを見つけることができるかどうか参照してください。もし、data ディレクトリ内の空間データを表現する別のドキュメントを保存するなら、マップ上のベクタレイヤで表示することができます。

解答
最初のボーナスタスクの解答として、map の下に info div タグを追加できます。

<div id="info"></div>

クリックされたフィーチャのタイトル(title)を表示するために次の JavaScript コードを追加します。
map.on('singleclick', function(e) {
 var feature = map.forEachFeatureAtPixel(e.pixel, function(feature) {
  return feature;
 });
 var infoElement = document.getElementById('info');
 infoElement.innerHTML = feature ? feature.get('title') : '';
});

■□ Debian8 で試します■□
上記コードを map.html に追加します。

user@deb8-vmw:~/openlayers-workshop-en$ vim map.html
{---
   <div id="map"></div>
   <!-- ここを追加 -->
   <div id="info"></div>
---
   <!-- ここから追加 -->
   map.on('singleclick', function(e) {
    var feature = map.forEachFeatureAtPixel(e.pixel, function(feature) {
     return feature;
    });
    var infoElement = document.getElementById('info');
    infoElement.innerHTML = feature ? feature.get('title') : '';
   });
   <!-- ここまで追加 -->
  </script>
 </body>
</html>


OpenLayers4 Workshop - 2.3. Proprietary tile provider

2.3. 所有権のあるラスタレイヤ
前のセクションでは、標準規格に準拠した WMS(OGC Web Map Service)とカスタムタイルキャッシュに基づいてレイヤを表示しました。オンラインマッピング(または少なくともタイルマップクライアント)は、主に所有権のあるマップタイルサービスが、利用されやすさによって広く知れ渡っています。OpenLayers は、そのAPIを通してこれらの所有権のあるサービスを利用するレイヤタイプが用意されています。
このセクションでは、Bing のタイルを使用するレイヤを追加することによって、前のセクションで開発された例を構築していきます。

2.3.1. Bing!
Bing のレイヤーを追加してみましょう。
タスク
1. map.html ファイルで、OSM ソースが設定されている場所を探して、ol.source.BingMaps に変更してください。
source: new ol.source.BingMaps({
 imagerySet: 'Road',
 key: 'Ak-dzM...(省略)'
})
注意:Bing のタイル API は、マッピングアプリケーションで使用する API キーを登録する必要があります。ここでの例では、製品に使用することはできない API キーを使用しています。製品に Bing のレイヤを使用するには、https://www.bingmapsportal.com/ で API キーを登録します。
(訳注:公開方法によってライセンスの種類が違うので、詳しくは上記サイトを参照して下さい。)
2. 変更を保存して、ブラウザで map.html をリロードします。http://localhost:4000/map.html


Bing Maps のソースからのタイルマップ。

2.3.2. 完全な演習例
改訂した map.html ファイルは、次のようになります。
<!doctype html>
<html lang="en">
 <head>
  <link rel="stylesheet" href="/ol.css" type="text/css">
  <style>
   #map {
    height: 256px;
    width: 512px;
   }
   .ol-attribution a {
    color: black;
   }
  </style>
  <script src="/loader.js" type="text/javascript"></script>
  <title>OpenLayers example</title>
 </head>
 <body>
  <h1>My Map</h1>
  <div id="map" class="map"></div>
  <script type="text/javascript">
   var map = new ol.Map({
    target: 'map',
    layers: [
     new ol.layer.Tile({
      source: new ol.source.BingMaps({
       imagerySet: 'Road',
       key: 'Ak-dzM...(省略)'
      })
     })
    ],
     view: new ol.View({
      center: ol.proj.fromLonLat([126.97, 37.56]),
      zoom: 9
    })
   });
  </script>
 </body>
</html>

OpenLayers4 Workshop - 2.2. Tiled sources

2.2.タイルソース
2.2.1 キャッシュタイル
デフォルトでは、タイルレイヤは、マップのビューポートを埋める以上になるように256×256(ピクセル)画像を要求します。地図のいろいろなところをパンし、拡大すると、画像の要求が、まだ訪れたことのない地域を埋めるために、さらに送られます。ブラウザは要求された画像をいくつかキャッシュしますが、たくさんの処理動作が、一般的に、動的に画像を描画するためにサーバに要求されます。
タイルレイヤが規則的な格子状の画像を要求しているため、サーバがこれらの画像の要求をキャッシュし、あなた(または他の誰か)が同じ地域を訪れた次の機会に、キャッシュされた結果を返すことができます。結果的に、すべての地域のパフォーマンスが向上することになります。

2.2.1.1 ol.source.XYZ
Web Map Service の仕様では、クライアントが要求できる内容に柔軟性を持たせることができます。 制約がなければ、実際にはキャッシングが困難または不可能になります。
反対に、サービスは、固定されたズームレベルでだけ、そして、規則的なグリッドだけ、タイルを提供できます。これらは、XYZ ソースを使ったタイルレイヤとして一般化することができます。 - XとYはグリッドの列および行を示し、Zはズームレベルを表すと考えることができます。

2.2.1.2 ol.source.OSM
OpenStreetMap(OSM)のプロジェクトは、世界中の自由に利用できる地図データを収集し、作成するための取り組みをしています。OSM は、キャッシュされたタイルセットとして、いくつかの異なるレンダリングのデータを提供します。これらのレンダリングは、基本的な XYZ グリッド配置に適合し、OpenLayers のマップで使用できます。ol.source.OSM レイヤソースは OpenStreetMap のタイルにアクセスします。

タスク
1 テキストエディタで、前のセクションの map.html ファイルを開き、以下のように、マップの初期化コードを変更します。
<script>
 var map = new ol.Map({
  target: 'map',
  layers: [
   new ol.layer.Tile({
    source: new ol.source.OSM()
   })
  ],
  view: new ol.View({
   center: ol.proj.transform([126.97, 37.56]),
   zoom: 9
  }),
  controls: ol.control.defaults({
   attributionOptions: {
    collapsible: false
   } 
  })
 });
</script>
2 同じドキュメントの <head> に、レイヤ属性のためのスタイル宣言をいくつか追加します。
<style>
 #map {
  width: 512px;
  height: 256px;
 }
 .ol-attribution a {
  color: black;
 }
</style>
3 変更内容を保存し、ブラウザでページを更新します。
:http://localhost:4000/map.html

OSM ソースを使用したタイルレイヤ。

2.2.2 詳しく見る
2.2.2.1 投影法
マップのビュー定義を確認します。
view: new ol.View({
 center: ol.proj.fromLonLat([126.97, 37.56]),
 zoom: 9
})
地理空間データは、すべての座標参照系になることができます。一つのデータセットは、度数で地理座標(緯度と経度)を使用し、もう一つはメートル単位のもので、限られた地域で使う投影法の座標を使用します。座標参照系の完全な説明は、このモジュールの範囲外ですが、基本的な概念を理解することが重要です。
OpenLayers は、データの座標系を知る必要があります。内部的には、これは ol.proj.Projection オブジェクトで表されますが、文字列も指定できます。
使用する OpenStreetMap タイルは、メルカトル図法です。このため、メルカトル座標を使用して、中心の初期値を設定する必要があります。地理座標で、関心のある場所の座標を見つけることは比較的容易なので、地理座標("EPSG:4326")をメルカトル座標("EPSG:3857")に換える ol.proj.fromLonLat メソッドを使用します。

2.2.2.2 その他の投影法
OpenLayers は、Geographic(EPSG:4326)と Web Mercator(EPSG:3857)座標参照系の変換機能を内蔵しています。これにより、追加の作業なしで、上記の ol.proj.fromLonLat 機能を使用できます。異なった座標のデータで作業したいときは、ol.proj.* 機能を使用する前に、付加情報を含める必要があります。
例えば、「EPSG:21781」座標参照系のデータで作業したいときは、ページに次の2つのスクリプトタグを含めます。
<script src="http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js" type="text/javascript"></script>
<script src="http://epsg.io/21781-1753.js" type="text/javascript"></script>
それから、アプリケーションコードに次のようにこの投影法を登録し、有効範囲を設定します。
// This creates a projection object for the EPSG:21781 projection
// and sets a "validity extent" in that projection object.
var projection = ol.proj.get('EPSG:21781');
projection.setExtent([485869.5728, 76443.1884, 837076.5648, 299941.7864]);
範囲情報は、EPSG コードを使用したときは、「http://epsg.io/」で見つけることができます。

2.2.2.3 レイヤの作成
layers: [
 new ol.layer.Tile({
  source: new ol.source.OSM()
 })
],
前と同じように、レイヤを作成し、マップの config オブジェクトのレイヤ配列に追加します。このとき、ソースのすべての初期オプションを受け入れます。

2.2.2.4 スタイル
.ol-attribution a {
 color: black;
}
マップコントロールの処理は、このモジュールの範囲外ですが、これらのスタイル宣言は、スニークプレビュー(訳注:試し画像?)を与えます。初期状態では、ol.control.Attribution コントロールは、すべてのマップに追加されます。これによりレイヤソースはマップビューポート内に属性情報を表示できます。上記の宣言は、マップのこの属性のスタイルを変更します(マップ右下の著作ラインに注意)。

2.2.2.5 Attribution Control 設定
初期設定で ol.control.Attribution は、押されたときに属性情報を実際に表示する i(information:情報)ボタンを追加します。OpenStreetMap 利用条件に従うため、そして、OpenStreetMap の属性情報を常に表示するために、ol.Map コンストラクタに渡されるオプションオブジェクトに次のものが使用されます。
controls: ol.control,defaults({
 attributionOptions: {
  collapsible: false
 }
})
これは、i ボタンを削除し、属性情報を常に表示させます。
公的に利用可能なキャッシュされたタイルセットを使ったレイヤを理解したら、所有権のあるラスタレイヤでの演習に移りましょう。(原文では、「proprietary raster layers」がリンクになっています。)

OpenLayers4 Workshop - 2.1. Web Map Service Layers

2. レイヤとソース
2.1. ウェブマップサービス(Web Map Service[WMS])レイヤ

マップにレイヤを追加するとき、レイヤのソースは、一般的に、表示するデータを取ってくることに起因しています。要求されたデータは、ラスタまたはベクタデータのいずれかです。ラスタデータは、サーバ側で画像として描画された情報と同じ、と考えることができます。ベクタデータは、サーバから構造化された情報として提供され、表示するためにクライアント(ブラウザ)上で描画されます。

ラスタマップデータを提供する異なる形式のサービスがたくさんあります。このセクションでは、OGC(Open Geospatial Consortium)の ウェブマップサービス(Web Map Service[WMS])仕様に準拠しているプロバイダ(提供者)を扱っています。

2.1.1. レイヤーの作成
完全に動作するマップの例から始めて、動作を理解するためにレイヤを修正します。

次のコードをみていきます。
<!doctype html>
<html lang="en">
 <head>
  <link rel="stylesheet" href="/ol.css" type="text/css">
  <style>
    #map {
     height: 256px;
     width: 512px;
    }
  </style>
  <script src="loader.js" type="text/javascript"></script>
  <title>OpenLayers example</title>
 </head>
 <body>
  <h1>My Map</h1>
  <div id="map"></div>
  <script type="text/javascript">
   var map = new ol.Map({
    target: 'map',
    layers: [
     new ol.layer.Tile({
      title: "Global Imagery",
      source: new ol.source.TileWMS({
       url: 'https://ahocevar.com/geoserver/wms',
       params: {LAYERS: 'nasa:bluemarble', TILED: true}
      })
     })
    ],
    view: new ol.View({
     projection: 'EPSG:4326',
     center: [0, 0],
     zoom: 0,
     maxResolution: 0.703125
    })
   });
  </script>
 </body>
</html>
タスク
1. まだ行っていない場合は、ワークショップでのディレクトリのルートに map.html として上記のテキストを保存します。
2. 動作を確認するには、ブラウザでページを開きます。
http://localhost:4000/map.html

2.1.2. ol.layer.Tile コンストラクタ
ol.layer.Tile コンストラクタは、 olx.layer.TileOptions 型のオブジェクトリテラルを取得します。次を参照してください。
http://openlayers.org/en/master/apidoc/ol.layer.Tile.html
この場合、「source(ソース)」キーのオプションに ol.source.TileWMS を提供しています。レイヤの人間が読み取り可能なタイトルは、「title(タイトル)」キーを設けることがでますが、基本的にキーの任意の名前を、ここで使用することができます。OpenLayers 2 で、これはレイヤのすべての部分だったのに対し、(現在の)OpenLayers では、レイヤとソースの間に隔たりがあります。

ol.layer.Tile は、画像の規則的なグリッドを示し、ol.layer.Image は、単一の画像を示します。レイヤの種類に応じて、別のソース(ol.source.ImageWMS に対して ol.source.TileWMS)を使用します。

2.1.3. ol.source.TileWMS コンストラクタ
ol.source.TileWMS コンストラクタは、http://openlayers.org/en/master/apidoc/ol.source.TileWMS.html によって、定義される単一の引数を持っています。url は、WMS サービスのオンライン·リソースであり、「params」は、パラメータ名とその値を持つオブジェクトリテラルです。LAYERS param だけは必須です。この例では、タイル化された WMS レイヤのキャッシング向上のため、 GeoServer 固有の拡張「TILED: true」を追加します。
layers: [
 new ol.layer.Tile({
  title: "Global Imagery",
  source: new ol.source.TileWMS({
   url: 'https://ahocevar.com/geoserver/wms',
  params: {LAYERS: 'nasa:bluemarble', TILED: true}
  })
 })
]
タスク
1. これと同じ WMS は「ne:NE1_HR_LC_SR_W_DR」という名前の Natural Earth レイヤを提供しています。「nasa:bluemarble」から「ne:NE1_HR_LC_SR_W_DR」へ LAYERS パラメータの値を変更します。
修正した ol.layer.Tile コンストラクタは次のようになります。
new ol.layer.Tile({
 title: "Global Imagery",
 source: new ol.source.TileWMS({
  url: 'https://ahocevar.com/geoserver/wms',
  params: {LAYERS: 'ne:NE1_HR_LC_SR_W_DR', TILED: true}
 })
})
2. レイヤとソースを、タイルに換えて単一のイメージを持つように変更します。ヒントについては、次の API ドキュメントのページを見てください:http://openlayers.org/en/master/apidoc/ol.layer.Image.html と http://openlayers.org/en/master/apidoc/ol.source.ImageWMS.html。256×256ピクセルのタイルでなく、必ず一枚の画像が要求されていることを確認するには、ブラウザの開発者ツールの[ネットワーク]タブを使用します。


イメージソースとしての WMS。

ウェブマップサービス(WMS)から動的にレンダリングされたデータで演習するには、キャッシュされたタイルサービスについて学ぶために移動します。(原文では「cashed tile services]がリンクになっています。)

OpenLayers4 Workshop - 1.3. OpenLayers Resources

1.3. OpenLayers のリソース
OpenLayers ライブラリは、機能が豊富にあります。開発者はその機能の例を提供するために努力を重ね、他の経験豊富な開発者がそのやり方を見つけることを可能にする方法でコードを編集してきたので、多くのユーザはそれがゼロから始めるための挑戦であることを見つけます。

1.3.1. 例から学ぶ
新規のユーザは、OpenLayers のイグザンプル(例)コードに取り組み、始めるために最も便利な方法である、ライブラリの可能な機能を使って試すことを、大概、見つけ出します。

http://openlayers.org/en/master/examples/

1.3.2. ドキュメントを参照
特定のトピックについての詳細は、拡張中の OpenLayers のドキュメントのコレクションを参照します。

http://openlayers.org/en/master/doc/quickstart.html
http://openlayers.org/en/master/doc/tutorials

1.3.3. APIリファレンスを検索
マップを作成しコントロールする基本的な構成要素を理解した後に、メソッドのシグネチャとオブジェクトのプロパティの詳細については、APIリファレンスマニュアルを検索します。API の安定部分をみたい場合は、「Stable Only」チェックボックスをチェックして確認します。(現在は、「Stable Only」チェックボックスはありません。)

signatures:プログラミングで, 関数の戻り値の型や引数の数といった特性

http://openlayers.org/en/master/apidoc/

1.3.4. コミュニティに参加
OpenLayers は、開発者とあなたのようなユーザのコミュニティによってサポートされ、維持されています。問い合わせ、または、提供するコードがあるなら、使い方の問い合わせ(usage question)の Stack Overflow で openlayers タグを使用するか、開発者のメーリングリストにサインアップすることで参加できます。

https://stackoverflow.com/questions/tagged/openlayers
https://groups.google.com/forum/#!forum/openlayers-dev

1.3.5. 問題を報告
問題を報告するためには、OpenLayers のライブラリが配布されているいくつかの性質の違いを理解することが重要です。

● ol.js - アドバンスドモード(可読形式ではありません)で Closure Compiler を使用してで構築されたスクリプト。
● ol-debug.js - 開発の間使用することができる人間が読めるバージョン。

問題が発生した場合には、ol-debug.js を使用して問題を報告することが重要です。また、Chrome 開発ツール(Chrome's Developer Tools)のような Web 開発ツールを使用して見つけることができる完全なスタックトレースが含まれています。ol.layer.Tile を ol.layer.Image に変更することで map.html に間違えが起こるかを試します。分かるエラーは、次のとおりです。「Uncaught TypeError: undefined is not a function」。メーリングリストに報告したとき、誰もそれが何を意味するか知りません。まず最初に、代わりに ol.js の指定を ol-debug.js の指定にスクリプトタグを変更します。ページをリロードします。デバッガは、ここで、エラー時に停止し、完全なスタックトレースを見ることができます:
(原文[http://openlayers.org/workshop/en/basics/resources.html]では、ここに ol-debug.js の出力例があります。)

スタックトレースを示すデバッガ。

OpenLayers4 Workshop - 1.2. Dissecting Your Map

1.2. マップを解析
前のセクションで示したように、マップは、マークアップ、スタイル宣言、および、初期化コードを一緒に用いることによって生成されます。これらの部分を個々にもう少し詳わしくみていきます。

1.2.1. マップマークアップ
前の例のマップのマークアップは、単一のドキュメント要素(document element)を生成します。

<div id="map"></div>

この <div> 要素は、マップのビューポートのコンテナとして機能します。ここでは、<div> 要素を使用していますが、ビューポートのコンテナは、任意のブロックレベル要素とすることができます。

このケースでは、マップのターゲット(target)として参照できるように、コンテナに id 属性を与えます。

1.2.2. マップスタイル
OpenLayers には、マップ関連の要素をスタイリングする方法を指定するデフォルトのスタイルシートが付属しています。map.html ページにこのスタイルシートを正確に追加します。(<link rel="stylesheet" href="/ol.css" type="text/css">)

OpenLayers がマップの大きさを推測(して表示)することはありません。このため、次の基本のスタイルシートは、ページ上でマップに区域を与えるために、少なくとも1つのカスタム(作成した)スタイル宣言を入れる必要があります。
<link rel="stylesheet" href="/ol.css" type="text/css">
<style>
 #map {
  height: 256px;
  width: 512px;
 }
</style>
このケースでは、マップコンテナの id 値をセレクタとして使用し、マップコンテナの幅(512px)と高さ(256px)を指定します。

スタイル宣言は、この(HTML)ドキュメントの <head> に直接入れています。ほとんどの場合、スタイル宣言に関連したマップは、外部スタイルシートにリンクした、より大きなウェブサイトのテーマの一部になっています。

1.2.3. マップの初期化
マップを生成する次のステップは、いくつかの初期化コードを入れることです。この場合、その作業を行うために <body> ドキュメントの下に <script> 要素を入れます。
<script type="text/javascript">
 var map = new ol.Map({
  target: 'map',
  layers: [
   new ol.layer.Tile({
    source: new ol.source.TileWMS({
     url: 'https://ahocevar.com/geoserver/wms',
     params: {LAYERS: 'nasa:bluemarble', TILED: true}
    })
   })
  ],
  view: new ol.View({
   projection: 'EPSG:4326',
   center: [0, 0],
   zoom: 0,
   maxResolution: 0.703125
  })
 });
</script>
これらのステップの順序は重要です。カスタムスクリプトが実行される前に、OpenLayers ライブラリがロードされる必要があります。この例では、OpenLayers ライブラリは <script src="loader.js"></script> のあるこのドキュメントの <head> 内でロードされます。

同様に、(上記の)カスタムマップの初期化コードは、ビューポートのコンテナとして機能するドキュメント要素、この場合は <div id="map"></div>、が準備されるまで実行できません。ドキュメントの最後 <body> に初期化コードがあることにより、マップが生成する前にライブラリがロードされていて、ビューポートのコンテナが準備できていることを確認します。

それでは、マップの初期化スクリプトが何をしているか、もっと詳わしくみていきます。このスクリプトは、いくつかの設定オプションを伴った新しい ol.Map オブジェクトを作成しています。

target: 'map'

マップコンストラクタにマップを描画する場所を伝えるため、ビューポートコンテナの id 属性の属性値を使用します。このケースでは、マップコンストラクタのターゲットとして、文字列値「map」を渡します。この構文は、便利なショートカットです。要素(例えば document.getElementById('map'))へ直接参照することにより明確に提供することができます。

レイヤ設定は、マップに表示するためのレイヤを生成します。
layers: [
 new ol.layer.Tile({
  source: new ol.source.TileWMS({
   url: 'https://ahocevar.com/geoserver/wms',
   params: {LAYERS: 'nasa:bluemarble', TILED: true}
  })
 })
],
この部分が新しいことでも、この構文に疑問を持たないでください。レイヤーの作成は、別の単位で説明します。理解するための重要な部分は、マップビューはレイヤのコレクションであるということです。地図を見るために、少なくとも一つのレイヤを含める必要があります。

最後のステップは、ビューを定義します。投影法、中心とズームレベルを指定します。また、GeoWebCache が扱うことができない bounding boxes を要求しないことを確認するため maxResolution を指定します。
view: new ol.View({
 projection: 'EPSG:4326',
 center: [0, 0],
 zoom: 0,
 maxResolution: 0.703125
})
最初のマップの解析に成功しました!次は、OpenLayers の開発について学びます。

OpenLayers4 Workshop - 1.1. Creating a Map

1.1. 地図の作成
OpenLayers では、マップは、レイヤのコレクション、および、ユーザとの対話を処理するための様々なインタラクションとコントロールです。マップは、3つの基本的な部分:マークアップ、スタイル宣言、初期化コードで作成されます。

1.1.1. 演習例
それでは OpenLayers マップの完全な演習例をみてみましょう。
<!doctype html>
<html lang="en">
 <head>
  <link rel="stylesheet" href="/ol.css" type="text/css">
  <style>
    #map {
     height: 256px;
     width: 512px;
    }
  </style>
  <title>OpenLayers example</title>
  <script src="/loader.js" type="text/javascript"></script>
 </head>
 <body>
  <h1>My Map</h1>
  <div id="map"></div>
  <script type="text/javascript">
   var map = new ol.Map({
    target: 'map',
    layers: [
     new ol.layer.Tile({
      title: "Global Imagery",
      source: new ol.source.TileWMS({
       url: 'https://ahocevar.com/geoserver/wms',
       params: {LAYERS: 'nasa:bluemarble', TILED: true}
      })
     })
    ],
    view: new ol.View({
     projection: 'EPSG:4326',
     center: [0, 0],
     zoom: 0,
     maxResolution: 0.703125
    })
   });
  </script>
 </body>
</html>
タスク
1.依存関係をインストールしデバッグサーバを動作させるために、セットアップ(Setup)指示が完了していることを確認します。
2. 新しいファイル map.html に上記のテキストをコピーして、ワークショップディレクトリのルートに保存します。
3. Webブラウザで次の演習マップを開きます:http://localhost:4000/map.html



世界画像を表示する演習地図

最初の地図を作成できたので、続けて各部をより詳しくみていくことにします。

OpenLayers4 Workshop - 0 Introduction

ここでは、OpenLayers の Docs(Documentation[http://openlayers.org/en/latest/doc/])の「Make sure to also check out the OpenLayers workshop.」のリンク先にある「OpenLayers Workshop(http://openlayers.org/workshop/en/index.html)」を訳してみました。画像などは実際に試したものです。翻訳に迷ったところもありますので、参考にされる方はサイトと見比べて下さい。


ようこそ OpenLayers ワークシップへ

このワークシップは、web マッピングソリューションとして OpenLayers の包括的な概要を提供するために設計されています。

Preparation steps for OSGeo-Live v10.0
OSGeo-Live v10.0 の準備手順

Node.js がインストールされていなければ(例えば、インストールしたままの OSGeo-Live v10.0 で作業しているなら)、インストールする必要があります。ここでは、ワークショップが依存するすべてのものを取得するために、ターミナルでコマンドを実行するために必要なコマンドの例があります。

最初に、Node.js のインストールを管理するために使用する nvm (Node Version Manager) をインストールします。
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.1/install.sh | bash
次に、ターミナルを閉じて再び開くと、nvm スクリプトが利用可能になります。

ターミナルで次のコマンドを実行して、最新の v6.x Node.js とそれに対応する npm ユーティリティをインストールします。
nvm install v6

Setup
セットアップ

これらのインストラクションは、最新のワークショップのリリースの  openlayers-workshop-en.zip アーカイブで始めることを仮定します。さらに、OpenLayers ライブラリ用の開発サーバを動作させるため Node がインストールされている必要があります。

zip ファイルを展開した後、openlayers-workshop-en ディレクトリに移動し、いくつかの依存関係をインストールします。
npm install
これで、ワークショップサーバを開始する準備が出来ました。これは、OpenLayers ライブラリのデバッグローダを提供することに加えて、てワークショップのドキュメントを提供します。
npm start
これは、ワークショップドキュメントを読み、http://localhost:4000 で演習を処理する開発サーバを開始します。

■□ Debian8 で試します■□
このワークショップでは OSGeo-Live v10.0 を使用していますが、ここでは Debian8 で進めてみます。

「How To Install Node.js on Debian 8(https://www.digitalocean.com/community/tutorials/how-to-install-node-js-on-debian-8)」を参考に Node.js をインストールします。

npm(Node Package Manager)のインストールは、このブログの「OpenLayers4 Tutorials - 3 Create Custom Builds(http://nobmob.blogspot.jp/2017/05/openlayers4-tutorials-3-create-custom.html)」にあるのでそちらをみて下さい。

Node.js をインストールする前に nvm(Node Version Manager)をインストールします。nvm を使用すると複数の独立したバージョンの Node.js をインストールできます。
user@deb8-vmw:~$ su -
パスワード:
root@deb8-vmw:~# apt-get update
root@deb8-vmw:~# apt-get install build-essential libssl-dev
次の curl コマンドで nvm をインストールします。(バージョンは、その時で変わります。「GitHub-creationix/nvm:(https://github.com/creationix/nvm)」で確認できます。)
root@deb8-vmw:~# exit
user@deb8-vmw:~$ curl -sL https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh -o install_nvm.sh
インストールスクリプト(install_nvm.sh)をエディタ(vim など)で確認し、スクリプトを bash で実行します。
user@deb8-vmw:~$ vim install_nvm.sh 
user@deb8-vmw:~$ bash install_nvm.sh 
nvm コマンドと機能にアクセするには、一度ログアウトしてログインするか、または、次のコマンドを実行します。
user@deb8-vmw:~$ source ~/.profile
インストール可能な Node.js のバージョンを見つけるために、次のコマンドを実行します。
user@deb8-vmw:~$ nvm ls-remote
---
        v6.10.2   (LTS: Boron)
        v6.10.3   (Latest LTS: Boron)
         v7.0.0
---
        v7.10.0
この時点で最新のバージョンは v7.10.0 ですが、v6.10.3 が長期間サポートのリリースなので、これをインストールします。
(「OpenLayers4 Tutorials - 3 Create Custom Builds(http://nobmob.blogspot.jp/2017/05/openlayers4-tutorials-3-create-custom.html)」では、Node.js のバージョンが v7.9.0 だったのが、現在では v7.10.0 になっています。
user@deb8-vmw:~$ node -v
v7.10.0
nvm で後からインストールすると、すべて変更されます。)

user@deb8-vmw:~$ nvm install 6.10.3
Downloading and installing node v6.10.3...
Downloading https://nodejs.org/dist/v6.10.3/node-v6.10.3-linux-x64.tar.xz...
######################################################################## 100.0%
Computing checksum with sha256sum
Checksums matched!
Now using node v6.10.3 (npm v3.10.10)
Creating default alias: default -> 6.10.3 (-> v6.10.3)

通常、nvm は直近にインストールされたバージョンを使用するように切り替えます。
user@deb8-vmw:~$ node -v
v6.10.3
もし、nvm にダウンロードしたばかりのバージョンを明示的に使用するように指定するには、次のように入力します。
user@deb8-vmw:~$ nvm use 6.10.3
「Setup」本文中の「workshop release」をクリックして、最新版「v4.0.2-alpha.1(2017.5.23 現在)」の英語版「openlayers-workshop-en.zip」をクリックしてダウンロードします。
ダウンロードしたファイルをユーザのホームディレクトリに移動し展開します。
user@deb8-vmw:~$ ls ダウンロード
---
openlayers-workshop-en.zip
---
user@deb8-vmw:~$ mv ダウンロード/openlayers-workshop-en.zip ./
user@deb8-vmw:~$ ls
---
openlayers-workshop-en.zip
---
user@deb8-vmw:~$ unzip openlayers-workshop-en.zip
生成した openlayers-workshop-en ディレクトリに移動し、次のコマンドを実行します。
user@deb8-vmw:~$ ls
---
openlayers-workshop-en
openlayers-workshop-en.zip
---
user@deb8-vmw:~$ cd openlayers-workshop-en
user@deb8-vmw:~/openlayers-workshop-en$ npm install
次のコマンドで開発サーバを開始します。
user@deb8-vmw:~/openlayers-workshop-en$ npm start

> openlayers-workshop@0.0.0 start /home/user/openlayers-workshop-en
> node serve.js

Server running: http://localhost:4000/
Webブラウザのアドレス欄に
http://localhost:4000/
と入力して Enter キーを押すと、ワークショップのページが開きます。
■□ここまで■□

概要

このワークショップは、一連のモジュールとして提示されます。各モジュールでは、そのモジュールに対する特定の目的を達成するために設計された一連のタスクを実行します。各モジュールは、前のモジュールで学習した演習を基盤とし、知識ベースを繰り返し構築するように設計されています。

● Basics(基礎)- OpenLayers を使用してマップを web ページに追加する方法の学習
● Layers and Sources(レイヤとソース)- レイヤとソースについての学習
● Controls and Interactions(コントロールとインタラクション)- マップコントロールとインタラクションの使用についての学習
● Vector Topics(ベクタトピックス)- ベクタレイヤ(vector layer)の深い探索
● Custom Builds(カスタムビルド)- カスタムビルドの作成。