2 - ol3.1ex 53b - Modify features test 2

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

「253-ol3ex.js」

var styleFunction = (function() {
 /* jshint -W069 */
/* 予約語でないプロパティ名のとき 、[]（角括弧、ブラケット）
 * 内の文字列リテラルを使用してプロパティにアクセスする試み
 * を検出したとき投げられる警告を発行しないように JSHint に
 * 伝えることを意味します。
 * （['{a}'] is better written in dot notation[https://
 * jslinterrors.com/a-is-better-written-in-dot-notation]）
 */

 var styles = {};

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

  radius: 5,
  fill: null,

  stroke: new ol.style.Stroke({color: 'orange', width: 2})
  /** 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）
   */

 });

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

 styles['Polygon'] = [new ol.style.Style({
  stroke: new ol.style.Stroke({
   color: 'blue',
   width: 3
  }),

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

   color: 'rgba(0, 0, 255, 0.1)'
  })
 })];

 styles['MultiLinestring'] = [new ol.style.Style({
  stroke: new ol.style.Stroke({
   color: 'green',
   width: 3
  })
 })];

 styles['MultiPolygon'] = [new ol.style.Style({
  stroke: new ol.style.Stroke({
   color: 'yellow',
   width: 1
  }),
  fill: new ol.style.Fill({
   color: 'rgba(255, 255, 0, 0.1)'
  })
 })];

 styles['default'] = [new ol.style.Style({
  stroke: new ol.style.Stroke({
   color: 'red',
   width: 3
  }),
  fill: new ol.style.Fill({
   color: 'rgba(255, 0, 0, 0.1)'
  }),
  image: image
 })];

 return function(feature, resolution) {

  return styles[feature.getGeometry().getType()] || styles['default'];
  /** getGeometry()
   * Returns the Geometry associated with this feature 
   * using the current geometry name property. By  
   * default,this is geometry but it may be changed 
   * by calling setGeometryName.
   * 現在のジオメトリネームプロパティを使用して、このフィーチャ
   * に関連したジオメトリを返します。デフォルトでは、ジオメトリ
   * ですが、setGeometryName を呼び出すことによって変更するこ
   * とができます。（ol3 API）
   */

  /** getType()
   * Get the type of this geometry. 
   * ジオメトリの型を取得。（ol3 API）
   */

 };
 /* jshint +W069 */
})();

var source = new ol.source.GeoJSON(
/** ol.source.GeoJSON 
 * Static vector source in GeoJSON format
 * GeoJSON フォーマットの静的ベクタソース。（ol3 API）
 */

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

 object: {
  'type': 'FeatureCollection',
  'crs': {
   'type': 'name',
   'properties': {
    'name': 'EPSG:3857'
   }
  },
  'features': [
   {
    'type': 'Feature',
    'geometry': {
     'type': 'Point',
     'coordinates': [0, 0]
    }
   },

   {
    'type': 'Feature',
    'geometry': {
    'type': 'MultiPoint',
    'coordinates': [[-2e6, 0], [0, -2e6]]
    }
   },

   {
    'type': 'Feature',
    'geometry': {
     'type': 'LineString',
     'coordinates': [[4e6, -2e6], [8e6, 2e6], [9e6, 2e6]]
    }
   },

   {
    'type': 'Feature',
    'geometry': {
     'type': 'LineString',
     'coordinates': [[4e6, -2e6], [8e6, 2e6], [8e6, 3e6]]
    }
   },

   {
    'type': 'Feature',
    'geometry': {
     'type': 'Polygon',
     'coordinates': [[[-5e6, -1e6], [-4e6, 1e6],
      [-3e6, -1e6], [-5e6, -1e6]], [[-4.5e6, -0.5e6],
      [-3.5e6, -0.5e6], [-4e6, 0.5e6], [-4.5e6, -0.5e6]]]
    }
   },

   {
    'type': 'Feature',
    'geometry': {
     'type': 'MultiLineString',
     'coordinates': [
      [[-1e6, -7.5e5], [-1e6, 7.5e5]],
      [[1e6, -7.5e5], [1e6, 7.5e5]],
      [[-7.5e5, -1e6], [7.5e5, -1e6]],
      [[-7.5e5, 1e6], [7.5e5, 1e6]]
     ]
    }
   },

   {
    'type': 'Feature',
    'geometry': {
     'type': 'MultiPolygon',
     'coordinates': [
      [[[-5e6, 6e6], [-5e6, 8e6], [-3e6, 8e6],
       [-3e6, 6e6], [-5e6, 6e6]]],
      [[[-2e6, 6e6], [-2e6, 8e6], [0, 8e6],
       [0, 6e6], [-2e6, 6e6]]],
      [[[1e6, 6e6], [1e6, 8e6], [3e6, 8e6],
       [3e6, 6e6], [1e6, 6e6]]]
     ]
    }
   },

   {
    'type': 'Feature',
    'geometry': {
     'type': 'GeometryCollection',
     'geometries': [
      {
       'type': 'LineString',
       'coordinates': [[-5e6, -5e6], [0, -5e6]]
      },
      {
       'type': 'Point',
       'coordinates': [4e6, -5e6]
      },
      {
       'type': 'Polygon',
       'coordinates': [
        [[1e6, -6e6], [2e6, -4e6], [3e6, -6e6], [1e6, -6e6]]
       ]
      }
     ]
    }
   }
  ]
 }
}));

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

 source: source,
 style: styleFunction
});

