2 - ol3.12ex 143b - Icon Pixel Operations 2

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

「2143-ol3ex.js」

function createStyle(src, img) {
 return new ol.style.Style({

 /** ol.style.Style 
  * Container for vector feature rendering styles. Any 
  * changes made to the style or its children through 
  * set*() methods will not take effect until the feature 
  * or layer that uses the style is re-rendered.
  * ベクタフィーチャがスタイルを描画するためのコンテナ。
  * スタイルや set*() メソッドを通じてその子に加えられた変
  * 更は、スタイルを使用するフィーチャまたはレイヤが再レン
  * ダリングされるまで有効になりません。
  * （ol3 API[説明は Stable Only のチェックを外すと表示]）
  */

  image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
  /** ol.style.Icon 
   * Set icon style for vector features.
   * ベクタフィーチャのアイコンスタイルを設定します。
   * （ol3 API[説明は Stable Only のチェックを外すと表示]）
   */

   /** @type 
   * 値のタイプ（型）の説明 - 式などで表示
   * （@use JSDoc[http://usejsdoc.org/]より）
   */

   anchor: [0.5, 0.96],
   /** anchor:
    * Anchor. Default value is [0.5, 0.5] (icon center).
    * （ol3 API[説明は Stable Only のチェックを外すと表示]）
    */

   src: src,
   /** src:
    * Image source URI. Required.
    * （ol3 API[説明は Stable Only のチェックを外すと表示]）
    */

   img: img,
   /** img:
    * Image object for the icon. If the src option is not 
    * provided then the provided image must already be 
    * loaded. And in that case, it is required to provide 
    * the size of the image, with the imgSize option.
    * アイコンの画像（image）オブジェクト。 src オプションが
    * 提供されていない場合では、提供される画像は、すでにロード
    * されている必要があります。その場合には、imgSize オプショ
    * ンを使用して、画像の大きさを提供するために必要です。
    * （ol3 API[説明は Stable Only のチェックを外すと表示]）
    */

   imgSize: img ? [img.width, img.height] : undefined
   /** imgSize:
    * Image size in pixel. Only required if img is set 
    * and src is not.
    * 画素単位の画像サイズ。img が設定され、src がされてない場
    * 合にのみ必要です。
    * （ol3 API[説明は Stable Only のチェックを外すと表示]）
    */

   /** 条件演算子 condition ? expr1 : expr2 
    * condition: true か false かを評価する条件文です。
    * expr1, expr2: 各々の値の場合に実行する式です。
    * condition が true の場合、演算子は expr1 の値を選択しま
    * す。そうでない場合は expr2 の値を選択します。
    * （MDN[https://developer.mozilla.org/ja/docs/Web/
    * JavaScript/Guide/Expressions_and_Operators]）
    */

  }))
 });
}

var iconFeature = 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）
  */

// iconFeature.set('style', createStyle('data/icon.png', undefined));
iconFeature.set('style', createStyle('v3.12.1/examples/data/icon.png', undefined));
/** set(key, value, opt_silent)
 * set(key, value, opt_silent)（ol3 API）
 */

var map = new ol.Map({
 layers: [

  new ol.layer.Tile({
  /** ol.layer.Tile 
   * For layer sources that provide pre-rendered, tiled 
   * images in grids that are organized by zoom levels for 
   * specific resolutions. 
   * プリレンダリング（事前描画）を提供するレイヤソースのため
   * の、特定の解像度でのズームレベルによって編成されているグ
   * リッドのタイルイメージ。（ol3 API）
   */

   source: new ol.source.Stamen({ layer: 'watercolor' })
   /** ol.source.Stamen
    * Layer source for the Stamen tile server.
    * Stamen タイルサーバのレイヤソース。（ol3 API）
    * （2 - ol3ex 24b - Stamen example 1 参照）
    */

  }),

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

   style: function(feature) { return feature.get('style'); },
   /** style:
    * Layer style. See ol.style for default style which 
    * will be used if this is not defined.
    * レイヤースタイル。これが定義されていない場合に使用される
    * デフォルトのスタイルに対する ol.style を参照してくださ
    * い。（ol3 API）
    */

   /** get(key)
    * Gets a value.（ol3 API）
    */

   source: new ol.source.Vector({ features: [iconFeature] })
   /** ol.source.Vector
    * Provides a source of features for vector layers. 
    * Vector features provided by this source are suitable 
    * for editing. See ol.source.VectorTile for vector 
    * data that is optimized for rendering.
    * ベクタレイヤのフィーチャのソースを用意します。このソース
    * が提供するベクタフィーチャは、編集に適しています。レンダ
    * リングのために最適化されたベクタデータの 
    * ol.source.VectorTile を参照してください。（ol3 API）
    */

  })
 ],
 target: document.getElementById('map'),
 view: new ol.View({
  center: [0, 0],
  zoom: 3
 })
});

