2 - ol3.9ex 129b - Custom interaction example 2

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

「2129-ol3ex.js」

/**
 * Define a namespace for the application.
 * アプリケーションのための名前空間の定義。
 */
window.app = {};
var app = window.app;

/**
 * @constructor
 * @extends {ol.interaction.Pointer}
 */

/** 「@constructor（@class と同義）」
 * The @class tag marks a function as being a 
 * constructor, meant to be called with the new 
 * keyword to return an instance.
 * @classタグは、インスタンスを返すために、新しいキーワードで
 * 呼び出されることを意図し、コンストラクタとして function を
 * マークします。
 * （@use JSDoc [http://usejsdoc.org/tags-class.html]）
 */

/** 「@extends（@augments と同義）」
 * The @augments or@extends tag indicates that a 
 * symbol inherits from, and potentially adds to, 
 * a parent symbol. You can use this tag to document 
 * both class-based and prototype-based inheritance.
 * @augmentsまたは@@extendsタグは、シンボルが親シンボルから
 * 継承し、潜在的に追加する、ことを示しています。
 * あなたは、クラスベースとプロトタイプベース両方の継承を
 * 文書化するために、このタグを使用することができます。
 * （@use JSDoc [http://usejsdoc.org/tags-augments.html]）
 */

app.Drag = function() {

 ol.interaction.Pointer.call(this, {
 /** ol.interaction.Pointer 
  * Base class that calls user-defined functions on 
  * down, move and up events. This class also manages  
  * "drag sequences".
  * When the handleDownEvent user function returns 
  * true a drag sequence is started. During a drag 
  * sequence the handleDragEvent user function is 
  * called on move events. The drag sequence ends 
  * when the handleUpEvent user function is called 
  * and returns false.
  * ダウン（down）、ムーブ（move）、アップ（up）イベント
  * に関するユーザ定義関数を呼び出す基本クラス。このクラス
  * は、「ドラッグ·シーケンス」を管理します。
  * handleDownEvent ユーザ関数が true を返した場合、
  * ドラッグシーケンスが開始されます。ドラッグシーケンスの
  * 間、handleDragEvent ユーザ関数は、ムーブ（move）イ
  * ベントで呼び出されます。ドラッグシーケンスは  
  * handleUpEvent ユーザ関数が呼び出されたときに終了し、
  * false を返します。（ol3 API）
  */

 /** Function.prototype.call()
  * The call() method calls a function with a given 
  * this value and arguments provided individually.
  * call メソッドは、与えられた this 値とここに与えられ
  * た引数とともに、関数を呼び出します。
  * （MDN[https://developer.mozilla.org/en-US/docs/Web/
  * JavaScript/Reference/Global_Objects/Function/call]）
  */

  handleDownEvent: app.Drag.prototype.handleDownEvent,
  /** Object.prototype
   * The Object.prototype property represents the 
   * Object prototype object.
   * Object.prototype プロパティは、Object プロパティ
   * オブジェクトを表します。
   * （MDN[https://developer.mozilla.org/en-US/docs/Web/
   * JavaScript/Reference/Global_Objects/Object/prototype]）
   */

  handleDragEvent: app.Drag.prototype.handleDragEvent,
  handleMoveEvent: app.Drag.prototype.handleMoveEvent,
  handleUpEvent: app.Drag.prototype.handleUpEvent
 });

 /**
  * @type {ol.Pixel}
  * @private
  */

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

 /** @private
  * The @private tag marks a symbol as private, or 
  * not meant for general use. Private members are 
  * not shown in the generated output unless JSDoc 
  * is run with the -p/--private command-line 
  * option. In JSDoc 3.3.0 and later, you can also 
  * use the -a/--access command-line option to 
  * change this behavior.
  * @private タグは、プライベートとしての記号を記し、一
  * 般的な使用を意味していません。JSDoc が、-p/--private 
  * command-line オプションと実行されない限り、プライ
  * ベートメンバは生成出力には表示されません。JSDocの3.3.0
  * 以降では、この動作を変更するために -a/--access 
  * command-line オプションを使用することもできます。
  * （@use JSDoc[http://usejsdoc.org/tags-private.html]）
  */

 this.coordinate_ = null;

 /**
  * @type {string|undefined}
  * @private
  */
 this.cursor_ = 'pointer';

 /**
  * @type {ol.Feature}
  * @private
  */
 this.feature_ = null;

 /**
  * @type {string|undefined}
  * @private
  */
 this.previousCursor_ = undefined;

};

ol.inherits(app.Drag, ol.interaction.Pointer);
/** ol.inherits(childCtor, parentCtor) 
 * Inherit the prototype methods from one constructor 
 * into another.
 * 1つのコンストラクタから他のひとつにプロトタイプのメソッド
 * を継承します。
 * （ol3 API[説明は Stable Only のチェックを外すと表示]）
 */

/**
 * @param {ol.MapBrowserEvent} evt Map browser event.
 * @return {boolean} `true` to start the drag sequence.
 */

/** 「@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]）
 */

/** @return（@returns と同義）
 * The @returns tag documents the value that a function 
 * returns.
 * @returns タグは、関数が返す値について説明します。
 * （@use JSDoc [http://usejsdoc.org/tags-returns..html]）
 */

