2 - ol3.19ex 161b - Draw Shapes 2

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

「2161-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') {
  var geometryFunction;
  if (value === 'Square') {
   value = 'Circle';

   geometryFunction = ol.interaction.Draw.createRegularPolygon(4);
   /** ol.interaction.Draw.createRegularPolygon(opt_sides, opt_angle)
    * Create a geometryFunction for type: 'Circle' that 
    * will create a regular polygon with a user specified 
    * number of sides and start angle instead of an 
    * ol.geom.Circle geometry.
    * ol.geom.Circle ジオメトリの代わりにユーザーが指定した
    * 辺の数の正多角形を作成し、角度を開始しする
    * 「type: 'Circle'」の geometryFunction を作成します。
    * （ol3 API[説明は Stable Only のチェックを外すと表示]）
    */

  } else if (value === 'Box') {
   value = 'Circle';

   geometryFunction = ol.interaction.Draw.createBox();
   /** ol.interaction.Draw.createBox()
    * Create a geometryFunction that will create a 
    * box-shaped polygon (aligned with the coordinate 
    *  system axes). Use this with the draw interaction 
    * and type: 'Circle' to return a box instead of a 
    * circle geometry.
    * （座標系の軸で位置合わせされる）ボックス状のポリゴンで 
    * geometryFunction を作成します。サークルジオメトリの替
    * りにボックスを返すために、ドローインタラクションと
    * 「type: 'Circle'」して使用してください。
    * （ol3 API[説明は Stable Only のチェックを外すと表示]）
    */

  } else if (value === 'Star') {
   value = 'Circle';
   geometryFunction = function(coordinates, geometry) {
    if (!geometry) {

     geometry = new ol.geom.Polygon(null);
     /** ol.geom.Polygon
      * Polygon geometry.（ol3 API）
      */

    }
    var center = coordinates[0];
    var last = coordinates[1];
    var dx = center[0] - last[0];
    var dy = center[1] - last[1];

    var radius = Math.sqrt(dx * dx + dy * dy);
    /** Math.sqrt()
      * 引数として与えた数の平方根を返します。
      * （MDN[https://developer.mozilla.org/ja/docs/Web/
      * JavaScript/Reference/Global_Objects/Math/sqrt]）
      */

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

    var newCoordinates = [];
    var numPoints = 12;
    for (var i = 0; i < numPoints; ++i) {

     var angle = rotation + i * 2 * Math.PI / numPoints;
     /** Math.PI()
       * 円周率。約 3.14159 です。
      * （MDN[https://developer.mozilla.org/ja/docs/Web
      * /JavaScript/Reference/Global_Objects/Math/PI]）
      */

     var fraction = i % 2 === 0 ? 1 : 0.5;
     /** %（剰余）
      * 剰余演算子は1つ目の数値を2つ目の数値で割った余りを返し
      * ます。
      * （MDN[https://developer.mozilla.org/ja/docs/Web/
      * JavaScript/Reference/Operators/
      * Arithmetic_Operators#Remainder]）
      */

     /** ===（厳密に等しい）
      * 厳密等価演算子はオペランド同士が、型を変換することなく
      * 厳密に等しいならば真を返します。
      * （MDN[https://developer.mozilla.org/ja/docs/Web/
      * JavaScript/Reference/Operators/
      * Comparison_Operators#Identity]）
      */

     var offsetX = radius * fraction * Math.cos(angle);
     /** Math.cos()
      * 引数として与えた数のコサインを返します。
      * （MDN[https://developer.mozilla.org/ja/docs/Web/
      * JavaScript/Reference/Global_Objects/Math/cos]）
      */

     var offsetY = radius * fraction * Math.sin(angle);
     /** Math.sin()
      * 引数として与えた数のサイン（正弦）を返します。
      * （MDN[https://developer.mozilla.org/ja/docs/Web/
      * JavaScript/Reference/Global_Objects/Math/sin]）
      */

     newCoordinates.push([center[0] + offsetX, center[1] + offsetY]);
     /** push(elem)
      * Insert the provided element at the end of the 
      * collection.
      * コレクションの最後に供給されたエレメントに挿入します。
      * Name: elem, Type: T, Description: Element
      * （ol3 API）
      */

    }

    newCoordinates.push(newCoordinates[0].slice());
    /** Array.prototype.slice()
     * The slice() method returns a shallow copy of a 
     * portionof an array into a new array object.
     * slice()メソッドは、配列の一部の簡易コピーを新しい配列オ
     * ブジェクトに返します。
     * （MDN[https://developer.mozilla.org/ja/docs/Web/
     * JavaScript/Reference/Global_Objects/Array/slice]）
     */

    geometry.setCoordinates([newCoordinates]);
    /** setCoordinates()
     * setCoordinates(coordinates) [Type: ol.Coordinate, 
     * Description: Coordinates]（ol3 API）
     */

    return geometry;
   };
  }

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

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

   geometryFunction: geometryFunction
   /** geometryFunction
    * Function that is called when a geometry's coordinates 
    * are updated.
    * ジオメトリの座標が更新されるとき、予備だ荒れる関数です。
    * （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();