1 - ol3-beta.5 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. ol.feature.StyleFunction
ベクタレイヤは、異なるスタイルが選択されている、フィーチャのいくつかの属性に基づいた 「style」設定のための関数を有することができます。スタイル関数は2つの引数、「feature（フィーチャ）」と「resolution（解像度）」を取得します。あなたが 「someClass」の値と共に「class」という名前の属性を持つすべてのフィーチャにスタイルを適用すると仮定すると、次のように、スタイル関数をはじめることになります。

style: function(feature, resolution) {
 if (feature.get('class') === 'someClass') {
  // return the 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({
 featureOverlay: new ol.FeatureOverlay({
  style: new ol.style.Style({
   fill: new ol.style.Fill({
    color: 'rgba(255,255,255,0.5)'
   })
  })
 })
});

スタイリングの基本を体験したので、ベクタレイヤのスタイルに移動する時です。（訳注：原文では、「styling vector layers」にリンクが設定されています。）