2 - ol3.6ex 122b - Blend modes example 2

「blend-modes.js（2122-ol3ex.js）」は、マップを表示するための JavaScript ファイルです。

MDN の <blend-mode>（https://developer.mozilla.org/en-US/docs/Web/CSS/blend-mode）に次のようにあります。

Summary
The type is a collection of keywords describing blend modes.
タイプは、ブレンドモードを説明するキーワードの集合です。

A blend mode is a method of calculating the final color value of a pixel when layers overlap. Each blend mode takes the color value of the foreground and the backdrop (top color and bottom color respectively), perfoms its calculation and returns a color value. The final, visible layer is the result of performing the blend mode calculation on every overlapping pixel among the blended layers.
ブレンドモードは、レイヤが重なったときに、画素の最終的なカラー値を算出する方法です。各ブレンドモードは、前景と背景（上の色と下の色それぞれ）の色の値をとり、その計算を実行し、カラー値を返します。最終的な、目に見えるレイヤがブレンドされたレイヤ間の、すべての重複ピクセルのブレンドモードの計算を行った結果です。

「2122-ol3ex.js」

/** Create separate layers for red, green an blue circles.
 *
 * Every layer has one feature that is styled with a circle, 
 * together the features form the corners of an equilateral 
 * triangle and their styles overlap.
 * 赤、緑、青の円のための別々のレイヤを作成します。
 * 
 * すべてのレイヤが、共にフィーチャが正三角形の角を形成し、その
 * スタイルが重なる、円でスタイリングされた一つのフィーチャを持
 * ちます。
 */

var redLayer = new ol.layer.Vector({
/** ol.layer.Vector
 * Vector data that is rendered client-side.
 * クライアント側で描画されたベクタデータ。（ol3 API）
 */

 source: new ol.source.Vector({
 /** ol.source.Vector 
  * Provides a source of features for vector layers.
  * ベクタレイヤのフィーチャのソースを提供します。（ol3 API）
  */

  features: [new ol.Feature(new ol.geom.Point([0, 0]))]
  /** ol.Feature
   * A vector object for geographic features with a 
   * geometry and other attribute properties, similar 
   * to the features in vector file formats like GeoJSON.
   * GeoJSONのようなベクトルファイル形式のフィーチャに類似し
   * た、ジオメトリとその他の属性プロパティを持つ地物フィー
   * チャのためのベクトルオブジェクト。（ol3 API）
   */

  /** ol.geom.Point
   * Point geometry.（ol3 API）
   */

 }),

 style: new ol.style.Style({
 /** ol.style.Style 
  * Base class for vector feature rendering styles.
  * ベクタフィーチャがスタイルを描画するための基本クラス。
  * （ol3 API）
  */

  image: new ol.style.Circle({
  /** ol.style.Circle
   * Set circle style for vector features.
   * ベクタフィーチャの円のスタイルを設定。（ol3 API）
   */

   fill: new ol.style.Fill({
   /** ol.style.Fill 
    * Set fill style for vector features.
    * ベクタフィーチャの塗りつぶしスタイルを設定。（ol3 API）
    */

    color: 'rgba(255,0,0,0.8)'
   }),

   stroke: new ol.style.Stroke({
   /** ol.style.Stroke 
    * Set stroke style for vector features. 
    * Note that the defaults given are the Canvas defaults, 
    * which will be used if option is not defined. 
    * The get functions return whatever was entered 
    * in the options;  they will not return the default.
    * ベクタフィーチャのためのストロークスタイルの設定。
    * デフォルトは、オプションが定義されていない場合に使用され
    * る Canvas のデフォルトを与えられることに注意してください。
    * GET関数は、オプションで入力されたものはすべて返します。
    * それらはデフォルトを返しません。（ol3 API）
    */

    color: 'rgb(255,0,0)',
    width: 15
   }),
   radius: 120
  })
 })
});
var greenLayer = new ol.layer.Vector({
 source: new ol.source.Vector({

 // 433.013 is roughly 250 * Math.sqrt(3)
  features: [new ol.Feature(new ol.geom.Point([250, 433.013]))]

 }),
 style: new ol.style.Style({
  image: new ol.style.Circle({
   fill: new ol.style.Fill({
    color: 'rgba(0,255,0,0.8)'
   }),
   stroke: new ol.style.Stroke({
    color: 'rgb(0,255,0)',
    width: 15
   }),
   radius: 120
  })
 })
});
var blueLayer = new ol.layer.Vector({
 source: new ol.source.Vector({

  features: [new ol.Feature(new ol.geom.Point([500, 0]))]
 }),

 style: new ol.style.Style({
  image: new ol.style.Circle({
   fill: new ol.style.Fill({
    color: 'rgba(0,0,255,0.8)'
   }),
   stroke: new ol.style.Stroke({
    color: 'rgb(0,0,255)',
    width: 15
   }),
   radius: 120
  })
 })
});

/** Create the map, the view is centered on the triangle. 
 * Zooming and panning is restricted to a same area.
 * マップを作成し、ビューは三角形の中央に配置されます。
 * ズームとパンは同じ領域に制限されています。
 */

var map = new ol.Map({
 layers: [
  redLayer,
  greenLayer,
  blueLayer
 ],
 target: 'map',
 view: new ol.View({
  center: [250, 220],
  extent: [0, 0, 500, 500],
  resolution: 4,
  minResolution: 2,
  maxResolution: 32
 })
});

// Various helper methods and event handlers
// 様々なヘルパーメソッドおよびイベントハンドラ。

