2 - ol3ex 16b - Draw features example 2

「draw-features.js（216-ol3ex.js）」は、地図を表示するのに必要な javascript です。

「216-ol3ex.js」

var raster = 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.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({
/** ol.layer.Vector 
 * Vector data that is rendered client-side. Note that any 
 * property set in the options is set as a ol.Object property
 * on the layer object; for example, setting title: 'My 
 * Title' in the options means that title is observable, and 
 * has get/set accessors.
 * クライアント側で描画されたベクタデータ。オプションで設定した任
 * 意のプロパティは、レイヤオブジェクトで ol.Object プロパティ
 * として設定されていることに注意してください。たとえば、オプショ
 * ンで、title：'My Title' を設定することは、タイトルは 
 * observable で、アクセサを取得/設定することを意味します。
 * （ol3 API）
 */
 source: source,
 style: new ol.style.Style({
 /** ol.style.Style 
  * Base class for vector feature rendering styles.
  * ベクタフィーチャがスタイルを描画するための基本クラス。
  * （ol3 API）
  */
  // 描画確定後のスタイル LineStrig, Polygon
  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
  }),
  // 描画確定後のスタイル Circle
  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],
 target: 'map',
 view: new ol.View({
  center: [-11000000, 4600000],
  zoom: 4
 })
});

// ジオメトリタイプ（Circle, LineStrig, Polygon）の取得
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} */ (typeSelect.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();