2 - ol3.4ex 99b - Draw features example 2

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

「299-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 vector = new ol.layer.Vector({
 source: source,

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

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

   color: 'rgba(255, 255, 255, 0.2)'
  }),

  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
  }),

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

   radius: 7,
   fill: new ol.style.Fill({
    color: '#ffcc33'
   })
  })
 })
});

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
 })
});

var typeSelect = document.getElementById('type');

var draw; // global so we can remove it later

function addInteraction() {
 var value = typeSelect.value;
 if (value !== 'None') {

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

   source: source,

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

  });

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

 }
}

/**
 * Let user change the geometry type.
 * @param {Event} e Change 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]）
 */

typeSelect.onchange = function(e) {
/** GlobalEventHandlers.onchange()
 * The onchange property sets and returns the event handler 
 * for the change event.
 * onchange プロパティは、change イベントに対してイベントハ
 * ンドラを設定、および、返します。
 * （MDN[https://developer.mozilla.org/en-US/docs/Web/
 * API/GlobalEventHandlers/onchange]）
 */

 map.removeInteraction(draw);
 /** removeInteraction(()
  * Remove the given interaction from the map.
  * マップから与えられたインターラクションを削除します。
  * （ol3 API）
  */

 addInteraction();
};

addInteraction();