1 - ol3 16 - Workshop 4.2. Understanding Style

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 style...
   return style;
  }
 })
});

4.2.2. Symbolizers
CSS の宣言ブロックと同義は、OpenLayers 3 では 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」の値でクラス属性を持っているものを除いて（それらのフィーチャは、1px 幅のオリーブ色の縁の青色で塗りつぶす）すべてのフィーチャを赤く着色したい場合は、、スタイル関数を以下のように作成します。（ところで、それはそれら が再利用できるようにスタイルの関数の外側でオブジェクトを作成することが重要ですが、オブジェクトがインラインに作成された下の例の理由は簡単にするためです。）

style: (function() {
 var someStyle = [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'
  })
 })];
 return function(feature, resolution) {
  if (feature.get('class') === "someClass") {
   return someStyle;
  } else {
   return otherStyle;
  }
 };
}())

注：実関数の外側でスタイルの配列を作成することが重要です。上記の例では、これはクロージャを用いて行うことができます。
注：フィーチャは、引数として解像度のみを持つ関数を取ることができるスタイル設定オプションを持っています。これは、（解像度に基づく）個々のフィーチャのスタイルをすることが可能です。

4.2.4. 擬似クラス
CSS はセレクタに擬似クラスを可能にします。これらはマウスの位置、隣接する要素、またはブラウザ履歴のような、セレクタ内で簡単に置き換えられない内容（コンテキスト）に基づいたスタイル宣言の適用を基本的に制限します。OpenLayers 3 では、いくらか似たような概念は、 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」にリンクが設定されています。）