2 - ol3.10ex 131b - JSTS example 2

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

「2131-ol3ex.js」

var source = new ol.source.Vector();
/** ol.source.Vector
 * Provides a source of features for vector layers.
 * ベクタレイヤのフィーチャのソースを用意します。（ol3 API）
 */
// $.ajax('data/geojson/roads-seoul.geojson').then(function(response) {
$.ajax('v3.10.1/examples/data/geojson/roads-seoul.geojson').then(function(response) {
/** jQuery.ajax( url [, settings ] )
 * Perform an asynchronous HTTP (Ajax) request.
 * 非同期HTTP（Ajax）要求を実行します。
 * （jQuery[http://api.jquery.com/jQuery.ajax/]）
 */

 var format = new ol.format.GeoJSON();
 /** ol.format.GeoJSON 
  * Feature format for reading and writing data in the 
  * GeoJSON format.
  * GeoJSON フォーマットのデータを読み書きするためのフィーチャ
  * フォーマット。（ol3 API）
  */

 var features = format.readFeatures(response,
  {featureProjection: 'EPSG:3857'});
 /** readFeatures(source, opt_options)
  * Read all features from a GeoJSON source.
  * Works with both Feature and FeatureCollection 
  * sources.
  * GeoJSON ソースからすべてのフィーチャを読み取ります。
  * フィーチャとフィーチャコレクションソースの両方で動作し
  * ます。
  * （ol3 API）
  */

 var parser = new jsts.io.olParser();
 /** jsts.io.olParser()
  * 
  */

 for (var i = 0; i < features.length; i++) {
  var feature = features[i];

  // convert the OpenLayers geometry to a JSTS geometry
  // OpenLayers ジオメトリを JSTS ジオメトリへ変換

  var jstsGeom = parser.read(feature.getGeometry());
  /** read()
   *  
   */

  /** getGeometry()
   * Get the feature's default geometry. A feature may have 
   * any number of named geometries. The "default" geometry 
   * (the one that is rendered by default) is set when 
   * calling ol.Feature#setGeometry.
   * フィーチャのデフォルトのジオメトリを取得します。フィーチャ
   * は、任意の数の指定のジオメトリのを有することができます。 
   * 「デフォルト」のジオメトリ（デフォルトでレンダリングされる
   * もの）が ol.Feature＃setGeometry を呼び出すときに設定され
   * ています。（ol3 API）
   */

  // create a buffer of 40 meters around each line
  // 各線の周囲 40m のバッファを作成

  var buffered = jstsGeom.buffer(40);
  /** buffer()
   * 
   */

  // convert back from JSTS and replace the geometry on the 
  // feature
  // JSTS から変換し、フィーチャのジオメトリを置換する

  feature.setGeometry(parser.write(buffered));
  /** setGeometry()
   * Set the geometry for this feature. This will 
   * update the property with the current name 
   * returned by ol.Feature#getGeometryName. 
   * このフィーチャのジオメトリを設定します。これは、
   * ol.Feature#getGeometryName によって返された、現在の
   * 名前とともにプロパティを更新します。
   * （ol3 API）
   */

  /** write() 
   *  
   */

 }

 source.addFeatures(features);
 /** addFeatures(features)
  * Add a batch of features to the source.
  * フィーチャのバッチをソースに追加します。（ol3 API）
  */

});

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

 source: source
});

var rasterLayer = 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({
 /** ol.source.MapQuest
  * Layer source for the MapQuest tile server.
  * MapQuest タイルサーバのレイヤソース。（ol3 API
  * 2 - ol3ex 23b - MapQuest example 2 参照）
  */

  layer: 'osm'
 })
});

var map = new ol.Map({
 layers: [rasterLayer, vectorLayer],
 target: document.getElementById('map'),
 view: new ol.View({

  center: ol.proj.fromLonLat([126.979293, 37.528787]),
  /** ol.proj.fromLonLat(coordinate, opt_projection)
   * Transforms a coordinate from longitude/latitude to a 
   * different projection.
   * 緯度/経度座標から異なる投影に変換します。（ol3 API）
   */

  zoom: 15
 })
});