「2167-ol4ex.js」
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.
* プリレンダリング（事前描画）を提供するレイヤソースのため
* の、特定の解像度でのズームレベルによって編成されているグ
* リッドのタイルイメージ。（ol4 API）
*/
source: new ol.source.OSM() /** ol.source.OSM * Layer source for the OpenStreetMap tile server. * OpenStreetMap タイルサーバのレイヤソース。（ol4 API） */
});
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）
*/
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: 'black', /** 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 と oil.color を参照してください。デフォル * トは null; null の場合は、Canvas/renderer デフォルトの * 黒が使用されます。 * （ol4 API） */
width: 1 }) });
var feature = new ol.Feature(new ol.geom.LineString([[-4000000, 0], [4000000, 0]])); /** ol.Feature * A vector object for geographic features with a * geometry and other attribute properties, similar * to the features in vector file formats like * GeoJSON. * GeoJSONのようなベクトルファイル形式のフィーチャに類 * 似した、ジオメトリとその他の属性プロパティを持つ地物 * フィーチャのためのベクトルオブジェクト。（ol4 API） */
/** ol.geom.LineString * Linestring geometry.（ol4 API） */
var vector = 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）
*/
features: [feature] /** features: * Features. If provided as ol.Collection, the features * in the source and the collection will stay in sync. * フィーチャ。 ol.Collectionとして提供されている場合、ソー * スとコレクションのフィーチャは同期しています。（ol4 API） */
}), style: style });
var map = new ol.Map({
layers: [raster, vector],
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
var hitTolerance;
var statusElement = document.getElementById('status');
map.on('singleclick', function(e) {
/** on(type, listener, opt_this)
* Listen for a certain type of event.
* あるタイプのイベントをリッスンします。（ol4 API）
*/
var hit = false;
map.forEachFeatureAtPixel(e.pixel, function() {
/** forEachFeatureAtPixel(pixel, callback, opt_this)
* Detect features that intersect a pixel on the viewport,
* and execute a callback with each intersecting feature.
* Layers included in the detection can be configured
* through opt_layerFilter.
* ビューポート上のピクセルと交差するフィーチャを検出し、互
* いに交差するフィーチャと共にコールバックを実行します。
* 検出に含まれるレイヤが opt_layerFilter を通じて設定する
* ことができます。（ol4 API）
*/
hit = true;
}, {
hitTolerance: hitTolerance /** hitTolerance: * Hit-detection tolerance in pixels. Pixels inside the * radius around the given position will be checked for * features. This only works for the canvas renderer and * not for WebGL. Default is 0. * Hit-detection の許容差（ピクセル単位）。 指定された位置を * 中心とした半径内のピクセルがフィーチャのチェックに使われま * す。canvas レンダラのみで、WebGLでは使用できません。 デ * フォルトは0です。（ol4 API） */
});
if (hit) {
style.getStroke().setColor('green');
/** getStroke()
* Get the stroke style.（ol4 API）
*/
/** setColor(color) * Set the color.（ol4 API） */
statusElement.innerHTML = ' A feature got hit!'; /** Element.innerHTML * The Element.innerHTML property sets or gets the HTML * syntax describing the element's descendants. * Element.innerHTMLプロパティは、要素（element）の子孫を説 * 明する HTML 構文を設定、または、取得します。 * （MDN[https://developer.mozilla.org/en-US/docs/Web/ * API/Element/innerHTML]） */
} else {
style.getStroke().setColor('black');
statusElement.innerHTML = ' No feature got hit.';
}
feature.changed(); /** changed() * Increases the revision counter and dispatches a 'change' * event. * リビジョンカウンタを増派し、 「change」イベントを送出します。 * （ol4 API） */
});
var selectHitToleranceElement = document.getElementById('hitTolerance');
var circleCanvas = document.getElementById('circle');
var changeHitTolerance = function() {
hitTolerance = parseInt(selectHitToleranceElement.value, 10); /** parseInt(string, radix) * string: 文字列, radix: 基数（進法） * parseInt()関数は、第1引数の文字列を解析(パース)し、第2引数 * に与えられた基数(数学的記数法の底)にもとづく整数を返します。 * （MDN[https://developer.mozilla.org/ja/docs/Web/ * JavaScript/Reference/Global_Objects/parseInt]） */
var size = 2 * hitTolerance + 2; circleCanvas.width = size; circleCanvas.height = size;
var ctx = circleCanvas.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]）
*/
ctx.clearRect(0, 0, size, size); /** CanvasRenderingContext2D.clearRect() * The CanvasRenderingContext2D.clearRect() method of the * Canvas 2D API sets all pixels in the rectangle defined * by starting point (x, y) and size (width, height) to * transparent black, erasing any previously drawn content. * Canvas 2D APIのCanvasRenderingContext2D.clearRect() * メソッドは、開始点（x、y）とサイズ（幅、高さ）で定義された * 矩形のすべてのピクセルを、以前に描画された内容を透過な黒に * するように設定します。 * （MDN[https://developer.mozilla.org/en-US/docs/Web/API/ * CanvasRenderingContext2D/clearRect]） */
ctx.beginPath(); /** CanvasRenderingContext2D.beginPath() * The CanvasRenderingContext2D.beginPath() method of the * Canvas 2D API starts a new path by emptying the list of * sub-paths. Call this method when you want to create a * new path. * Canvas 2D APIのCanvasRenderingContext2D.beginPath() * メソッドは、サブパスのリストを空にして新しいパスを開始しま * す。新しいパスを作成する場合は、このメソッドを呼び出します。 * （MDN[https://developer.mozilla.org/en-US/docs/Web/API/ * CanvasRenderingContext2D/beginPath]） */
ctx.arc(hitTolerance + 1, hitTolerance + 1, hitTolerance + 0.5, 0, 2 * Math.PI); /** CanvasRenderingContext2D.arc() * The CanvasRenderingContext2D.arc() method of the Canvas * 2D API adds an arc to the path which is centered at * (x, y) position with radius r starting at startAngle and * ending at endAngle going in the given direction by * anticlockwise (defaulting to clockwise). * * void ctx.arc(x, y, radius, startAngle, endAngle, * anticlockwise); * x: The x coordinate of the arc's center. * y: The y coordinate of the arc's center. * radius: The arc's radius. * startAngle: The angle at which the arc starts, measured * clockwise from the positive x axis and expressed in * radians. * endAngle: The angle at which the arc ends, measured * clockwise from the positive x axis and expressed in * radians. * anticlockwise: Optional An optional Boolean which, if * true, causes the arc to be drawn counter-clockwise * between the two angles. By default it is drawn * clockwise. * * Canvas 2D APIのCanvasRenderingContext2D.arc（）メソッ * ドは、startAngleで始まりendAngleで終わる半径rの（x、y）位 * 置を中心にしたパスに反時計回り（デフォルトは時計回り）に円 * 弧を追加します。 * （MDN[https://developer.mozilla.org/en-US/docs/Web/API/ * CanvasRenderingContext2D/arc]） */
ctx.fill(); /** CanvasRenderingContext2D.fill() * The CanvasRenderingContext2D.fill() method of the * Canvas 2D API fills the current or given path with the * current fill style using the non-zero or even-odd * winding rule. * Canvas 2D APIのCanvasRenderingContext2D.fill() メソッド * は、現在の、または、指定されたパスを、非ゼロ、または、奇数 * のワインディングルールを使用して現在の塗りつぶしスタイルで * 塗りつぶします。 * （MDN[https://developer.mozilla.org/en-US/docs/Web/API/ * CanvasRenderingContext2D/fill]） */
ctx.stroke(); /** CanvasRenderingContext2D.stroke() * The CanvasRenderingContext2D.stroke() method of the * Canvas 2D API strokes the current or given path with the * current stroke style using the non-zero winding rule. * Canvas 2D APIのCanvasRenderingContext2D.stroke() メソッド * は、非ゼロのワインディングルールを使用して、現在の、または、 * 指定されたパスを現在のストロークスタイルでストロークします。 * （MDN[https://developer.mozilla.org/en-US/docs/Web/API/ * CanvasRenderingContext2D/stroke]） */
};
selectHitToleranceElement.onchange = changeHitTolerance; /** GlobalEventHandlers.onchange() * The onchange property sets and returns the event handler * for the change event. * onchange プロパティは、change イベントに対してイベントハ * ンドラを設定、および、返します。 * （MDN[https://developer.mozilla.org/en-US/docs/Web/ * API/GlobalEventHandlers/onchange]） */
changeHitTolerance();
0 件のコメント:
コメントを投稿