2 - ol3.19ex 160b - Freehand Drawing 2

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

「2160-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.OSM()
 /** ol.source.OSM 
  * Layer source for the OpenStreetMap tile server.
  * OpenStreetMap タイルサーバのレイヤソース。（ol3 API）
  */

});

var source = new ol.source.Vector({wrapX: false});
/** ol.source.Vector
 * Provides a source of features for vector layers. 
 * Vector features provided by this source are 
 * suitable for editing. See ol.source.VectorTile for 
 * vector data that is optimized for rendering.
 * ベクタレイヤのフィーチャのソースを用意します。このソース
 * が提供するベクタフィーチャは、編集に適しています。レンダ
 * リングのために最適化されたベクタデータの 
 * ol.source.VectorTile を参照してください。（ol3 API）
 */

/** wrapX:
 * Wrap the world horizontally. Default is true. For 
 * vector editing across the -180° and 180° meridians 
 * to work properly, this should be set to false. The 
 * resulting geometry coordinates will then exceed the 
 * world bounds.
 * 水平方向に世界をラップします。デフォルトは true。-180°
 * と180°の子午線を横切って編集するベクトルが正しく動作す
 * るために、これは false に設定する必要があります。ジオメ
 * トリの座標の結果は、その後、世界の境界線を超えます。
 * （ol3 API[説明は Stable Only のチェックを外すと表示]）
 */

var vector = new ol.layer.Vector({
/** ol.layer.Vector
 * Vector data that is rendered client-side.
 * クライアント側で描画されるベクタデータ。（ol3 API）
 */

 source: source
});

var map = new ol.Map({
 layers: [raster, vector],
 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,
   /** source
    * Destination source for the drawn features.
    * 描画されたフィーチャのための宛先ソース。
    * （ol3 API[説明は Stable Only のチェックを外すと表示]）
    */

   type: /** @type {ol.geom.GeometryType} */ (typeSelect.value),
   /** type
    * Drawing type ('Point', 'LineString', 'Polygon', 
    * 'MultiPoint', 'MultiLineString', 'MultiPolygon' 
    * or 'Circle'). Required.
    * タイプ（「ポイント」、 「ラインストリング」、「ポリゴン」、
    * 「マルチポイント」、「マルチラインストリング」、 「マルチ
    * ポリゴン'」または「'サークル」）を描画します。 必須。
    * （ol3 API[説明は Stable Only のチェックを外すと表示]）
    */

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

   freehand: true
   /** freehand
    * Operate in freehand mode for lines, polygons, and 
    * circles. This makes the interaction always operate 
    * in freehand mode and takes precedence over any 
    * freehandCondition option.
    * 線、多角形、円のフリーハンドモードで動作します。これは、イ
    * ンタラクションが常にフリーハンドモードで動作させ、すべての
    * freehandCondition オプションよりも優先されます。
    * （ol3 API[説明は Stable Only のチェックを外すと表示]）
    */

   });

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

 }
}

/**
 * Handle change event.
 */

typeSelect.onchange = function() {
/** 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();