2 - ol3.10ex 132b - turf.js example 2

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

「2132-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);
 /** readFeatures(source, opt_options)
  * Read all features from a GeoJSON source.
  * Works with both Feature and FeatureCollection 
  * sources. 
  * GeoJSON ソースからすべてのフィーチャを読み取ります。
  * フィーチャとフィーチャコレクションソースの両方で動作し
  * ます。
  * （ol3 API）
  */

 var street = features[0];

 // convert to a turf.js feature
 // turf.js フィーチャへ変換

 var turfLine = format.writeFeatureObject(street);
 /** writeFeatureObject(feature, opt_options)
  * Encode a feature as a GeoJSON Feature object.
  * フィーチャを GeoJSON フィーチャオブジェクトとしてエン
  * コードします。（ol3 API）
  */

 // show a marker every 200 meters
 // 200 メータごとにマーカを表示
 var distance = 0.2;

 // get the line length in kilometers
 // キロメートル（km）単位で線の長さを取得

 var length = turf.lineDistance(turfLine, 'kilometers');
 /** turf.lineDistance
  * Takes a line and measures its length in the specified 
  * units.
  * 線を受け取り、指定された単位で長さを測定します。
  * （turf API）
  */

 for (var i = 1; i <= length / distance; i++) {

  var turfPoint = turf.along(turfLine, i * distance, 'kilometers');
  /** turf.along
   * Takes a line and returns a point at a specified 
   * distance along the line.
   * 線を受け取り、線にそって指定された間隔で天を返します。
   * （turf API）
   */

  // convert the generated point to a OpenLayers feature
  // 作成された点を OpenLayers フィーチャへ変換

  var marker = format.readFeature(turfPoint);
  /** readFeature(source, opt_options)
   * Read a feature from a GeoJSON Feature source. Only 
   * works for Feature, use readFeatures to read 
   * FeatureCollection source.
   * GeoJSON フィーチャソースからフィーチャを読み取ります。フィー
   * チャに対してだけ動作し、フィーチャコレクションソースを読み込
   * むためには readFeatures を使用します。（ol3 API）
  */

  marker.getGeometry().transform('EPSG:4326', 'EPSG:3857');
  /** 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）
   */

  /** transform(source, destination)
   * Transform each coordinate of the geometry from one 
   * coordinate reference system to another. The 
   * geometry is modified in place. For example, a line 
   * will be transformed to a line and a circle to a 
   * circle. If you do not want the geometry modified in 
   * place, first clone() it and then use this function 
   * on the clone.
    * ある座標参照系から別のものへジオメトリの各座標を変換。ジ
   * オメトリは、所定の位置に修正されます。例えば、ラインはラ
   * インに、円は円に変換されます。ジオメトリを所定の位置に修
   * 正したくない場合、最初にそれを clone() し、それからク
   * ローンでこの関数を使用します。（ol3 API）
   */

  source.addFeature(marker);
  /** addFeature(feature)
   * Add a single feature to the source. If you want to add 
   * batch of features at once, call source.addFeatures() 
   * a instead.
   * 単一フィーチャをソースに追加します。一度にフィーチャのバッチ
   * を追加したいときは、替りに source.addFeatures() を呼び出し
   * ます。（ol3 API）
   */

 }

 street.getGeometry().transform('EPSG:4326', 'EPSG:3857');
 source.addFeature(street);
});

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.980366, 37.526540]),
  /** ol.proj.fromLonLat(coordinate, opt_projection)
   * Transforms a coordinate from longitude/latitude to a 
   * different projection.
   * 緯度/経度座標から異なる投影に変換します。（ol3 API）
   */

  zoom: 15
 })
});