「2114-ol3ex.js」
var view = new ol.View({
center: [0, 0],
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）
*/
}) ], 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 geolocation = new ol.Geolocation({
/** ol.Geolocation
* Helper class for providing HTML5 Geolocation capabilities.
* The Geolocation API is used to locate a user's position.
* HTML5 Geolocation 機能を提供するためのヘルパークラス。
* Geolocation API は、ユーザの位置を特定するために使用されま
* す。（ol3 API）
*/
projection: view.getProjection() /** projection * The projection the position is reported in. * 位置が報告されている投影。（ol3 API） */
/** getProjection() * Get the projection associated with the position. * 位置をともなった投影を取得します。（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', geolocation, '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 のチェックを外すと表示]）
*/
// update the HTML page when the position changes. // 位置が関わったときに、HTML ページを更新します。
geolocation.on('change', function() {
/** on
* Listen for a certain type of event.
* あるタイプのイベントをリッスンします。（ol3 API）
*/
$('#accuracy').text(geolocation.getAccuracy() + ' [m]');
/** .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/]）
*/
/** getAccuracy() * Get the accuracy of the position in meters. * メートル単位で位置の精度を取得します。 * Return: The accuracy of the position measurement * in meters.（ol3 API） */
$('#altitude').text(geolocation.getAltitude() + ' [m]');
/** getAltitude()
* Get the altitude associated with the position.
* 位置に関連した標高を取得します。
* Return: The altitude of the position in meters
* above mean sea level.（ol3 API）
*/
$('#altitudeAccuracy').text(geolocation.getAltitudeAccuracy() + ' [m]');
/** getAltitudeAccuracy()
* Get the altitude accuracy of the position.
* 位置の標高精度を取得します。
* Return: The accuracy of the altitude measurement
* in meters.（ol3 API）
*/
$('#heading').text(geolocation.getHeading() + ' [rad]');
/** getHeading()
* Get the heading as radians clockwise from North.
* 北からラジアン時計回りとして方角を取得します。
* Return: The heading of the device in radians from
* north.（ol3 API）
*/
$('#speed').text(geolocation.getSpeed() + ' [m/s]');
/** getSpeed()
* Get the speed in meters per second.
* メートル毎秒で速度を取得します。
* Return: The instantaneous speed of the device in
* meters per second.（ol3 API）
*/
});
// handle geolocation error. // ジオロケーショネラーを取り扱います。
geolocation.on('error', function(error) {
var info = document.getElementById('info');
info.innerHTML = error.message; /** element.innerHTML * innerHTML は、与えられた要素に含まれる全てのマークアップ * と内容を設定または取得します。 * （MDN[https://developer.mozilla.org/ja/docs/Web/ * API/element.innerHTML]） */
info.style.display = ''; });
var accuracyFeature = new ol.Feature(); /** 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のようなベクトルファイル形式のフィーチャに類似した、 * ジオメトリとその他の属性プロパティを持つ地物フィーチャのた * めのベクトルオブジェクト。（ol3 API） */
accuracyFeature.bindTo('geometry', geolocation, 'accuracyGeometry');
var positionFeature = new ol.Feature();
positionFeature.setStyle(new ol.style.Style({
/** setStyle
* Set the style for the feature. This can be a single
* style object, an array of styles, or a function that
* takes a resolution and returns an array of styles.
* If it is null the feature has no style (a null style).
* フィーチャのスタイルを設定します。これは、単一のスタイル
* オブジェクト、スタイルの配列、または、解像度を取りスタイ
* ルの配列を返す関数とすることができます。それが null の
* 場合フィーチャは、スタイル（ヌルスタイル）を持っていませ
* ん。（ol3 API）
*/
/** ol.style.Style * Base class for vector feature rendering styles. * ベクタフィーチャがスタイルを描画するための基本クラス。 * （ol3 API） */
image: new ol.style.Circle({
/** ol.style.Circle
* Set circle style for vector features.
* ベクタフィーチャの円のスタイルを設定。（ol3 API）
*/
radius: 6,
fill: new ol.style.Fill({
/** ol.style.Fill
* Set fill style for vector features.
* ベクタフィーチャの塗りつぶしスタイルを設定。（ol3 API）
*/
color: '#3399CC' }),
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機能は、オプションで入力されたものはすべて返します。
* それらはデフォルトを返しません。（ol3 API）
*/
color: '#fff', width: 2 }) }) }));
positionFeature.bindTo('geometry', geolocation, 'position')
.transform(function() {}, function(coordinates) {
return coordinates ? new ol.geom.Point(coordinates) : null; /** 条件演算子 condition ? expr1 : expr2 * condition: true か false かを評価する条件文です。 * expr1, expr2: 各々の値の場合に実行する式です。 * condition が true の場合、演算子は expr1 の値を選択します。 * そうでない場合は expr2 の値を選択します。 * （MDN[https://developer.mozilla.org/ja/docs/Web/ * JavaScript/Guide/Expressions_and_Operators]） */
});
var featuresOverlay = new ol.FeatureOverlay({
/** ol.FeatureOverlay
* A mechanism for changing the style of a small number of
* features on a temporary basis, for example highlighting.
* This is necessary with the Canvas renderer, where, unlike
* in SVG, features cannot be individually referenced.
* ハイライトのように、一時的に少数のフィーチャがスタイルの変更す
* るためのメカニズム。これは Canvas レンダラが必要で、SVGとは異
* なり、フィーチャを個別に参照することはできません。（ol3 API）
*/
map: map, features: [accuracyFeature, positionFeature] });
0 件のコメント:
コメントを投稿