2 - ol3ex 34b - Earthquakes heatmap 2

「heatmap-earthquakes.js（234-ol3ex.js）」は、マップを表示するための JavaScript ファイルです。
2012_Earthquakes_Mag5.kml の内容は、次のようになっています。
「2012_Earthquakes_Mag5.kml」

⁢<?xml version="1.0" encoding="UTF-8"?>
⁢<kml xmlns="http://earth.google.com/kml/2.0" xmlns:atom="http://www.w3.org/2005/Atom">
 <⁢Document>
  ⁢<name>2012 Earthquakes, Magnitude 5⁢</name>
   <atom:author>
    ⁢<atom:name>U.S. Geological Survey<⁢/atom:name>
   ⁢</atom:author>
   <⁢atom:link href="http://earthquake.usgs.gov" />

   <⁢Folder>
    <name>Magnitude 5<⁢/name>
    ⁢<Placemark id="2012 Jan 15 13:40:16.40 UTC">
     ⁢<name>M 5.9 - 2012 Jan 15, SOUTH SHETLAND ISLANDS<⁢</name>
     ⁢<magnitude>5.9⁢</magnitude>
     ⁢<Point>
      ⁢<coordinates>-56.072,-60.975,0⁢</coordinates>
     <⁢/Point>
    <⁢/Placemark>

    <⁢Placemark id="2012 Jan 19 06:48:48.75 UTC">

---

「234-ol3ex.js」

var vector = new ol.layer.Heatmap({
/** ol.layer.Heatmap
 * Layer for rendering vector data as a heatmap. 
 * Note that any property set in the options is set 
 * as a ol.Object property on the layer object; 
 * for example, setting title: 'My Title' in the options 
 * means that title is observable, and has get/set accessors.
 * ヒートマップとしてベクトルデータをレンダリングするためのレイ
 * ヤ。オプションで設定したすべてのプロパティは、レイヤオブジェ
 * クトで ol.Object プロパティとして設定されていることに注意し
 * てください。たとえば、オプションでタイトル「My Title」を設
 * 定することは、タイトルが識別され、アクセサ（アクス機構）を得
 * るまたは設定することを意味します。（0l3 API）
 */

 source: new ol.source.KML({
 /** ol.source.KML 
  * Static vector source in KML format
  * KML フォーマットの静的ベクタソース（0l3 API）
  */

  extractStyles: false,
  projection: 'EPSG:3857',
  // url: 'data/kml/2012_Earthquakes_Mag5.kml'
  url: 'v3.0.0/examples/data/kml/2012_Earthquakes_Mag5.kml'
  // 修正
 }),
 radius: 5
});

vector.getSource().on('addfeature', function(event) {
/** 2012_Earthquakes_Mag5.kml stores the magnitude of each 
 * earthquake in a standards-violating <magnitude> 
 * tag in each Placemark.  We extract it from the 
 * Placemark's name instead.
 * 2012_Earthquakes_Mag5.kml は、それぞれの Placemark に標準
 * 規格に違反する <magnitude> タグに各地震のマグニチュードを
 * 格納します。私たちは、代わりに Placemark 名からそれを抽出しま
 * す。
 */

/** getSource()
 * Return: Source（al3 API）
 */

/** on()
 * Listen for a certain type of event.
 * あるイベントの型をリッスンします。（al3 API）
 */

 var name = event.feature.get('name');
 /** event
  * Instance of an Event that is available to an event 
  * handler.
  * イベントハンドラで使用できるイベントのインスタンス。
  */

  /** get(key)
  * Gets a value.
  * （ol3 API[説明は Stable Only のチェックを外すと表示]）
  */

 var magnitude = parseFloat(name.substr(2));
 /** parseFloat()
  * 引数として与えられた文字列を解析し、浮動小数点数を返します。
  * （MDN[https://developer.mozilla.org/ja/docs/Web/
  * JavaScript/Reference/Global_Objects/parseFloat]）
  */ 
 /** String.prototype.substr()
  * The substr() method returns the characters in a 
  * string beginning at the specified location 
  * through the specified number of characters.
  * substr（）メソッドは、文字列内の指定した位置から始まり、
  * 指定した文字数のまでの文字を返します。
  * （MDN[https://developer.mozilla.org/en-US/docs/Web/
  * JavaScript/Reference/Global_Objects/String/substr]）
  */

 event.feature.set('weight', magnitude - 5);
 /** set(key, value)
  * Sets a value.
  * （ol3 API[説明は Stable Only のチェックを外すと表示]）
  */
});

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.Stamen({
 /** ol.source.Stamen
  * Layer source for the Stamen tile server.
  * Stamen タイルサーバのレイヤソース。（ol3 API）
  * （2 - ol3ex 24b - Stamen example 2 参照）
  */
  layer: 'toner'
 })
});

var map = new ol.Map({
 layers: [raster, vector],
 target: 'map',
 view: new ol.View({
  center: [0, 0],
  zoom: 2
 })
});