2 - ol3ex 26b - GeoJSON example 2

「geojson.js（226-ol3ex.js）」は、マップを表示するための JavaScript ファイルです。
「The GeoJSON Format Specification（geojson.org/geojson-spec.html）」の「1. Introduction」に次のようにあります。

*****
GeoJSON is a format for encoding a variety of geographic data structures.
GeoJSON は、様々な地理的データ構造を符号化するためのフォーマットです。

A GeoJSON object may represent a geometry, a feature, or a collection of features.
GeoJSONオブジェクトは、ジオメトリ、フィーチャ、またはフィーチャのコレクションを表すことができます。

GeoJSON supports the following geometry types: Point, LineString, Polygon, MultiPoint, MultiLineString, MultiPolygon, and GeometryCollection.
GeoJSONは、以下のジオメトリ·タイプをサポートしています：ポイント、ラインストリング、ポリゴン、マルチポイント、マルチストリング、マルチポリゴン、ジオメトリコレクションです。

Features in GeoJSON contain a geometry object and additional properties, and a feature collection represents a list of features.
GeoJSONにおけるフィーチャは、ジオメトリオブジェクトと追加のプロパティが含まれており、フィーチャコレクションはフィーチャのリストを表します。
*****

「226-ol3ex.js」

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: 'red', width: 1})
 /** 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）
  */
});

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

 'LineString': [new ol.style.Style({
  stroke: new ol.style.Stroke({
   color: 'green',
   width: 1
  })
 })],

 'MultiLineString': [new ol.style.Style({
  stroke: new ol.style.Stroke({
   color: 'green',
   width: 1
  })
 })],

 'MultiPoint': [new ol.style.Style({
  image: image
 })],

 'MultiPolygon': [new ol.style.Style({
  stroke: new ol.style.Stroke({
   color: 'yellow',
   width: 1
  }),
  fill: new ol.style.Fill({
  /** ol.style.Fill 
   * Set fill style for vector features.
   * ベクタフィーチャの塗りつぶしスタイルを設定。（ol3 API）
   */
   color: 'rgba(255, 255, 0, 0.1)'
  })
 })],

 'Polygon': [new ol.style.Style({
  stroke: new ol.style.Stroke({
   color: 'blue',
   lineDash: [4],
   width: 3
  }),
  fill: new ol.style.Fill({
   color: 'rgba(0, 0, 255, 0.1)'
  })
 })],

 'GeometryCollection': [new ol.style.Style({
  stroke: new ol.style.Stroke({
   color: 'magenta',
   width: 2
  }),
  fill: new ol.style.Fill({
   color: 'magenta'
  }),
  image: new ol.style.Circle({
   radius: 10,
   fill: null,
   stroke: new ol.style.Stroke({
    color: 'magenta'
   })
  })
 })],

 'Circle': [new ol.style.Style({
  stroke: new ol.style.Stroke({
   color: 'red',
   width: 2
  }),
  fill: new ol.style.Fill({
   color: 'rgba(255,0,0,0.2)'
  })
 })]
};

var styleFunction = function(feature, resolution) {
 return styles[feature.getGeometry().getType()];
 /** 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.
  * 現在の geometry name プロパティを使用して、
  * このフィーチャに関連したジオメトリを返します。
  * デフォルトでは、ジオメトリですが、setGeometryName を
  * 呼び出すことによって変更することができます。（ol3 API）
  */

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

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

 /** @type {olx.source.GeoJSONOptions} */ ({
 /** @type 
 　* 値のタイプ（型）の説明 - 式などで表示
  * ol.source.GeoJSON の値の型は、
  * olx.source.GeoJSONOptions の型を使用。
  * （@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': 'LineString',
     'coordinates': [[4e6, -2e6], [8e6, 2e6]]
    }
   },

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

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

   {
    '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]]],
      [[[-2e6, 6e6], [-2e6, 8e6], [0, 8e6], [0, 6e6]]],
      [[[1e6, 6e6], [1e6, 8e6], [3e6, 8e6], [3e6, 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]]]
      }
     ]
    }
   }
  ]
 }
}));

vectorSource.addFeature(new ol.Feature(new ol.geom.Circle([5e6, 7e6], 1e6)));
/** addFeature(feature)
 * Add a single feature to the source. If you want 
 * to add a batch of features at once, call 
 * source.addFeatures() instead.
 * ソースに一つのフィーチャを追加します。すぐにフィーチャの
 * バッチを追加したい場合は、代わりに source.addFeatures（）
 * を呼び出します。（ol3 API）
 */

/** ol.Feature
 * A vector object for geographic features with a geometry 
 * and other attribute properties, similar to the features 
 * in vector file formats like GeoJSON.
 * GeoJSONのようなベクトルファイル形式のフィーチャに類似した、ジ
 * オメトリとその他の属性プロパティを持つ地物フィーチャのための
 * ベクトルオブジェクト。（ol3 API）
 */

/** ol.geom.Circle 
 * Circle geometry. 円のジオメトリ。(ol3 API)
 */

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

 source: vectorSource,
 style: styleFunction
});

var map = new ol.Map({
 layers: [
  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）
    */
  }),
  vectorLayer
 ],
 target: 'map',

 controls: ol.control.defaults({
 /** controls
  * Controls initially added to the map. 
  * If not specified, ol.control.defaults() is used.
  * 初期設定で、マップに追加されたコントロール。
  * 明示されていなければ、ol.control.defaults() が使用されます。
  * （ol3 API）
  */
 /** ol.control.defaults()
  * デフォルトでは、マップに含まコントロールのセット。
  * 特に設定しない限り、これは、以下の各コントロールの
  * インスタンスを含むコレクションを返します。（ol3 API）
  * ol.control.Zoom, ol.control.Rotate, ol.control.Attribution
  */

  attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
  /** @type 
   * 値のタイプ（型）の説明 - 式などで表示
   * attributionOptions の値の型は、
   * olx.control.AttributionOptions の型を使用。
   * （@use JSDoc[http://usejsdoc.org/]より）
   */

   collapsible: false // 折りたたみ
  })
 }),
 view: new ol.View({
  center: [0, 0],
  zoom: 2
 })
});