「2172-ol4ex.js」
// Style for labels
function setStyle(context) {
context.font = '12px Calibri,sans-serif'; /** CanvasRenderingContext2D.font * The CanvasRenderingContext2D.font property of the * Canvas 2D API specifies the current text style being * used when drawing text. This string uses the same * syntax as the CSS font specifier. The default font * is 10px sans-serif. * Canvas 2D API の CanvasRenderingContext2D.font * プロパティは、テキストを描画するときに使用される現在のテキ * ストスタイルを指定します。 この文字列は、CSSフォント記述子 * と同じ構文を使用します。 デフォルトのフォントは 10px * sans-serif です。 * （MDN[https://developer.mozilla.org/en-US/docs/Web/ * API/CanvasRenderingContext2D/font]） */
context.fillStyle = '#000'; /** CanvasRenderingContext2D.fillStyle * The CanvasRenderingContext2D.fillStyle property of * the Canvas 2D API specifies the color or style to * use inside shapes. The default is #000 (black). * Canvas 2D API の CanvasRenderingContext2D.fillStyle * プロパティは、図形の内側に使用する色やスタイルを指定します。 * デフォルトでは、＃000（黒）です。 * （MDN[https://developer.mozilla.org/en-US/docs/Web/ * API/CanvasRenderingContext2D/fillStyle]） */
context.strokeStyle = '#fff'; /** CanvasRenderingContext2D.strokeStyle * The CanvasRenderingContext2D.strokeStyle property * of the Canvas 2D API specifies the color or style * to use for the lines around shapes. The default is * #000 (black). * Canvas 2D API の * CanvasRenderingContext2D.strokeStyle プロパティは、 * 形状の周りの線に使用する色またはスタイルを指定します。 デ * フォルトは＃000（黒）です。 * （MDN[https://developer.mozilla.org/en-US/docs/Web/ * API/CanvasRenderingContext2D/strokeStyle]） */
context.lineWidth = 3; /** CanvasRenderingContext2D.lineWidth * The CanvasRenderingContext2D.lineWidth property of * the Canvas 2D API sets the thickness of lines in * space units. When getting, it returns the current * value (1.0 by default). When setting, zero, negative, * Infinity and NaN values are ignored; otherwise the * current value is set to the new value. * Canvas 2D API の CanvasRenderingContext2D.lineWidth * プロパティは、スペース単位で線の太さを設定します。 取得する * と、現在の値（デフォルトでは 1.0）を返します。 ０、負の値を * 設定すると、Infinity 値と NaN 値は無視されます。それ以外 * の場合は、現在の値が新しい値に設定されます。 * （MDN[https://developer.mozilla.org/en-US/docs/Web/ * API/CanvasRenderingContext2D/lineWidth]） */
context.textBaseline = 'hanging'; /** CanvasRenderingContext2D.textBaseline * The CanvasRenderingContext2D.textBaseline property * of the Canvas 2D API specifies the current text * baseline being used when drawing text. * Canvas 2D API の * CanvasRenderingContext2D.textBaseline プロパティ * は、テキストを描画するとき使用される現在のテキストデフォル * トでは、＃000（黒）です。 * （MDN[https://developer.mozilla.org/en-US/docs/Web/ * API/CanvasRenderingContext2D/textBaseline]） */
context.textAlign = 'start'; /** CanvasRenderingContext2D.textAlign * The CanvasRenderingContext2D.textAlign property of * the Canvas 2D API specifies the current text * alignment being used when drawing text. Beware that * the alignment is based on the x value of the * CanvasRenderingContext2D.fillText method. So if * textAlign="center", then the text would be drawn at * x-50%*width. * Canvas 2D API の CanvasRenderingContext2D.textAlign * プロパティは、テキストを描画するときに使用される現在のテキ * ストの配置を指定します。 配置は、 * CanvasRenderingContext2D.fillText メソッドのx値に * 基づいていることに注意してください。 したがって、 * textAlign = "center" の場合、テキストは * x-50％*width の位置から描画されます。 * （MDN[https://developer.mozilla.org/en-US/docs/Web/ * API/CanvasRenderingContext2D/textAlign]） */
}
// A separate canvas context for measuring label width // and height. // ラベルの幅と高さを測定するための離れているキャンバスコンテキ // スト
var textMeasureContext = document.createElement('CANVAS').getContext('2d');
/** Document.createElement()
* In an HTML document, the Document.createElement()
* method creates the HTML element specified by
* tagName, or an HTMLUnknownElement if tagName isn't
* recognized. In a XUL document, it creates the
* specified XUL element. In other documents, it
* creates an element with a null namespace URI.
* HTMLドキュメントでは、Document.createElement() メ
* ソッドは tagName で指定された HTML 要素を作成し、tagName
* が認識されない場合に HTMLUnknownElement を作成します。
* XUL ドキュメントでは、指定されたXUL要素を作成します。 他
* のドキュメントでは、nullの名前空間 URI を持つ要素を作成し
* ます。
* （MDN[https://developer.mozilla.org/en-US/docs/Web/
* API/Document/createElement]）
*/
/** 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]） */
setStyle(textMeasureContext);
// The label height is approximated by the width of the // text 'WI'. // ラベルの高さはテキスト 'WI' の幅で近似されます。
var height = textMeasureContext.measureText('WI').width;
/** CanvasRenderingContext2D.measureText()
* The CanvasRenderingContext2D.measureText() method
* returns a TextMetrics object that contains information
* about the measured text (such as its width for example).
* CanvasRenderingContext2D.measureText() メソッド
* は、（例えば幅などの）測定されたテキストについて情報を含む
* TextMetrics オブジェクトを返します。
* （MDN[https://developer.mozilla.org/en-US/docs/Web/
* API/CanvasRenderingContext2D/measureText]）
*/
// A cache for reusing label images once they have been // created. // 一度作成された再利用するラベル画像のためのキャッシュ。
var textCache = {};
var map = new ol.Map({
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 1
})
});
var emptyFn = function() {};
var labelEngine = new labelgun['default'](emptyFn, emptyFn); /** labelgun(hideLabel, showLabel, entries) * Create a label gun instance with a hide and show label * callback. * hide と show label コールバックで label gun インス * タンスを作成します。 * （JSDoc[http://tech.geovation.uk/labelgun/documentation/ * labelgun.html]） */
function createLabel(canvas, text, coord) {
var halfWidth = canvas.width / 2;
/** HTMLCanvasElement.width
* The HTMLCanvasElement.width property is a positive
* integer reflecting the width HTML attribute of
* the <canvas> element interpreted in CSS pixels.
* When the attribute is not specified, or if it is
* set to an invalid value, like a negative, the
* default value of 300 is used.
* HTMLCanvasElement.width プロパティは CSS ピクセル
* で解釈された <canvas> 要素の幅 HTML 属性を反映
* する正の整数です。属性が指定されていない場合、または、
* 負の値のように無効な値に設定されている場合、デフォルト
* 値 300 が使用されます。
* （MDN[https://developer.mozilla.org/en-US/docs/Web/
* API/HTMLCanvasElement/width]）
*/
var halfHeight = canvas.height / 2; /** HTMLCanvasElement.height * A positive integer reflecting the height HTML attribute * of the <canvas> element interpreted in CSS pixels. * When the attribute is not specified, or if it is set * to an invalid value, like a negative, the default value * of 150 is used. * CSSピクセルで解釈された <canvas> 要素の高さ HTML 属 * 性を反映する正の整数。属性が指定されていない場合、または、 * 負の値のような、無効な値に設定されている場合、デフォルト * 値 150 が使用さます。 * （MDN[https://developer.mozilla.org/en-US/docs/Web/ * API/HTMLCanvasElement]） */
var bounds = {
bottomLeft: [Math.round(coord[0] - halfWidth), Math.round(coord[1] - halfHeight)], /** Math.round() * The Math.round() function returns the value of a * number rounded to the nearest integer. * Math.round() 関数は、最も近似の整数に四捨五入した数 * の値を返します。 * （MDN[https://developer.mozilla.org/en-US/docs/Web/ * JavaScript/Reference/Global_Objects/Math/round]） */
topRight: [Math.round(coord[0] + halfWidth), Math.round(coord[1] + halfHeight)] };
labelEngine.ingestLabel(bounds, coord.toString(), 1, canvas, text, false); /** ingestLabel * Creates a label if it does not already exist, then * adds it to the tree, and renders it based on whether * it can be shown. * ラベルがまだ存在しない場合は作成し、ツリーに追加し、表示可 * 能かどうかに基づいてレンダリングします。 * （JSDoc[http://tech.geovation.uk/labelgun/documentation/ * module-labelgun.html]） */
/** Number.prototype.toString( [ radix ] ) * The toString() method returns a string representing * the specified Number object. * toString() メソッドは、指定された Number オブジェクトを * 表す文字列を返します。 * radix: 数値を表すために使われる基数を指定する、2 から 36 * までの整数。省略したときは 10。 * MDN（[https://developer.mozilla.org/en-US/docs/Web/ * JavaScript/Reference/Global_Objects/Number/toString]） */
}
// For multi-polygons, we only label the widest polygon. // This is done by sorting by extent width in descending // order, and take the first from the array. // マルチポリゴンの場合、最も幅の広いポリゴンにのみラベルを付 // けます。 これは、範囲の幅を降順でソートし、配列の先頭を取り出 // すことを実行します。
function sortByWidth(a, b) {
return ol.extent.getWidth(b.getExtent()) - ol.extent.getWidth(a.getExtent()); /** ol.extent.getWidth(extent) * Get the width of an extent. * 範囲の幅を取得します。（ol4 API） */
/** getExtent(opt_extent) * Get the extent of the geometry. * ジオメトリの範囲を取得します。（ol4 API） */
}
var labelStyle = 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*() メソッドを通じてその子に加えられた変
* 更は、スタイルを使用するフィーチャまたはレイヤが再レン
* ダリングされるまで有効になりません。
* （ol4 API）
*/
renderer: function(coords, state) {
/** renderer:
* Custom renderer. When configured, fill, stroke and
* image will be ignored, and the provided function will
* be called with each render frame for each geometry.
* カスタムレンダラ。設定されたとき、fill と stroke、 image
* は無視され、 提供されたファンクションは各ジオメトリに対する
* 各描画フレームを呼び出します。
* （ol4 API）
*/
var text = state.feature.get('name');
/** get(key)
* Gets a value.（ol4 API）
*/
createLabel(textCache[text], text, coords);
}
});
var countryStyle = new ol.style.Style({
fill: new ol.style.Fill({
/** ol.style.Fill
* Set fill style for vector features.
* ベクタフィーチャの塗りつぶしスタイルを設定。
* （ol4 API）
*/
color: 'rgba(255, 255, 255, 0.6)' /** color: * A color, gradient or pattern. See ol.color and * ol.colorlike for possible formats. Default null; if * null, the Canvas/renderer default black will be * used. * 色、グラデーション、または、パターン。 可能な形式について * は、ol.color と ol.colorlike を参照してください。 デ * フォルト は null。 nullの場合、Canvas/renderer のデ * フォルトの黒が使用されます。（ol4 API） */
}),
stroke: new ol.style.Stroke({
/** 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 関数は、オプションで入力されたものはすべて返
* す。それらはデフォルトを返しません。
* （ol4 API）
*/
color: '#319FD3', /** color: * A color, gradient or pattern. See ol.color and * ol.colorlike for possible formats. Default null; if * null, the Canvas/renderer default black will be * used. * 色、グラデーション、または、パターン。 可能な形式について * は、ol.color と ol.colorlike を参照してください。 デ * フォルト は null。 nullの場合、Canvas/renderer のデ * フォルトの黒が使用されます。（ol4 API） */
width: 1 }) }); var styleWithLabel = [countryStyle, labelStyle]; var styleWithoutLabel = [countryStyle]; var pixelRatio; // This is set by the map's precompose listener // これはマップの precompose リスナによって設定されます。
var vectorLayer = new ol.layer.Vector({
/** ol.layer.Vector
* Vector data that is rendered client-side.
* クライアント側で描画されるベクタデータ。（ol4 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 を参照してください。（ol4 API）
*/
url: 'data/geojson/countries.geojson', /** url * Setting this option instructs the source to load * features using 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. Note that if a * source contains non-feature data, such as a * GeoJSON geometry or a KML NetworkLink, these will * be ignored. Use a custom loader to load these. * このオプションを設定すると、XHR ローダーを * （ol.featureloader.xhr参照）を使用してフィーチャを * ロードするためのソースを指示します。指定された URL から * のすべてのフィーチャの1回限りのダウンロードのために * string と ol.loadingstrategy.all を使用してくださ * い。他のローディングストラテジと共に URL を生成するため * に、ol.FeatureUrlFunctionを使用してください。format * も同様に設定する必要があります。デフォルトの XHR フィー * チャローダが提供される場合、フィーチャは、解析中にデータ * 投影からビュー投影へ変換されます。リモート・データ・ソー * スが適切に投影を示していない場合は、この変換は不正確にな * ります。いくつかのフォーマットでは、デフォルトの投影（通 * 常はEPSG：4326）は、フォーマット上の * defaultDataProjection constructor オプションを設 * 定することで上書きすることができます。ソースが、このよう * な GeoJSON ジオメトリ、または、 KML NetworkLink などの * 非フィーチャデータを含んでいる場合、これらは無視される * ことに注意してください。これらをロードするために、カス * タムローダーを使用してください。 * （ol4 API） */
format: new ol.format.GeoJSON() /** 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 が設定されている場 * 合は必須で、それ以外の場合は無視されます。デフォルトは未 * 定義です。（ol4 API） */
/** ol.format.GeoJSON * Feature format for reading and writing data in the * GeoJSON format. * GeoJSON フォーマットのデータを読み書きするためのフィー * チャフォーマット。（ol4 API） */
}),
style: function(feature, resolution) {
var text = feature.get('name');
var width = textMeasureContext.measureText(text).width;
var geometry = feature.getGeometry(); /** 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 を呼び出すときに * 設定されています。（ol4 API） */
if (geometry.getType() == 'MultiPolygon') {
/** getType()
* Get the type of this geometry.（ol4 API）
*/
geometry = geometry.getPolygons().sort(sortByWidth)[0];
/** getPolygons()
* Return the polygons of this multipolygon.
* このマルチポリゴンのポリゴンを返します。（ol4 API）
*/
/** Array.prototype.sort()
* The sort() method sorts the elements of an array in
* place and returns the array. The sort is not
* necessarily stable. The default sort order is
* according to string Unicode code points.
* sort() メソッドは、配列の要素を所定の位置にソートし、
* 配列を返します。 ソートは必ずしも安定しているとは限りま
* せん。 デフォルトのソート順は、文字列の Unicode コード
* ポイントに従います。
* MDN（[https://developer.mozilla.org/en-US/docs/Web/
* JavaScript/Reference/Global_Objects/Array/sort]）
*/
}
var extentWidth = ol.extent.getWidth(geometry.getExtent()); /** ol.extent.getWidth(extent) * Get the width of an extent. * 範囲の幅を取得します。（ol4 API） */
if (extentWidth / resolution > width) {
// Only consider label when it fits its geometry's extent
// ラベルがジオメトリの範囲と合ったときだけ考慮します。
if (!(text in textCache)) {
// Draw the label to its own canvas and cache it.
// ラベルを canvas に描画し、キャッシュします。
var canvas = textCache[text] = document.createElement('CANVAS');
canvas.width = width * pixelRatio;
canvas.height = height * pixelRatio;
var context = canvas.getContext('2d');
context.scale(pixelRatio, pixelRatio);
/** CanvasRenderingContext2D.scale()
* The CanvasRenderingContext2D.scale() method of the
* Canvas 2D API adds a scaling transformation to the
* canvas units by x horizontally and by y vertically.
* Canvas 2D API の CanvasRenderingContext2D.scale()
* メソッドは、x 水平方向、および y 垂直方向によってキャン
* バス単位に伸縮変形を追加します。
* （MDN[https://developer.mozilla.org/en-US/docs/Web/
* API/CanvasRenderingContext2D/scale]）
*/
setStyle(context);
context.strokeText(text, 0, 0);
/** CanvasRenderingContext2D.strokeText()
* The CanvasRenderingContext2D.strokeText() method of
* the Canvas 2D API strokes a given text at the given
* (x, y) position. If the optional fourth parameter for
* a maximum width is provided, the text will be scaled
* to fit that width.
* Canvas 2D API のCanvasRenderingContext2D.strokeText()
* メソッドは、指定された（x、y）位置にテキストを描画します。
* 最大幅のオプションの4番目のパラメータを指定すると、テキス
* トはその幅に合わせて拡大/縮小されます。
* （MDN[https://developer.mozilla.org/en-US/docs/Web/
* API/CanvasRenderingContext2D/strokeText]）
*/
context.fillText(text, 0, 0);
/** CanvasRenderingContext2D.fillText()
* The CanvasRenderingContext2D.fillText() method of the
* Canvas 2D API fills a given text at the given (x, y)
* position. If the optional fourth parameter for a
* maximum width is provided, the text will be scaled to
* fit that width.
* Canvas 2D APIのCanvasRenderingContext2D.fillText()
* メソッドは、指定された（x、y）位置で指定されたテキストを
* 塗りつぶします。 最大幅のオプションの4番目のパラメータを
* 指定すると、テキストはその幅に合わせて拡大/縮小されます。
* （MDN[https://developer.mozilla.org/en-US/docs/Web/
* API/CanvasRenderingContext2D/fillText]）
*/
}
labelStyle.setGeometry(geometry.getInteriorPoint());
/** setGeometry()
* Set the geometry for this feature. This will update
* the property with the current name eturned by
* rol.Feature#getGeometryName.
* このフィーチャのジオメトリを設定します。これは、
* ol.Feature#getGeometryName によって返された、現在の
* 名前とともにプロパティを更新します。
* （ol4 API）
*/
/** getInteriorPoints()
* Return the interior points as multipoint.
* 内部の点をマルチポイントとして返します。
* （ol4 API）
*/
return styleWithLabel;
} else {
return styleWithoutLabel;
}
}
});
vectorLayer.on('precompose', function(e) {
/** on(type, listener, opt_this)
* Listen for a certain type of event.
* ある型のイベントをリッスンします。（ol4 API）
*/
pixelRatio = e.frameState.pixelRatio; /** frameState * An object representing the current render frame state. * 現在の描画フレームの状態を表すオブジェクト。（ol4 API） */
labelEngine.destroy(); /** destroy() * Destroy the collision tree and labels. * コリジョン（衝突）ツリーとラベルを破棄します。 * （JSDoc[http://tech.geovation.uk/labelgun/documentation/ * labelgun.html]） */
});
vectorLayer.on('postcompose', function(e) {
var labels = labelEngine.getShown(); /** getShown() * Return an array of all shown labels. * 表示されたラベルすべての配列を返します。 * （JSDoc[http://tech.geovation.uk/labelgun/documentation/ * labelgun.html]） */
for (var i = 0, ii = labels.length; i < ii; ++i) {
var label = labels[i];
// Draw label to the map canvas
// ラベルをマップ canvas に描画します。
e.context.drawImage(label.labelObject, label.minX, label.minY); /** CanvasRenderingContext2D.drawImage() * The CanvasRenderingContext2D.drawImage() method of * the Canvas 2D API provides different ways to draw * an image onto the canvas. * Canvas 2D API の CanvasRenderingContext2D.drawImage() * メソッドは、イメージをキャンバスに描画するさまざまな方法を提 * 供します。 * （MDN[https://developer.mozilla.org/en-US/docs/Web/ * API/CanvasRenderingContext2D/drawImage]） */
} });
map.addLayer(vectorLayer); /** addLayer(layer) * Adds the given layer to the top of this map. * 与えられたレイヤをこのマップの一番上に追加します。（ol4 API） */