/**
 * This method sets the globalCompositeOperation to the 
 * value of the selectfield and it is bound to the 
 * precompose event of the layers.
 * このメソッドは、選択フィールドの値に 
 * globalCompositeOperation を設定し、それがレイヤの 
 * precompose イベントにバインドされています。
 *
 * @param {ol.render.Event} evt The render event.
 */

/** 「@param」
 * The @param tag provides the name, type, and 
 * description of a function parameter.
 * The @param tag requires you to specify the name of 
 * the parameter you are documenting. You can also 
 * include the parameter's type, enclosed in curly 
 * brackets, and a description of the parameter.
 * @paramタグは、関数パラメータの名前と型、説明を提供します。
 * @paramタグを使用すると、文書化されたパラメータの名前を
 * 指定する必要があります。また、パラメータのタイプと、中括弧
 * で囲まれたおよびパラメータの説明を含めることができます。
 * （@use JSDoc [http://usejsdoc.org/tags-param.html]）
 */

var setBlendModeFromSelect = function(evt) {

 evt.context.globalCompositeOperation = select.value;
 /** CanvasRenderingContext2D.globalCompositeOperation
  * The CanvasRenderingContext2D.globalCompositeOperation 
  * property of the Canvas 2D API sets the type of 
  * compositing operation to apply when drawing new 
  * shapes, where type is a string identifying which 
  * of the compositing or blending mode operations to 
  * use.
  * キャンバスの2D APIの
  * CanvasRenderingContext2D.globalCompositeOperation 
  * プロパティは、タイプが、使用するのに合成またはブレンドモー
  * ドの操作かを識別する文字列である場合には、新しい図形を描画
  * するときに適用する合成操作のタイプを設定します。
  * （MDN[https://developer.mozilla.org/en-US/docs/Web/API/
  * CanvasRenderingContext2D/globalCompositeOperation]）
  */

};

/**
 * This method resets the globalCompositeOperation to the 
 * default value of 'source-over' and it is bound to the 
 * postcompose event of the layers.
 * このメソッドは、「source-over」の初期値に 
 * globalCompositeOperation を再設定し、それがレイヤの 
 * postcompose イベントにバインドされています。
 *
 * @param {ol.render.Event} evt The render event.
 */

var resetBlendModeFromSelect = function(evt) {
 evt.context.globalCompositeOperation = 'source-over';
};

/**
 * Bind the pre- and postcompose handlers to the passed layer.
 * pre- および postcompose ハンドラを介したレイヤにバインドします。
 *
 * @param {ol.layer.Vector} layer The layer to bind the handlers to.
 */

var bindLayerListeners = function(layer) {

 layer.on('precompose', setBlendModeFromSelect);
 /** on(type, listener, opt_this)
  * Listen for a certain type of event.
  * あるタイプのイベントをリッスンします。（ol3 API）
  */

 layer.on('postcompose', resetBlendModeFromSelect);
};

/**
 * Unbind the pre- and postcompose handlers to the passed layers.
 * pre- および postcompose ハンドラと介したレイヤのバインドを解除します。
 *
 * @param {ol.layer.Vector} layer The layer to unbind the handlers from.
 */

var unbindLayerListeners = function(layer) {

 layer.un('precompose', setBlendModeFromSelect);
 /** un(type, listener, opt_this)
  * Unlisten for a certain type of event.
  * あるタイプのイヴェントをリッスンしません。
  */

 layer.un('postcompose', resetBlendModeFromSelect);
};

/**
 * Handler for the click event of the 'affect-XXX' checkboxes.
 * 「affect-XXX」チェックボックスのクリックイベントのハンドラ
 *
 * @this {HTMLInputElement}
 */

/** @this
 * The @this tag indicates what the this keyword refers to 
 * when used within another symbol.
 * @thisタグは、このキーワードが他のシンボル内で使用された場とき
 * に参照することを示します。
 * （@use JSDoc[http://usejsdoc.org/tags-this.html]）
 */

var affectLayerClicked = function() {
 var layer;
 if (this.id == 'affect-red') {
  layer = redLayer;
 } else if (this.id == 'affect-green') {
  layer = greenLayer;
 } else {
  layer = blueLayer;
 }
 if (this.checked) {
  bindLayerListeners(layer);
 } else {
  unbindLayerListeners(layer);
 }
 map.render();
};

// Get the form elements and bind the listeners
var select = document.getElementById('blend-mode');
var affectRed = document.getElementById('affect-red');
var affectGreen = document.getElementById('affect-green');
var affectBlue = document.getElementById('affect-blue');

// Rerender map when blend mode changes

select.addEventListener('change', function() {
/** EventTarget.addEventListener
 * addEventListener は、 1 つのイベントターゲットにイベント 
 * リスナーを1 つ登録します。イベントターゲットは、ドキュメント
 * 上の単一のノード、ドキュメント自身、ウィンドウ、あるいは、
 * XMLHttpRequest です。
 *（MDN[https://developer.mozilla.org/ja/docs/Web/API/
 * EventTarget.addEventListener]）
 */

 map.render();
 /** renderSync()
  * Requests an immediate render in a synchronous manner.
  * 同期即時描画を要求します。（ol3 API）
  */

});

/** Unbind / bind listeners depending on the checked state 
 * when the checkboxes　are clicked.
 * チェックボックスがクリックされたときチェックされた状態による
 * Unbind / bind リスナ。
 */

affectRed.addEventListener('click', affectLayerClicked);
affectGreen.addEventListener('click', affectLayerClicked);
affectBlue.addEventListener('click', affectLayerClicked);

// Initially bind listeners
bindLayerListeners(redLayer);
bindLayerListeners(greenLayer);
bindLayerListeners(blueLayer);