var selectStyle = {};

var select = new ol.interaction.Select({
/** ol.interaction.Select
 * Interaction for selecting vector features. By default, 
 * selected features are styled differently, so this 
 * interaction can be used for visual highlighting, as 
 * well as selecting features for other actions, such as  
 * modification or output. There are three ways of 
 * controlling which features are selected: using the 
 * browser event as defined by the condition and 
 * optionally the toggle, add/remove, and multi options; 
 * a layers filter; and a further feature filter using 
 * the filter option.
 * ベクタフィーチャを選択するためのインターラクション。デフォ
 * ルトでは、このインターラクションは、他のアクションで選択す
 * るフィーチャと同じように、変形や出力のような視覚的ハイライ
 * トに使用することができます。選択されているフィーチャを制御
 * する3つの方法があります。condition と任意の toggle、
 * add/remove、multi オプションによって定義されたブラウザ
 * イベントを使用する、レイヤフィルタ、フィルタオプションを使
 * 用するその他のフィーチャフィルタ、です。
 * （ol3 API[説明は Stable Only のチェックを外すと表示]）
 */

 style: function(feature, resolution) {
 /** style:
  * Style for the selected features. By default the 
  * default edit style is used (see ol.style).
  * 選択されたフィーチャのスタイル。デフォルトでは、デフォル
  * ト編集スタイル（default edit style）が使用されます。
  * （ol.style参照）
  * （ol3 API[説明は Stable Only のチェックを外すと表示]）
  */

  var image = feature.get('style').getImage().getImage();
  /** get(key)
   * Gets a value.
   * 値を取得します。（ol3 API）
   */

  /** getImage()
   * Get the image icon (style).
   * （ol3 API[説明は Stable Only のチェックを外すと表示]）
   */

  if (!selectStyle[image.src]) {
   var canvas = document.createElement('canvas');

   var context = canvas.getContext('2d');
   /** HTMLCanvasElement.getContext()
    * The HTMLCanvasElement.getContext() method returns a 
    * drawing context on the canvas, or null if the context 
    * identifier is not supported.
    * HTMLCanvasElement.getContext（）メソッドは、キャンバス
    * 上の描画コンテキストを返すか、または コンテキスト識別子が
    * サポートされていない場合、null を返します。。
    * contextType Is a DOMString containing the context 
    * identifier defining the drawing context associated to 
    * the canvas.
    * "2d", leading to the creation of a 
    * CanvasRenderingContext2D object representing a 
    * two-dimensional rendering context.
    * contextTypeは canvas に関連する描画コンテキストを定義す
    * るコンテキスト識別子を含む DOMString  です。
    * 「2D」、二次元のレンダリングコンテキストを表す
    * CanvasRenderingContext2D オブジェクトの作成につながりま
    * す。
    * （MDN[https://developer.mozilla.org/en-US/docs/Web/
    * API/HTMLCanvasElement/getContext]）
    */

   canvas.width = image.width;
   canvas.height = image.height;

   context.drawImage(image, 0, 0, image.width, image.height);
   /** CanvasRenderingContext2D.drawImage()
    * The CanvasRenderingContext2D.drawImage() method of 
    * the Canvas 2D API provides different ways to draw an 
    * image nto the canvas.
    * Canvas 2D API のCanvasRenderingContext2D.drawImage() 
    * メソッドは、キャンバス（canvas）に画像を描画するためのさ
    * まざまな方法を提供します。
    * Syntax
    * void ctx.drawImage(image, dx, dy);
    * void ctx.drawImage(image, dx, dy, dWidth, dHeight);
    * void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
    * （MDN[https://developer.mozilla.org/en-US/docs/Web/API/
    * CanvasRenderingContext2D/drawImage]）
    */

   var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
   /** CanvasRenderingContext2D.getImageData()
    * The CanvasRenderingContext2D.getImageData() method of 
    * the Canvas 2D API returns an ImageData object 
    * representing the underlying pixel data for the area 
    * of the canvas denoted by the rectangle which starts 
    * at (sx, sy) and has an sw width and sh height.
    * Canvas 2D API の 
    * CanvasRenderingContext2D.getImageData() 
    * メソッドは、（SX、SY）で始まりSW幅とSHの高さを有している
    * 四角形で示される、キャンバス（canvas）の領域の基礎となる
    * ピクセルデータを表す ImageData オブジェクトを返します。
    * Syntax
    * ImageData ctx.getImageData(sx, sy, sw, sh);
    * （MDN[https://developer.mozilla.org/en-US/docs/Web/
    * API/CanvasRenderingContext2D/getImageData]）
    */

   var data = imageData.data;
   for (var i = 0, ii = data.length; i < ii; i = i + (i % 4 == 2 ? 2 : 1)) {
    data[i] = 255 - data[i];
   }

   context.putImageData(imageData, 0, 0);
   /** CanvasRenderingContext2D.putImageData()
    * The CanvasRenderingContext2D.putImageData() method 
    * of the Canvas 2D API paints data from the given 
    * ImageData object onto the bitmap. If a dirty 
    * rectangle is provided, only the pixels from that 
    * rectangle are painted.
    * Canvas 2D API の 
    * CanvasRenderingContext2D.getImageData() 
    * メソッドは、与えられたの ImageData オブジェクトからビッ
    * トマップにデータをペイントします。汚れた矩形が提供される
    * 場合、その長方形のピクセルのみが描かれています。
    * Syntax
    * void ctx.putImageData(imagedata, dx, dy);
    * void ctx.putImageData(imagedata, dx, dy, dirtyX, 
    *  dirtyY, dirtyWidth, dirtyHeight);
    * （MDN[https://developer.mozilla.org/en-US/docs/Web/
    * API/CanvasRenderingContext2D/putImageData]）
    */

   selectStyle[image.src] = createStyle(undefined, canvas);
  }
  return selectStyle[image.src];
 }
});

map.addInteraction(select);
/** addInteraction(interaction)
 * Add the given interaction to the map.
 * マップへ与えられたインターラクションを追加します。
 * （ol3 API）
 */

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

 map.getTargetElement().style.cursor =
  map.hasFeatureAtPixel(evt.pixel) ? 'pointer' : '';
  /** getTargetElement
   * Get the DOM element into which this map is rendered. 
   * In contrast to`getTarget` this method always return 
   * an `Element`, or `null` if themap has no target.
   * このマップがレンダリングされる DOM 要素を取得します。
   * マップがターゲットを持っていない場合は、`getTarget`
   * とは対照的に、このメソッドは常に` Element`、もしく
   * は `null`を返します。
   * （ol3 API[説明は Stable Only のチェックを外すと表示]）
   */

  /** hasFeatureAtPixel(pixel, opt_layerFilter, opt_this)
   * Detect if features intersect a pixel on the viewport. 
   * Layers included in the detection can be configured 
   * through opt_layerFilter. 
   * フィーチャがビューポート上でピクセルと交差するかどうかを
   * 検出します。検出に含まれたレイヤは、opt_layerFilter を
   * 通じて設定することができます。
   * （ol3 API[説明は Stable Only のチェックを外すと表示]）
  */

});