var overlayStyle = (function() {
 /* jshint -W069 */
 var styles = {};
 styles['Polygon'] = [
  new ol.style.Style({
   fill: new ol.style.Fill({
    color: [255, 255, 255, 0.5]
   })
  }),
  new ol.style.Style({
   stroke: new ol.style.Stroke({
    color: [255, 255, 255, 1],
    width: 5
   })
  }),
  new ol.style.Style({
   stroke: new ol.style.Stroke({
    color: [0, 153, 255, 1],
    width: 3
   })
  })
 ];
 styles['MultiPolygon'] = styles['Polygon'];

pre style="overflow: auto;"> styles['LineString'] = [   new ol.style.Style({    stroke: new ol.style.Stroke({     color: [255, 255, 255, 1],     width: 5    })   }),   new ol.style.Style({    stroke: new ol.style.Stroke({     color: [0, 153, 255, 1],     width: 3    })   })  ];  styles['MultiLineString'] = styles['LineString'];

 styles['Point'] = [
  new ol.style.Style({
   image: new ol.style.Circle({
    radius: 7,
    fill: new ol.style.Fill({
     color: [0, 153, 255, 1]
    }),
    stroke: new ol.style.Stroke({
     color: [255, 255, 255, 0.75],
     width: 1.5
    })
   }),
   zIndex: 100000
  })
 ];
 styles['MultiPoint'] = styles['Point'];

 styles['GeometryCollection'] = styles['Polygon'].concat(styles['Point']);

 return function(feature, resolution) {
  return styles[feature.getGeometry().getType()];
 };
 /* jshint +W069 */
})();

var select = new ol.interaction.Select({
/** ol.interaction.Select 
 * Handles selection of vector data. A 
 * ol.FeatureOverlay is maintained internally to 
 * store the selected feature(s). Which features 
 * are selected is determined by the condition 
 * option, and optionally the toggle or add/remove 
 * options.
 * ベクタデータの選択を処理します。 ol.FeatureOverlay 
 * は、選択したフィーチャを格納するために内部的に維持され
 * ています。選択されているどのフィーチャでも条件オプショ
 * ン、そして部分的にトグルまたは追加/削除オプションによっ
 * て決定されます。（ol3 API）
 */

 style: overlayStyle
});

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

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

 style: overlayStyle
});

var map = new ol.Map({
 interactions: ol.interaction.defaults().extend([select, modify]),
 /** ol.control.defaults()
  * デフォルトでは、マップに含まコントロールのセット。
  * 特に設定しない限り、これは、以下の各コントロールの
  * インスタンスを含むコレクションを返します。(ol3 API）
  * ol.control.Zoom, ol.control.Rotate, ol.control.Attribution
  */

 layers: [layer],
 target: 'map',
 view: new ol.View({
  center: [0, 1000000],
  zoom: 2
 })
});