app.Drag.prototype.handleDownEvent = function(evt) {
 var map = evt.map;

 var feature = map.forEachFeatureAtPixel(evt.pixel,
 /** forEachFeatureAtPixel(pixel, callback, opt_this, 
  * opt_layerFilter, opt_this2)
  * Detect features that intersect a pixel on the viewport, 
  * and execute a callback with each intersecting feature. 
  * Layers included in the detection can be configured 
  * through opt_layerFilter. 
  * ビューポート上のピクセルと交差するフィーチャを検出し、互
  * いに交差するフィーチャと共にコールバックを実行します。
  * 検出に含まれるレイヤが opt_layerFilter を通じて設定する
  * ことができます。（ol3 API）
  */

  function(feature, layer) {
   return feature;
 });

 if (feature) {
  this.coordinate_ = evt.coordinate;
  this.feature_ = feature;
 }

 return !!feature;
};

/**
 * @param {ol.MapBrowserEvent} evt Map browser event.
 */

app.Drag.prototype.handleDragEvent = function(evt) {
 var map = evt.map;

 var feature = map.forEachFeatureAtPixel(evt.pixel,
  function(feature, layer) {
   return feature;
 });

 var deltaX = evt.coordinate[0] - this.coordinate_[0];
 var deltaY = evt.coordinate[1] - this.coordinate_[1];

 var geometry = /** @type {ol.geom.SimpleGeometry} */
  (this.feature_.getGeometry());
 /** getGeometry()
  * Get the feature's default geometry. A feature may have 
  * any number of named geometries. The "default" geometry 
  * (the one that is rendered by default) is set when 
  * calling ol.Feature#setGeometry.
  * フィーチャのデフォルトのジオメトリを取得します。フィーチャ
  * は、任意の数の指定のジオメトリのを有することができます。 
  * 「デフォルト」のジオメトリ（デフォルトでレンダリングされる
  * もの）が ol.Feature＃setGeometry を呼び出すときに設定され
  * ています。（ol3 API）
  */

 geometry.translate(deltaX, deltaY);
 /** translate(deltaX, deltaY)
  * Translate the geometry.
  * （ol3 API[説明は Stable Only のチェックを外すと表示]）
  */

 this.coordinate_[0] = evt.coordinate[0];
 this.coordinate_[1] = evt.coordinate[1];
};

/**
 * @param {ol.MapBrowserEvent} evt Event.
 */

app.Drag.prototype.handleMoveEvent = function(evt) {
 if (this.cursor_) {
  var map = evt.map;
  var feature = map.forEachFeatureAtPixel(evt.pixel,
   function(feature, layer) {
    return feature;
  });

  var element = evt.map.getTargetElement();
  /** 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 のチェックを外すと表示]）
   */

  if (feature) {
   if (element.style.cursor != this.cursor_) {
    this.previousCursor_ = element.style.cursor;
    element.style.cursor = this.cursor_;
   }
  } else if (this.previousCursor_ !== undefined) {
    element.style.cursor = this.previousCursor_;
    this.previousCursor_ = undefined;
  }
 }
};

/**
 * @param {ol.MapBrowserEvent} evt Map browser event.
 * @return {boolean} `false` to stop the drag sequence.
 */

app.Drag.prototype.handleUpEvent = function(evt) {
 this.coordinate_ = null;
 this.feature_ = null;
 return false;
};

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

var lineFeature = new ol.Feature(
 new ol.geom.LineString([[-1e7, 1e6], [-1e6, 3e6]]));
 /** ol.geom.LineString
  * Linestring geometry.（ol3 API）
  */

var polygonFeature = new ol.Feature(
 new ol.geom.Polygon([[[-3e6, -1e6], [-3e6, 1e6],
  [-1e6, 1e6], [-1e6, -1e6], [-3e6, -1e6]]]));
 /** ol.geom.Polygon
  * Polygon geometry.（ol3 API）
  */

var map = new ol.Map({
 interactions: ol.interaction.defaults().extend([new app.Drag()]),
 /** ol.interaction.defaults
  * Set of interactions included in maps by default. 
  * Specific interactions can be excluded by setting 
  * the appropriate option to false in the constructor 
  * options, but the order of the interactions is fixed. 
  * If you want to specify a different order for 
  * interactions, you will need to create your own 
  * ol.interaction.Interaction instances and insert 
  * them into a ol.Collection in the order you want 
  * before creating your ol.Map instance.
  * デフォルトでマップに含まれるインターラクションのセット。
  * 具体的なインターラクションは、コンストラクタのオプションで適
  * 切なオプションを false に設定することで除外することができま
  * すが、インターラクションの順番は固定されています。インターラ
  * クションに対して別の順番を指定したい場合は、独自の
  * ol.interaction.Interaction インスタンスを作成し、
  * ol.Map インスタンスを作成する前に、望む順番で 
  * ol.Collection にそれらを挿入する必要があります。（ol3 API）
  * new ol.interaction.DragRotateAndZoom()
  *（訳注：インターラクションの順番は、API を参照してください。）
  */

 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.TileJSON({
   /** ol.source.TileJSON 
    * Layer source for tile data in TileJSON format.
    * TileJSON フォーマットのタイルデータのためのレイヤソース。
    *（ol3 API）
    */

    url: 'http://api.tiles.mapbox.com/v3/mapbox.geography-class.jsonp'

   })
  }),

  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: [pointFeature, lineFeature, polygonFeature]
   }),

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

    image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
    /** ol.style.Icon 
     * Set icon style for vector features.
     * ベクタフィーチャのアイコンスタイルを設定します。
     * （ol3 API）
     */

     anchor: [0.5, 46],
     anchorXUnits: 'fraction',
     anchorYUnits: 'pixels',
     opacity: 0.95,
     // src: 'data/icon.png'
     src: 'v3.9.0/examples/data/icon.png'
    })),

    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）
     */

     width: 3,
     color: [255, 0, 0, 1]
    }),

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

     color: [0, 0, 255, 0.6]
    })
   })
  })
 ],
 target: 'map',
 view: new ol.View({
  center: [0, 0],
  zoom: 2
 })
});