2 - ol3.1ex 54b - Draw and modify features example 2

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

「254-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'})
  * Layer source for the MapQuest tile server.
  * MapQuest タイルサーバのレイヤソース。（ol3 API
  * 2 - ol3ex 23b - MapQuest example 2 参照）
  */
});

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

/** The features are not added to a regular vector 
 * layer/source,　but to a feature overlay which holds a 
 * collection of features.　This collection is passed to 
 * the modify and also the draw　interaction, so that 
 * both can add or modify features.
 * フィーチャは、通常、ベクター層/ソースに追加するが、フィーチャ
 * のコレクションを保持するフィーチャオーバーレイには追加されませ
 * ん。このコレクションは、変更、または、描画インターラクションに
 * 渡されます。そのため、フィーチャを追加または変更の両方ができま
 * す。
 */

var featureOverlay = new ol.FeatureOverlay({
/** ol.FeatureOverlay
 * A mechanism for changing the style of a small number of 
 * features on a temporary basis, for example highlighting. 
 * This is necessary with the Canvas renderer, where, unlike
 * in SVG, features cannot be individually referenced.
 * ハイライトのように、一時的に少数のフィーチャがスタイルの変更す
 * るためのメカニズム。これは Canvas レンダラが必要で、SVGとは異
 * なり、フィーチャを個別に参照することはできません。（ol3 API）
 */

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

featureOverlay.setMap(map);
/** setMap(map)
 * Set the map to be associated with this overlay.
 * このオーバレイに関連付けられているマップを設定します。
 * （ol3 API）
 */

var modify = new ol.interaction.Modify({
/** ol.interaction.Modify 
 * Interaction for modifying vector data.
 * ベクタデータを変形するためのインタラクション。
 * （ol3 API）
 */

 features: featureOverlay.getFeatures(),
 /** the SHIFT key must be pressed to delete vertices, so
  * that new vertices can be drawn at the same position
  * of existing vertices
  * Shift キーは、頂点を削除するために押す必要があります。
  * そうすると、新たな頂点が既存の頂点と同じ位置に描画できます、
  */

 deleteCondition: function(event) {

  return ol.events.condition.shiftKeyOnly(event) &&
 /** ol.events.condition.shiftKeyOnly
  * Returns: True if only the shift key is pressed.
  * （ol3 API）
  */

   ol.events.condition.singleClick(event);
   /** ol.events.condition.singleClick
    * Returns: True if the event is a map singleclick event.
    * （ol3 API）
    */

 }
});

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

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

function addInteraction() {

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

  features: featureOverlay.getFeatures(),
  /** getFeatures()
   * Get the selected features.
   * 選択されたフィーチャを取得します。
   * Return: Features collection（ol3 API）
   */

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

 });
 map.addInteraction(draw);
}

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

/**
 * 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) {

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

 addInteraction();
};

addInteraction();