「2144-ol3ex.js」
var styleCache = {};
var styleFunction = function(feature, resolution) {
// 2012_Earthquakes_Mag5.kml stores the magnitude // of each earthquake in a standards-violating //tag in each Placemark. We extract // it from the Placemark's name instead. // 2012_Earthquakes_Mag5.kml は、各 Placemark の // 標準規格に違反する に各 earthqu8ake の // magnitude を格納します。代わりにそれを Placemark の // name から抽出します。
var name = feature.get('name');
/** get(key)
* Gets a value.（ol3 API）
*/
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]） */
var size = parseInt(10 + 40 * (magnitude - 5), 10); /** parseInt(string, radix) * str: 文字列, radix: 基数（進法） * 文字列の引数をパースし、指定された基数の整数を返します。 * （MDN[https://developer.mozilla.org/ja/docs/Web/ * JavaScript/Reference/Global_Objects/parseInt]） */
var style = styleCache[size];
if (!style) {
var canvas =
/** @type {HTMLCanvasElement} */ (document.createElement('canvas'));
/** 「@type」
* 値のタイプ（型）の説明 - 式などで表示
* （@use JSDoc[http://usejsdoc.org/]より）
*/
var render = ol.render.toContext(
/** ol.render.toContext(context, opt_options)
* Binds a Canvas Immediate API to a canvas context,
* to allow drawing geometries to the context's
* canvas.
* The units for geometry coordinates are css pixels
* relative to the top left corner of the canvas
* element.
* Note that ol.render.canvas.Immediate#drawAsync
* and ol.render.canvas.Immediate#drawFeature
* cannot be used.
* コンテキストのキャンバス（canvas）にジオメトリを描画でき
* るように、Canvas Immediate API をキャンバスコンテキス
* ト（canvas context）にバインドします。
* ジオメトリの座標の単位は canvas 要素の左上隅からの相対
* css ピクセルです。
* ol.render.canvas.Immediate#drawAsynと
* ol.render.canvas.Immediate#drawFeature は使用出来
* ないことに注意してください。
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
/** @type {CanvasRenderingContext2D} */ (canvas.getContext('2d')),
/** HTMLCanvasElement.getContext()
* The HTMLCanvasElement.getContext() method returns a
* drawing context on the canvas, or null if the
* context identifier is not supported.
* HTMLCanvasElement.getContext（）メソッドは、キャンバ
* ス上の描画コンテキストを返すか、または コンテキスト識別
* 子がサポートされていない場合、null を返します。
* contextType Is a DOMString containing the context
* identifier defining the drawing context associated
* to the canvas.
* "2d", leading to the creation of a
* CanvasRenderingContext2D object representing a
* two-dimensional rendering context.
* contextTypeは canvas に関連する描画コンテキストを定義
* するコンテキスト識別子を含む DOMString です。
* 「2D」、二次元のレンダリングコンテキストを表す
* CanvasRenderingContext2D オブジェクトの作成につなが
* ります。
* （MDN[https://developer.mozilla.org/en-US/docs/Web/
* API/HTMLCanvasElement/getContext]）
*/
{size: [size + 2, size + 2], pixelRatio: size / 10});
/** size:
* Desired size of the canvas in css pixels. When
* provided, both canvas and css size will be set
* according to the pixelRatio. If not provided, the
* current canvas and css sizes will not be altered.
* css ピクセル単位の canvas の希望のサイズ。提供される場
* 合、canvas とcss サイズ両方とも画素比率に応じて設定され
* ます。提供されていない場合は、現在の canvas と css のサ
* イズは変更されません。
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
/** pixelRatio:
* Pixel ratio (canvas pixel to css pixel ratio) for
* the canvas. Default is the detected device pixel
* ratio.
* canvas 用のピクセル比（css ピクセル比のためのcanvas
* ピクセル）。デフォルトは、検出されたデバイスピクセル比
* です。
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
render.setFillStrokeStyle(
/** setFillStrokeStyle(fillStyle, strokeStyle)
* Set the fill and stroke style for subsequent draw
* operations. To clear either fill or stroke styles,
* pass null for the appropriate parameter.
* 後の描画操作のための塗りと線のスタイルを設定します。塗り
* または線のスタイルのいずれかをクリアするために、適切なパ
* ラメータに null を渡します。
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
new ol.style.Fill({ color: 'rgba(255, 153, 0, 0.4)' }),
/** ol.style.Fill
* Set fill style for vector features.
* ベクタフィーチャの塗りつぶしスタイルを設定。
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
new ol.style.Stroke({ color: 'rgba(255, 204, 0, 0.2)', 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[説明は Stable Only のチェックを外すと表示]）
*/
render.drawPolygonGeometry(new ol.geom.Polygon(
/** drawPolygonGeometry(polygonGeometry)
* Render a Polygon geometry into the canvas.
* Rendering is immediate and uses the current style.
* キャンバス（canvas）にポリゴンジオメトリ（Polygon
* geometry）をレンダリングします。レンダリングは即時であ
* り、現在のスタイルを使用します。
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
/** ol.geom.Polygon
* Polygon geometry.（ol3 API）
*/
[[[0, 0], [4, 2], [6, 0], [10, 5], [6, 3], [4, 5], [0, 0]]]));
style = new ol.style.Style({
/** ol.style.Style
* Container for vector feature rendering styles. Any
* changes made to the style or its children through
* set*() methods will not take effect until the feature
* or layer that uses the style is re-rendered.
* ベクタフィーチャがスタイルを描画するためのコンテナ。
* スタイルや set*() メソッドを通じてその子に加えられた変
* 更は、スタイルを使用するフィーチャまたはレイヤが再レン
* ダリングされるまで有効になりません。
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
image: new ol.style.Icon({
/** ol.style.Icon
* Set icon style for vector features.
* ベクタフィーチャのアイコンスタイルを設定します。
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
img: canvas,
/** img:
* Image object for the icon. If the src option is
* not provided then the provided image must already
* be loaded. And in that case, it is required to
* provide the size of the image, with the imgSize
* option.
* アイコンの画像（image）オブジェクト。 src オプション
* が提供されていない場合では、提供される画像は、すでに
* ロードされている必要があります。その場合には、imgSize
* オプションを使用して、画像の大きさを提供するために必
* 要です。
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
imgSize: [canvas.width, canvas.height],
/** imgSize:
* Image size in pixel. Only required if img is set
* and src is not.
* 画素単位の画像サイズ。img が設定され、src がされてな
* い場合にのみ必要です。
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
rotation: 1.2
/**rotation:
* Rotation in radians (positive rotation clockwise).
* Default is 0.
* ラジアン単位の回転（時計回り）。デフォルトは、0。
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
}) }); styleCache[size] = style; } return style; };
var vector = new ol.layer.Vector({
/** ol.layer.Vector
* Vector data that is rendered client-side.
* クライアント側で描画されたベクタデータ。（ol3 API）
*/
source: new ol.source.Vector({
/** ol.source.Vector
* Provides a source of features for vector layers.
* Vector features provided by this source are
* suitable for editing. See ol.source.VectorTile for
* vector data that is optimized for rendering.
* ベクタレイヤのフィーチャのソースを用意します。このソース
* が提供するベクタフィーチャは、編集に適しています。レンダ
* リングのために最適化されたベクタデータの
* ol.source.VectorTile を参照してください。（ol3 API）
*/
// url: 'data/kml/2012_Earthquakes_Mag5.kml', url: 'v3.12.1/examples/data/kml/2012_Earthquakes_Mag5.kml', /** url: * Setting this option instructs the source to use an * XHR loader (see ol.featureloader.xhr). Use a * string and an ol.loadingstrategy.all for a one-off * download of all features from the given URL. Use a * ol.FeatureUrlFunction to generate the url with * other loading strategies. Requires format to be * set as well. When default XHR feature loader is * provided, the features will be transformed from * the data projection to the view projection during * parsing. If your remote data source does not * advertise its projection properly, this * transformation will be incorrect. For some formats, * the default projection (usually EPSG:4326) can be * overridden by setting the defaultDataProjection * constructor option on the format. * このオプションを設定することは、XHR ローダーを使用する * ソースを指示します（ol.featureloader.xhr 参照）。指 * 定された URL からすべてのフィーチャの一回限りのダウン * ロードのために文字列とol.loadingstrategy.all を使用 * してください。他のロードストラテジと URL を生成するため * に ol.FeatureURLFunction を使用してください。フォー * マットも同様に設定する必要があります。デフォルトの XHR * フィーチャローダが提供される場合、フィーチャは解析中に * データ投影からビュー投影へ変換されます。リモート・データ * ・ソースが適切に投影をアドバタイズしていない場合、この変 * 換は不正確になります。いくつかのフォーマットについては、 * デフォルトの投影（通常はEPSG：4326）は、フォーマットの * defaultDataProjection コンストラクタオプションを設 * 定することで上書きすることができます。 * （ol3 API[説明は Stable Only のチェックを外すと表示]） */
format: new ol.format.KML({
/** format:
* The feature format used by the XHR feature loader
* when url is set. Required if url is set, otherwise
* ignored. Default is undefined.
* URL が設定されている場合に XHR フィーチャローダによって
* 使用されるフィーチャフォーマット。 URLが設定されている場
* 合は必要です、それ以外の場合は無視されます。デフォルトは
* 未定義です。
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
/** ol.format.KML * Feature format for reading and writing data * in the KML format. * KML フォーマットでデータを読み書きするためのフィー * チャのフォーマット。（ol3 API） */
extractStyles: false
/** extractStyles
* Extract styles from the KML. Default is true.
* KML からの外部スタイル。デフォルトはあ、true。
* （ol3 API）
*/
}) }),
style: styleFunction /** style: * Layer style. See ol.style for default style which * will be used if this is not defined. * レイヤースタイル。これが定義されていない場合に使用される * デフォルトのスタイルに対する ol.style を参照してくださ * い。（ol3 API） */
});
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 1 参照）
*/
layer: 'toner' }) });
var map = new ol.Map({
layers: [raster, vector],
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
