2 - ol3.4ex 101b - LineString arrows example 2

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

「2101-ol3ex.js」

var raster = new ol.layer.Tile({

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

});

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

var styleFunction = function(feature, resolution) {

 var geometry = feature.getGeometry();
 /** getGeometry()
  * Returns the Geometry associated with this feature 
  * using the current geometry name property. By default, 
  * this is geometry but it may be changed by calling 
  * setGeometryName.
  * 現在のジオメトリネームプロパティを使用して、このフィーチャに
  * 関連したジオメトリを返します。デフォルトでは、ジオメトリです
  * が、setGeometryName を呼び出すことによって変更することが
  * できます。（ol3 API）
  */

 var styles = [
  // linestring

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

   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: '#ffcc33',
    width: 2
   })
  })
 ];

 geometry.forEachSegment(function(start, end) {
 /** forEachSegment(callback, opt_this)
  * Iterate over each segment, calling the provided callback. 
  * If the callback returns a truthy value the function 
  * returns that value immediately. Otherwise the function 
  * returns false.
  * 提供されるコールバックを呼び出して、各セグメントを反復処理し
  * ます。コールバックが truthy 値を返す場合、関数はすぐにその値
  * を返します。そうでなければ、関数は false を返します。
  * （ol3 API[説明は Stable Only のチェックを外すと表示]）
  */

  var dx = end[0] - start[0];
  var dy = end[1] - start[1];

  var rotation = Math.atan2(dy, dx);
  /** Math.atan()
   * 引数として与えた数のアークタンジェントをラジアン単位で返
   * します。
   * （MDN[https://developer.mozilla.org/ja/docs/Web/
   * JavaScript/Reference/Global_Objects/Math/atan]）
   */

  // arrows

  styles.push(new ol.style.Style({
  /** push(elem)
   * Insert the provided element at the end of the 
   * collection.
   * コレクションの最後に供給されたエレメントに挿入します。
   * Name: elem, Type: T, Description: Element
   * （ol3 API）
   */

   geometry: new ol.geom.Point(end),
   /** ol.geom.Point
    * Point geometry.（ol3 API）
    */

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

    // src: 'data/arrow.png',
    src: 'v3.4.0/examples/data/arrow.png',

    anchor: [0.75, 0.5],
    // Anchor. Default value is [0.5, 0.5] (icon center).
    rotateWithView: false,
    /** Whether to rotate the icon with the view. Default is 
     * false. ビューとともにアイコンを回転する個どうか設定します。
     */
    rotation: -rotation
    /** Rotation in radians (positive rotation clockwise).
     * Default is 0. ラジウス単位での回転数（時計回り）。デフォ
     * ルトは、0。
     */
   })
  }));
 });

 return styles;
};

var vector = new ol.layer.Vector({
 source: source,
 style: styleFunction
});

var map = new ol.Map({
 layers: [raster, vector],

 renderer: exampleNS.getRendererFromQueryString(),
 // 'example-behavior.js' により URL にある renderer を返します

 target: 'map',
 view: new ol.View({
  center: [-11000000, 4600000],
  zoom: 4
 })
});

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

/** ol.interaction.Draw 
 * Interaction that allows drawing geometries.
 * ジオメトリの描画を認めるインターラクション。（ol3 API）
 */

 source: source,

 type: /** @type {ol.geom.GeometryType} */ ('LineString')
 /** @type 
  * 値のタイプ（型）の説明 - 式などで表示
  * （@use JSDoc[http://usejsdoc.org/]より）
  */

}));