「2171-ol4ex.js」
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]） */
var context, pixelRatio;
// Will be set in the map's postcompose listener
function measureText(text) {
return context.measureText(text).width * pixelRatio; /** 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]） */
}
var extent, letters;
// Will be set in the style's renderer function
function collectDrawData(letter, x, y, angle) {
ol.extent.extend(extent, [x, y, x, y]); /** ol.extent.extend(extent1, extent2) * Modify an extent to include another extent. * もう一つの範囲を含むために、範囲を修正します。 * （ol4 API） */
letters.push([x, y, angle, letter]); /** Array.prototype.push() * The push() method adds one or more elements to the end * of an array and returns the new length of the array. * push() メソッドは、配列の末尾に 1 つ以上の要素を追加し、新 * しい配列の数を返します。 * （MDN[https://developer.mozilla.org/en-US/docs/Web/ * JavaScript/Reference/Global_Objects/Array/push]） */
}
var 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*() メソッドを通じてその子に加えられた変
* 更は、スタイルを使用するフィーチャまたはレイヤが再レン
* ダリングされるまで有効になりません。
* （ol4 API）
*/
renderer: function(coords, context) {
/** 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 feature = context.feature;
var text = feature.get('name');
/** get(key)
* Gets a value.（ol4 API）
*/
// Only create label when geometry has a long and straight segment
var path = labelSegment(coords, Math.PI / 8, measureText(text)); /** labelSegment(path, maxAngle, labelLength) * path: Array<Array<number>>, Path represented in * coordinate pairs. * 座標と対で表されるパス。 * maxAngle: number Maximum angle in radians for a * suitable segment. * 適切なセグメントの最大角度（ラジアン）。 * labelLength: number, Required segment length for the * label. * ラベルの必要とされるセグメント長。 * （labelSegment[https://github.com/ahocevar/ * label-segment]） */ /** Math.PI() * The Math.PI property represents the ratio of the * circumference of a circle to its diameter, * approximately 3.14159: * Math.PIプロパティは、円周とその直径の比（約3.14159）を表し * ます。 * （MDN[https://developer.mozilla.org/en-US/docs/Web/ * JavaScript/Reference/Global_Objects/Math/PI]） */
if (path) {
extent = ol.extent.createEmpty();
/** ol.extent.createEmpty
* Create an empty extent.（ol4 API）
*/
letters = [];
textPath(text, path, measureText, collectDrawData);
/** textPath(text, path, measureText, draw, textArea)
* text: string, Text to draw along the path.
* パスに沿って描画されるテキスト。
* path: Array<Array<number>>, Path represented in
* coordinate pairs.
* 座標と対で表されるパス。
* measureText: Function, Function that takes a text as
* argument and returns the width of the provided text.
* 引数としてテキストをとり、指定されたテキストの幅を返す
* 関数。
* draw: Function, Function that takes a letter, its x
* coordinate, y coordinate and angle (in radians) as
* arguments. It is typically used to draw the provided
* letter to a canvas.
* 文字、そのx座標、y座標、角度（ラジアン）を引数とする関
* 数。 これは通常、指定された文字をキャンバスに描画するた
* めに使用されます。
* textAlign: string, Text alignment along the path. One
* of 'left', 'center', 'right'. (optional, default
* 'center')
* パスに沿ったテキストの配置。 「左」、「中央」、「右」の
* いずれか。
* （オプション、デフォルトは 'center'）
* （textPath[https://github.com/ahocevar/textpath]）
*/
ol.extent.buffer(extent, 5 * pixelRatio, extent); /** ol.extent.buffer(extent, value, opt_extent) * Return extent increased by the provided value. * 提供された値によって拡大した範囲を返します。 * （ol4 API） */
var bounds = {
bottomLeft: ol.extent.getBottomLeft(extent), /** ol.extent.getBottomLeft(extent) * Get the bottom left coordinate of an extent. * 範囲の左下の座標を取得します。 * （ol4 API） */
topRight: ol.extent.getTopRight(extent) /** ol.extent.getTopRight(extent) * Get the top right coordinate of an extent. * 範囲の右上の座標を取得します。 * （ol4 API） */
};
labelEngine.ingestLabel(bounds, feature.getId(), 1, letters, 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]） */
/** getId() * Get the feature identifier. This is a stable * identifier for the feature and is either set when * reading data from a remote source or set explicitly * by calling ol.Feature#setId. * フィーチャ識別子を取得します。これは、フィーチャの安定し * た識別子で、リモートソースからデータを読み取るか、 * ol.Feature#setid を呼び出すことによって明示的に設定した * 場合のいずれかのセットです。（ol4 API） */
} } });
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.
* プリレンダリング（事前描画）を提供するレイヤソースのた
* めの、特定の解像度でのズームレベルによって編成されてい
* るグリッドのタイルイメージ。（ol4 API）
*/
source: new ol.source.BingMaps({
/** ol.source.BingMaps
* Layer source for Bing Maps tile data.（ol4 API）
*/
key: 'As1Hi...（省略）', imagerySet: 'Aerial' }) });
var 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） */
// Request streets from OSM, using the Overpass API
fetch('https://overpass-api.de/api/interpreter', {
/** WindowOrWorkerGlobalScope.fetch()
* The fetch() method of the WindowOrWorkerGlobalScope
* mixin starts the process of fetching a resource from
* the network. This returns a promise that resolves to
* the Response object representing the response to your
* request.
* WindowOrWorkerGlobalScope mixin の fetch() メソッドは、
* ネットワークからリソースを取得する処理を開始します。これは
* 要求に 対する応答を表す Response オブジェクトに解決のプロ
* ミス（promise）を返します。
*（MDN[https://developer.mozilla.org/en-US/docs/Web/API/
* WindowOrWorkerGlobalScope/fetch]）
*/
method: 'POST', /** method: * The request method, e.g., GET, POST. */
body: '(way["highway"](48.19642,16.32580,48.22050,16.41986));(._;>;);out meta;' /** body: * Any body that you want to add to your request: this * can be a Blob, BufferSource, FormData, URLSearchParams, * or USVString object. Note that a request using the GET * or HEAD method cannot have a body. * リクエストに追加する body。これは、Blob や、BufferSource、 * FormData、URLSearchParams、USVString オブジェクトです。 * GET、または、HEAD メソッドを使用するリクエストは、body を持 * てないことに注意してください。 */
}).then(function(response) {
return response.text();
}).then(function(responseText) {
var features = new ol.format.OSMXML().readFeatures(responseText, {
/** ol.format.OSMXML
* Feature format for reading data in the OSMXML format.
* OSMXML フォーマットのデータを読み込むためのフィーチャ
* フォーマット。（ol4 API）
*/
featureProjection: 'EPSG:3857' });
source.addFeatures(features); /** addFeatures(features) * Add a batch of features to the source. * ソースにフィーチャのバッチを追加します。（ol4 API） */
});
var vectorLayer = new ol.layer.Vector({
/** ol.layer.Vector
* Vector data that is rendered client-side.
* クライアント側で描画されるベクタデータ。（ol4 API）
*/
source: source,
style: function(feature) {
if (feature.getGeometry().getType() == 'LineString' && feature.get('name')) {
/** 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）
*/
/** getType() * Get the type of this geometry.（ol4 API） */
return style; } } });
var viewExtent = [1817379, 6139595, 1827851, 6143616];
var map = new ol.Map({
layers: [rasterLayer, vectorLayer],
target: 'map',
view: new ol.View({
extent: viewExtent,
center: ol.extent.getCenter(viewExtent), /** ol.extent.getCenter(extent) * Get the center coordinate of an extent. * 範囲の中心座標を取得します。（ol4 API） */
zoom: 17, minZoom: 14 }) });
vectorLayer.on('precompose', function() {
/** on(type, listener, opt_this)
* Listen for a certain type of event.
* ある型のイベントをリッスンします。（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) {
context = e.context;
pixelRatio = e.frameState.pixelRatio; /** frameState * An object representing the current render frame state. * 現在の描画フレームの状態を表すオブジェクト。（ol4 API） */
context.save(); /** CanvasRenderingContext2D.save() * The CanvasRenderingContext2D.save() method of the * Canvas 2D API saves the entire state of the canvas * by pushing the current state onto a stack. * Canvas 2D API の CanvasRenderingContext2D.save（） * メソッドは、スタック上に現在の状態を最後に追加するこ * とにより、キャンバスの状態全体を保存します。 * （MDN[https://developer.mozilla.org/en-US/docs/Web/ * API/CanvasRenderingContext2D/save]） */
context.font = 'normal 11px "Open Sans", "Arial Unicode MS"'; /** 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 = 'white'; /** 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.textBaseline = 'middle'; /** 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 * プロパティは、テキストを描画するとき使用される現在のテキス * トのベースライン（baseline）を指定します。デフォルトでは、 * ＃000（黒）です。 * （MDN[https://developer.mozilla.org/en-US/docs/Web/ * API/CanvasRenderingContext2D/textBaseline]） */
context.textAlign = 'center'; /** 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]） */
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) {
// Render label letter by letter
var letters = labels[i].labelObject; /** labelObject（ingestLabel のパラメータ） * The object representing the actual label object from * your mapping library. * マッピングライブラリの実際の label オブジェクトを表すオ * ブジェクト。 * （JSDoc[http://tech.geovation.uk/labelgun/documentation/ * labelgun.html]） */
for (var j = 0, jj = letters.length; j < jj; ++j) {
var labelData = letters[j];
context.save();
context.translate(labelData[0], labelData[1]); /** CanvasRenderingContext2D.translate() * The CanvasRenderingContext2D.translate() method of the * Canvas 2D API adds a translation transformation by * moving the canvas and its origin x horizontally and y * vertically on the grid. * Canvas 2D API の CanvasRenderingContext2D.translate() * メソッドは、canvas およびその元のグリッド上の x 垂直方向、 * および y 水平方向を移動することによる変換変形を追加します。 * （MDN[https://developer.mozilla.org/en-US/docs/Web/ * API/CanvasRenderingContext2D/translate]） */
context.rotate(labelData[2]); /** CanvasRenderingContext2D.rotate() * The CanvasRenderingContext2D.rotate() method of the * Canvas 2D API adds a rotation to the transformation * matrix. The angle argument represents a clockwise * rotation angle and is expressed in radians. * Canvas 2D APIのCanvasRenderingContext2D.rotate() * メソッドは、変換行列に回転を追加します。 angle 引数は時計 * 回りの回転角度を表し、ラジアンで表されます。 * （MDN[https://developer.mozilla.org/en-US/docs/Web/ * API/CanvasRenderingContext2D/rotate]） */
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]） */
context.fillText(labelData[3], 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]） */
context.restore(); /** CanvasRenderingContext2D.restore() * The CanvasRenderingContext2D.restore() method of the * Canvas 2D API restores the most recently saved canvas * state by popping the top entry in the drawing state * stack. If there is no saved state, this method does * nothing. * Canvas 2D API の CanvasRenderingContext2D.restore() * メソッドは、描画状態のスタックの一番上のエントリを抜き * 出すことによって、最後に保存されたキャンバスの状態を復 * 元します。全く保存された状態が存在しない場合、このメソッ * ドは何もしません。 * （MDN[https://developer.mozilla.org/en-US/docs/Web/ * API/CanvasRenderingContext2D/restore]） */
} } context.restore(); });
0 件のコメント:
コメントを投稿