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」にリンクが設定されています。）