「2115-ol3ex.js」
var projection = ol.proj.get('EPSG:3857');
/** ol.proj.get(projectionLike)
* Fetches a Projection object for the code specified.
* 指定されたコードのプロジェクション·オブジェクトを取得
* （ol3 API）
*/
var view = new ol.View({
center: [0, 0],
projection: projection,
extent: projection.getExtent(), /** getExtent() * Get the validity extent for this projection. * この投影の有効範囲を取得。（ol3 API） */
zoom: 2 });
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
/** ol.source.OSM
* Layer source for the OpenStreetMap tile server.
* OpenStreetMap タイルサーバのレイヤソース。（ol3 API）
*/
}) ],
renderer: exampleNS.getRendererFromQueryString(), // 'example-behavior.js' により URL にある renderer を返します
target: 'map',
controls: ol.control.defaults({
/** controls
* Controls initially added to the map.
* If not specified, ol.control.defaults() is used.
* 初期設定で、マップに追加されたコントロール。
* 明示されていなければ、ol.control.defaults() が使用されます。
* （ol3 API）
*/
/** ol.control.defaults() * デフォルトでは、マップに含まコントロールのセット。 * 特に設定しない限り、これは、以下の各コントロールの * インスタンスを含むコレクションを返します。(ol3 API） * ol.control.Zoom, ol.control.Rotate, ol.control.Attribution */
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
/** @type
* 値のタイプ（型）の説明 - 式などで表示
* （@use JSDoc[http://usejsdoc.org/]より）
*/
collapsible: false // 折りたたみ }) }), view: view });
var deviceOrientation = new ol.DeviceOrientation(); /** ol.DeviceOrientation * The ol.DeviceOrientation class provides access to * DeviceOrientation information and events, see the * HTML 5 DeviceOrientation Specification for more * details. * ol.Deviceオリエンテーションクラスは、デバイスの向き情報と * イベントへのアクセスを提供します。詳細は、HTML 5 * DeviceOrientation 仕様を参照してください。（ol3 API） * （ページ下部も参照してください。） */
var track = new ol.dom.Input(document.getElementById('track'));
/** ol.dom.Input
* Helper class for binding HTML input to an ol.Object.
* ol.Object に HTML input要素を接続するためのヘルパークラス。
* （ol3 API）
*/
track.bindTo('checked', deviceOrientation, 'tracking');
/** bindTo()
* The bindTo method allows you to set up a two-way
* binding between a `source` and `target` object.
* The method returns an object with a `transform`
* method that you can use to provide `from` and
* `to` functions to transform values on the way
* from the source to the target and on the way back.
* bindTo メソッドは、`source` と ` target` オブジェク
* ト間の結合を双方向に設定することができます。メソッド
* は、ソースからターゲットに、および、その逆方向に値を
* 変換する、 `from` と ` to` ファンクションを提供する
* ために使用することがでる `transform` メソッドをとも
* なった、オブジェクトを返します。
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
deviceOrientation.on('change', function(event) {
/** on
* Listen for a certain type of event.
* あるタイプのイベントをリッスンします。（ol3 API）
*/
$('#alpha').text(deviceOrientation.getAlpha() + ' [rad]');
/** .text()
* Get the combined text contents of each element
* in the set of matched elements, including their
* descendants, or set the text contents of the
* matched elements.
* 子孫要素を含め、マッチした要素のセットの各要素の組み
* 合わせたテキストの内容を取得し、またはマッチした要素
* のテキストの内容を設定します。
* （jQyery[https://api.jquery.com/text/]）
*/
/** getAlpha() * Returns: The euler angle in radians of the device * from the standard Z axis. * （ol3 API[説明は Stable Only のチェックを外すと表示]） */
$('#beta').text(deviceOrientation.getBeta() + ' [rad]');
/** getBeta()
* Returns: The euler angle in radians of the device
* from the standard X axis.
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
$('#gamma').text(deviceOrientation.getGamma() + ' [rad]');
/** getGamma()
* Returns: The euler angle in radians of the device
* from the standard Y axis.
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
$('#heading').text(deviceOrientation.getHeading() + ' [rad]');
/** getHeading()
* Get the heading as radians clockwise from North.
* 北からラジアン時計回りとして方角を取得します。
* Return: The heading of the device in radians from
* north.（ol3 API）
*/
});
// tilt the map
deviceOrientation.on(['change:beta', 'change:gamma'], function(event) {
var center = view.getCenter(); /** ol.extent.getCenter(extent) * Name: extent, Type: ol.Extent, Description: Extent * Return: Center.（ol2 API） */
var resolution = view.getResolution(); /** getResolution() * Return: The resolution of the view. * view（ビュー）の解像度を返します。（ol3 API） */
var beta = event.target.getBeta() || 0; var gamma = event.target.getGamma() || 0; center[0] -= resolution * gamma * 25; center[1] += resolution * beta * 25;
view.setCenter(view.constrainCenter(center)); /** constrainCenter(center) * Get the constrained center of this view. * このビューの制約された中心を取得します。 * （ol3 API[説明は Stable Only のチェックを外すと表示]） */
});
ol.DeviceOrientation（ol3 API）
The ol.DeviceOrientation class provides access to DeviceOrientation information and events, see the HTML 5 DeviceOrientation Specification for more details.
ol.DeviceOrientation クラスは、DeviceOrientation 情報とイベントへのアクセスを提供します。詳細は、HTML 5 DeviceOrientation 仕様を参照してください。
Many new computers, and especially mobile phones and tablets, provide hardware support for device orientation. Web developers targeting mobile devices will be especially interested in this class. 多くの新しいコンピュータ、特に携帯電話やタブレットは、デバイスの方位のためのハードウェアサポートを提供します。モバイルデバイスをターゲットにする Web 開発者は、このクラスに特に興味があるでしょう。
Device orientation data are relative to a common starting point. For mobile devices, the starting point is to lay your phone face up on a table with the top of the phone pointing north. This represents the zero state. All angles are then relative to this state. For computers, it is the same except the screen is open at 90 degrees.
デバイスの方位データは、共通の出発点に対するものです。モバイルデバイスの場合、出発点は携帯電話の上部で北側を指すようにテーブルの上に携帯電話の表面を上に置きます。これは、ゼロの状態を表します。すべての角度は、この状態を基準にしています。コンピュータの場合には、90度に開いている画面を除いて同じです。
Device orientation is reported as three angles - alpha, beta, and gamma - relative to the starting position along the three planar axes X, Y and Z. The X axis runs from the left edge to the right edge through the middle of the device. Similarly, the Y axis runs from the bottom to the top of the device through the middle. The Z axis runs from the back to the front through the middle. In the starting position, the X axis points to the right, the Y axis points away from you and the Z axis points straight up from the device lying flat.
デバイスの方位はを３つの角度 - アルファ、ベータ、およびガンマ（X、Y および Z の3平面に沿った相対的な開始位置）として報告されます。X軸は、デバイスの中央を通る左端から右端へ走ります。同様に、Y軸は、デバイスの中央を通る下から上へ走ります。 Z軸は、中央通る背面から前面へ走ります。開始位置では、X軸は右へポイントし、Y軸はあなたの向こう側へポイントし、Z軸は平らに置かデバイスからまっすぐ上にポイントします。
The three angles representing the device orientation are relative to the three axes. alpha indicates how much the device has been rotated around the Z axis, which is commonly interpreted as the compass heading (see note below). beta indicates how much the device has been rotated around the X axis, or how much it is tilted from front to back. gamma indicates how much the device has been rotated around the Y axis, or how much it is tilted from left to right.
デバイスの方位を表す3つの角度は、３つの軸に対するものです。アルファは、デバイスが、一般的にコンパスの方角（下記の注を参照）として解釈されるZ軸を中心にどの程度回転しているかを示しています。 ベータは、デバイスがX軸を中心にどの程度回転しているか、または、それは前面から背面へどの程度傾いているかを示しています。ガンマは、デバイスがY軸を中心にどの程度回転しているか、または、それが左から右にどの程度傾いているかを示しています。
For most browsers, the alpha value returns the compass heading so if the device points north, it will be 0. With Safari on iOS, the 0 value of alpha is calculated from when device orientation was first requested. ol.DeviceOrientation provides the heading property which normalizes this behavior across all browsers for you.
ほとんどのブラウザでは、アルファ値はコンパスの方角を返し、もしデバイスが北をポイントしたら、値は 0 です。iOS の上の Safari で、アルファの 0 値は、デバイスの方位が最初に要求されたときから計算されます。 ol.DeviceOrientation は、すべてのブラウザでこの動作を標準化する方角プロパティを提供します。
It is important to note that the HTML 5 DeviceOrientation specification indicates that alpha, beta and gamma are in degrees while the equivalent properties in ol.DeviceOrientation are in radians for consistency with all other uses of angles throughout OpenLayers.
ol.DeviceOrientation で同等のプロパティが、OpenLayers を通して角度のすべての他の用途との整合性のためにラジアン単位である一方で、HTML 5 DeviceOrientation 仕様は、アルファ、ベータおよびガンマは度数であることを示していることに注意することが重要です。
0 件のコメント:
コメントを投稿