2015年4月20日月曜日

2 - ol3.4ex 116b - Geolocation tracking with orientation example 2

「geolocation-orientation.js(2116-ol3ex.js)」は、マップを表示するための JavaScript ファイルです。

「2116-ol3ex.js」
// creating the view
var view = new ol.View({
 center: ol.proj.transform([5.8713, 45.6452], 'EPSG:4326', 'EPSG:3857'),
 zoom: 19
});
// creating the map
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
});
// Geolocation marker
var markerEl = document.getElementById('geolocation_marker');
var marker = new ol.Overlay({
/** ol.Overlay 
 * Like ol.control.Control, Overlays are visible widgets. 
 * Unlike Controls, they are not in a fixed position on 
 * the screen, but are tied to a geographical coordinate, 
 * so panning the map will move an Overlay but not a Control.
 * ol.control.Controlと同じように、オーバーレイは、目に見える
 * ウィジェットです。コントロールとは異なり、それらは画面上の
 * 固定された位置にありませんが、地理座標に関連付けられている
 * ので、オーバーレイを移動しますが、コントロールできない
 * マップをパンします。(ol3 API)
 */
 positioning: 'center-center',
 /** positioning
  * Defines how the overlay is actually positioned with 
  * respect to its position property. 
  * オーバーレイが実際にその位置プロパティを考慮して位置決めされ
  * る方法を定義します。(ol3 API)
  */
 element: markerEl,
 /** element
  * The overlay element.(ol3 API)
  */
 stopEvent: false
 /** stopEvent
  * Whether event propagation to the map viewport should 
  * be stopped. Default is true. If true the overlay is 
  * placed in the same container as that of the controls 
  * (CSS class name ol-overlaycontainer-stopevent); if 
  * false it is placed in the container with CSS class 
  * name ol-overlaycontainer.
  * マップビューポートにイベントの伝達を停止する必要がするかどう
  * か。デフォルトは true です。trueの場合、オーバーレイは(CSS
  * クラス名の ol-overlaycontainer-stopevent)コントロールと同
  * 様のコンテナに配置され、false の場合、CSSクラス名の 
  * ol-overlaycontainer によってコンテナに配置されます。
  * (ol3 API)
  */
});
map.addOverlay(marker);
/** addOverlay()
 * Add the given overlay to the map.
 * 与えられたオーバーレイをマップに追加します。(ol3 API)
 */
/** LineString to store the different geolocation positions. 
 * This LineString is time aware.
 * The Z dimension is actually used to store the rotation 
 * (heading).
 * 異なる地理位置を保存するためのラインストリング。このラインスト
 * リングは、時間を認識しています。 Z次元は、実際の回転(方角)を
 * 格納するために使用されます。
 */
var positions = new ol.geom.LineString([],
/** ol.geom.LineString
 * Linestring geometry.(ol3 API)
 */
 /** @type {ol.geom.GeometryLayout} */ ('XYZM'));
 /** @type 
  * 値のタイプ(型)の説明 - 式などで表示
  * (@use JSDoc[http://usejsdoc.org/]より)
  */
// Geolocation Control
var geolocation = new ol.Geolocation(/** @type {olx.GeolocationOptions} */ ({
/** 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)
  */
 trackingOptions: {
 /** trackingOptions
  * Tracking options. See http://www.w3.org/TR/
  * geolocation-API/#position_options_interface.(ol3 API)
  */
  maximumAge: 10000,
  /** maximumAge
   * The maximumAge attribute indicates that the application 
   * is willing to accept a cached position whose age is no 
   * greater than the specified time in milliseconds.
   * maximumAge 属性は、アプリケーションが、その寿命をミリ秒単位
   * で指定された時間よりも大きくない、キャッシュされた位置を受け
   * 入れることを示しています。
   * (http://www.w3.org/TR/geolocation-API/
   * #position_options_interface) 
   * (ページ下部も参照してください。)
   */
  enableHighAccuracy: true,
  /** enableHighAccuracy
   * The enableHighAccuracy attribute provides a hint that 
   * the application would like to receive the best possible 
   * results.
   * enableHighAccuracy 属性は、アプリケーションが可能な限り最
   * 高の結果を受信したいというヒントを提供します。 
   * (http://www.w3.org/TR/geolocation-API/
   * #position_options_interface) 
   * (ページ下部も参照してください。)
   */
  timeout: 600000
  /** timeout
   * The timeout attribute denotes the maximum length of time 
   * (expressed in milliseconds) that is allowed to pass from 
   * the call to getCurrentPosition() or watchPosition() 
   * until the corresponding successCallback is invoked. 
   * timeout 属性は、対応する successCallback が呼び出されるま
   * で、getCurrentPosition()もしくは watchPosition()の呼
   * び出しから渡される(ミリ秒単位で表される)時間の最大長さ
   * を示します。(http://www.w3.org/TR/geolocation-API/
   * #position_options_interface) 
   * (ページ下部も参照してください。)
   */
 }
}));
var deltaMean = 500; // the geolocation sampling period mean in ms
// Listen to position changes
geolocation.on('change', function(evt) {
/** on
 * Listen for a certain type of event.
 * あるタイプのイベントをリッスンします。(ol3 API)
 */
 var position = geolocation.getPosition();
 /** getPosition()
  * Get the position of the device.
  * デバイスの位置を取得します。(ol3 API)
  * Returns:      The current position of the device 
  * reported in the current projection.
  */
 var accuracy = geolocation.getAccuracy();
 /** getAccuracy()
  * Get the accuracy of the position in meters.
  * メートル単位で位置の精度を取得します。
  * Return: The accuracy of the position measurement 
  * in meters.(ol3 API)
  */
 var heading = geolocation.getHeading() || 0;
 /** getHeading()
  * Get the heading as radians clockwise from North.
  * 北からラジアン時計回りとして方角を取得します。
  * Return: The heading of the device in radians from 
  * north.(ol3 API)
  */
 var speed = geolocation.getSpeed() || 0;
 /** getSpeed()
  * Get the speed in meters per second.
  * メートル毎秒で速度を取得します。
  * Return: The instantaneous speed of the device in 
  * meters per second.(ol3 API)
  */
 var m = Date.now();
 /** Date.now()
  * UTC(協定世界時)での 1970 年 1 月 1 日 00 時 00 分 00 秒 
  * から現在までの経過ミリ秒を数値で返します。
  * (MDN[https://developer.mozilla.org/ja/docs/Web/
  * JavaScript/Reference/Global_Objects/Date/now])
  */
 addPosition(position, heading, m, speed);
 var coords = positions.getCoordinates();
 /** getCoordinates()
  * Returns: Coordinates.(ol3 API)
  */
 var len = coords.length;
 if (len >= 2) {
  deltaMean = (coords[len - 1][3] - coords[0][3]) / (len - 1);
 }
 var html = [
  'Position: ' + position[0].toFixed(2) + ', ' + position[1].toFixed(2),
  /** Number.prototype.toFixed()
   * The toFixed() method formats a number using fixed-point 
   * notation.
   * toFixed() メソッドは、固定小数点表記を使用して数値をフォー
   * マットします。
   * (MDN[https://developer.mozilla.org/en-US/docs/Web/
   * JavaScript/Reference/Global_Objects/Number/toFixed])
   */
  'Accuracy: ' + accuracy,
  'Heading: ' + Math.round(radToDeg(heading)) + '°',
  /** Math.round()
   * 引数として与えた数を四捨五入して、最も近似の整数を返します。
   * (MDN[https://developer.mozilla.org/ja/docs/Web/
   * JavaScript/Reference/Global_Objects/Math/round])
   */
  'Speed: ' + (speed * 3.6).toFixed(1) + ' km/h',
  'Delta: ' + Math.round(deltaMean) + 'ms'
 ].join('<br />');
 /** Array.join
  * 配列の全ての要素を繋いで文字列にします。
  * (MDN [https://developer.mozilla.org/ja/docs/Web/
  * JavaScript/Reference/Global_Objects/Array/join])
  */
 document.getElementById('info').innerHTML = html;
 /** element.innerHTML
  * innerHTML は、与えられた要素に含まれる全てのマークアップ
  * と内容を設定または取得します。
  * (MDN[https://developer.mozilla.org/ja/docs/Web/
  * API/element.innerHTML])
  */
});
geolocation.on('error', function() {
  alert('geolocation error');
  // FIXME we should remove the coordinates in positions
});
// convert radians to degrees
function radToDeg(rad) {
 return rad * 360 / (Math.PI * 2);
 /** Math.PI()
  * 円周率。約 3.14159 です。
  * (MDN[https://developer.mozilla.org/ja/docs/Web
  * /JavaScript/Reference/Global_Objects/Math/PI])
  */
}
// convert degrees to radians
function degToRad(deg) {
 return deg * Math.PI * 2 / 360;
}
// modulo for negative values
function mod(n) {
 return ((n % (2 * Math.PI)) + (2 * Math.PI)) % (2 * Math.PI);
}
function addPosition(position, heading, m, speed) {
 var x = position[0];
 var y = position[1];
 var fCoords = positions.getCoordinates();
 var previous = fCoords[fCoords.length - 1];
 var prevHeading = previous && previous[2];
 if (prevHeading) {
  var headingDiff = heading - mod(prevHeading);

  // force the rotation change to be less than 180°
  if (Math.abs(headingDiff) > Math.PI) {
  /** Math.abs()
   * 引数として与えた数の絶対値を返します。
   * https://developer.mozilla.org/ja/docs/Web/JavaScript/
   * Reference/Global_Objects/Math/abs
   */
   var sign = (headingDiff >= 0) ? 1 : -1;
   /** 条件演算子 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])
    */
   headingDiff = - sign * (2 * Math.PI - Math.abs(headingDiff));
  }
  heading = prevHeading + headingDiff;
 }
 positions.appendCoordinate([x, y, heading, m]);
 /** appendCoordinate()
  * appendCoordinate(coordinates) [Type: ol.Coordinate, 
  * Description: Coordinate](ol3 API)
  */
 // only keep the 20 last coordinates
 positions.setCoordinates(positions.getCoordinates().slice(-20));
 /** setCoordinates()
  * setCoordinates(coordinates) [Type: ol.Coordinate, 
  * Description: Coordinates](ol3 API)
  */
 /** Array.prototype.slice()
  * The slice() method returns a shallow copy of a portion
  * of an array into a new array object.
  * slice()メソッドは、配列の一部の簡易コピーを新しい配列オブジェ
  * クトに返します。
  * (MDN[https://developer.mozilla.org/ja/docs/Web/
  * JavaScript/Reference/Global_Objects/Array/slice])
  */
 // FIXME use speed instead
 if (heading && speed) {
  // markerEl.src = 'data/geolocation_marker_heading.png';
  markerEl.src = 'v3.4.0/examples/data/geolocation_marker_heading.png';
 } else {
  // markerEl.src = 'data/geolocation_marker.png';
  markerEl.src = 'v3.4.0/examples/data/geolocation_marker.png';
 }
}
var previousM = 0;
// change center and rotation before render
map.beforeRender(function(map, frameState) {
/** beforeRender()
 * Add functions to be called before rendering. 
 * This can be used for attaching animations before 
 * updating the map's view. The ol.animation namespace 
 * provides several static methods for creating 
 * prerender functions.
 * レンダリングの前に呼び出される関数を追加します。これは、
 * マップのビューを更新する前にアニメーションを取り付ける
 * ために使用することができます。 ol.animation名前空間は、
 * 事前レンダリング機能を作成するためのいくつかの静的メソッ
 * ドを提供します。
 * (ol3 API[説明は Stable Only のチェックを外すと表示])
 */
/** frameState
 * olx.FrameState{Object}
 * properties:
 * [Name] -[Type]
 * pixelRatio - number
 * time - number
 * viewState - olx.viewState
 * (ol3 API[説明は Stable Only のチェックを外すと表示])
 */
 if (frameState !== null) {
  // use sampling period to get a smooth transition
  var m = frameState.time - deltaMean * 1.5;
  m = Math.max(m, previousM);
  /** Math.max() 
   * 引数として与えた複数の数の中で最大の数を返します。
   * (MDN [https://developer.mozilla.org/ja/docs/Web/
   * JavaScript/Reference/Global_Objects/Math/max])
   */
  previousM = m;
  // interpolate position along positions LineString
  var c = positions.getCoordinateAtM(m, true);
  /** getCoordinateAtM()
   * Returns the coordinate at m using linear interpolation, 
   * or null if no such coordinate exists.
   * 線形補間を使用する m で座標を、または、そのような座標が存在
   * しない場合は null を返します。(ol3 API)
   */
  var view = frameState.viewState;
  /** viewState
   * olx.viewState
   * properties:
   * [Name] -[Type]
   * center - ol.Coordinate
   * projection - ol.proj.Projection
   * resolution - number
   * rotation - number
   * (ol3 API[説明は Stable Only のチェックを外すと表示])
   */
  if (c) {
   view.center = getCenterWithHeading(c, -c[2], view.resolution);
   view.rotation = -c[2];
   marker.setPosition(c);
   /** setPosition(position)
    * Set the position for this overlay. If the position is 
    * undefined the overlay is hidden.
    * このオーバーレイの位置を設定します。位置が定義されていない
    * 場合、オーバーレイは表示されません。(ol3 API)
    */
  }
 }
 return true; // Force animation to continue
});
/** recenters the view by putting the given coordinates at 
 * 3/4 from the top or the screen
 * 上部、または、スクリーンから4分の3に、与えられた座標を配置
 * することによってビューを中央に再位置づけします。(ol3 API)
 */
function getCenterWithHeading(position, rotation, resolution) {
 var size = map.getSize();
 /** getSize()
  * Get the size of this map.
  * Returns: The size in pixels of the map in the DOM.
  * マップのサイズを取得。(ol3 API)
  */
 var height = size[1];
 return [
  position[0] - Math.sin(rotation) * height * resolution * 1 / 4,
  position[1] + Math.cos(rotation) * height * resolution * 1 / 4
 ];
}
// postcompose callback
function render() {
 map.render();
 /** render()
  * Requests a render frame; rendering will effectively occur
  * at the next browser animation frame.
  * レンダーフレームをを要求します。すなわち、レンダリングは、
  * 次のブラウザのアニメーションフレームで、効果的に発生します。
  * (ol3 API)
  */
}
// geolocate device
var geolocateBtn = document.getElementById('geolocate');
geolocateBtn.addEventListener('click', function() {
/** EventTarget.addEventListener
 * addEventListener は、 1 つのイベントターゲットにイベント 
 * リスナーを1つ登録します。イベントターゲットは、ドキュメント
 * 上の単一のノード、ドキュメント自身、ウィンドウ、あるいは、
 * XMLHttpRequest です。
 *(MDN[https://developer.mozilla.org/ja/docs/Web/API/
 * EventTarget.addEventListener])
 */
 geolocation.setTracking(true); // Start position tracking
 /** setTracking(tracking)
  * Enable or disable tracking of DeviceOrientation events.
  * DeviceOrientation イベントのトラッキングを有効または無効
  * にします。
  * Name: tracking, Type: boolean, Description:
  * The status of tracking changes to alpha, beta and gamma. 
  * If true, changes are tracked and reported immediately.
  * トラッキングのステータスはα、βおよびγに変わります。 true の
  * 場合、変更はすぐにトラッキングされ、報告されます。
  * (ol3 API[説明は Stable Only のチェックを外すと表示])
  */
  map.on('postcompose', render);
  map.render();

  disableButtons();
}, false);
// simulate device move
var simulationData;
// $.getJSON('data/geolocation-orientation.json', function(data) {
$.getJSON('v3.4.0/examples/data/geolocation-orientation.json', function(data) {
/** jQuery.getJSON()
 * Load JSON-encoded data from the server using a GET HTTP 
 * request.
 * GET HTTP リクエストを使用してサーバからの JSON-encoded データ
 * をロードします。
 * (jQuery[http://api.jquery.com/jquery.getjson/])
 */
 simulationData = data.data;
});
var simulateBtn = document.getElementById('simulate');
simulateBtn.addEventListener('click', function() {
 var coordinates = simulationData;
 var first = coordinates.shift();
 /** Array.prototype.shift()
  * 配列から最初の要素を取り除き、その要素を返します。このメソッ
  * ドは配列の長さを変えます。
  * (MDN[https://developer.mozilla.org/ja/docs/Web/
  * JavaScript/Reference/Global_Objects/Array/shift])
  */
 simulatePositionChange(first);

 var prevDate = first.timestamp;
 function geolocate() {
  var position = coordinates.shift();
  if (!position) {
   return;
  }
  var newDate = position.timestamp;
  simulatePositionChange(position);
  window.setTimeout(function() {
  /** setTimeout(func, dylay)
   * 指定された遅延の後に、コードの断片または関数を実行します。
   * func : delay ミリ秒後に実行したい関数。
   * delay : 関数呼び出しを遅延させるミリ秒(1/1000 秒)。
   * (MDN[https://developer.mozilla.org/ja/docs/Web/
   * API/Window/setTimeout])
   */
   prevDate = newDate;
   geolocate();
  }, (newDate - prevDate) / 0.5);
 }
 geolocate();
 map.on('postcompose', render);
 /** postcompose イベント
  * レイヤを描画した後に発生するイベント。
  * (「Layer spy example」参照)
  */
 map.render();

 disableButtons();
}, false);
function simulatePositionChange(position) {
 var coords = position.coords;
 geolocation.set('accuracy', coords.accuracy);
 /** set(key, value)
  * Sets a value.
  * (ol3 API[説明は Stable Only のチェックを外すと表示])
  */
 geolocation.set('heading', degToRad(coords.heading));
 var position_ = [coords.longitude, coords.latitude];
 var projectedPosition = ol.proj.transform(position_, 'EPSG:4326',
  'EPSG:3857');
 geolocation.set('position', projectedPosition);
 geolocation.set('speed', coords.speed);
 geolocation.changed();
 /** changed() 
  * Increases the revision counter and disptches a 'change' 
  * event.
  * リビジョンカウンタを増加し、'change' イベントを送出します。
  * (ol3 API[説明は Stable Only のチェックを外すと表示])
  */
}

function disableButtons() {
 geolocateBtn.disabled = 'disabled';
 simulateBtn.disabled = 'disabled';
}




maximumAge

The maximumAge attribute indicates that the application is willing to accept a cached position whose age is no greater than the specified time in milliseconds. If maximumAge is set to 0, the implementation must immediately attempt to acquire a new position object. Setting the maximumAge to Infinity must determine the implementation to return a cached position regardless of its age. If an implementation does not have a cached position available whose age is no greater than the specified maximumAge, then it must acquire a new position object. In case of a watchPosition(), the maximumAge refers to the first position object returned by the implementation.

maximumAge 属性は、アプリケーションが、その寿命をミリ秒単位で指定された時間よりも大きくない、キャッシュされた位置を受け入れることを示しています。maximumAge を 0 に設定した場合、実装は直ちに新しい位置オブジェクトを取得しなければならなりません。maximumAge を Infinity に設定することは、その寿命に関係なく、キャッシュされた位置を返すように実装を決定するしなければならなりません。実装が、指定された maximumAge より大きくない寿命の利用可能なキャッシュされた位置を持っていない場合、それは新しい位置オブジェクトを取得しなければならなりません。 watchPosition()の場合は、maximumAge は、実装によって返される最初の位置オブジェクトを参照します。


enableHighAccuracy

The enableHighAccuracy attribute provides a hint that the application would like to receive the best possible results. This may result in slower response times or increased power consumption. The user might also deny this capability, or the device might not be able to provide more accurate results than if the flag wasn't specified. The intended purpose of this attribute is to allow applications to inform the implementation that they do not require high accuracy geolocation fixes and, therefore, the implementation can avoid using geolocation providers that consume a significant amount of power (e.g. GPS). This is especially useful for applications running on battery-powered devices, such as mobile phones.

enableHighAccuracy 属性は、アプリケーションが可能な限り最高の結果を受信したいというヒントを提供します。これは、遅い応答時間や消費電力の増大をもたらします。フラグが指定されていない場合、ユーザーがこの能力を否定するか、または、デバイスがより正確な結果を提供することができない場合があります。この属性の本来の目的は、アプリケーションが、高精度な位置情報の修正を必要としない実装、したがって、実装がかなりの量の電力(例えば、GPS)を消費するジオロケーションプロバイダの使用を避けることができる、を通知できるようにすることです。これは携帯電話などのバッテリ駆動デバイス上で実行されるアプリケーションのために特に有用です。


timeout

The timeout attribute denotes the maximum length of time (expressed in milliseconds) that is allowed to pass from the call to getCurrentPosition() or watchPosition() until the corresponding successCallback is invoked. If the implementation is unable to successfully acquire a new Position before the given timeout elapses, and no other errors have occurred in this interval, then the corresponding errorCallback must be invoked with a PositionError object whose code attribute is set to TIMEOUT. Note that the time that is spent obtaining the user permission is not included in the period covered by the timeout attribute. The timeout attribute only applies to the location acquisition operation.

timeout 属性は、対応する successCallback が呼び出されるまで、getCurrentPosition()もしくは watchPosition()の呼び出しから渡される(ミリ秒単位で表される)時間の最大長さを示します。実装が、与えられた timeout が経過する前に新しい Position を取得することができず、他のエラーがこの間隔で発生していない場合は、対応する errorCallback は、コード属性が TIMEOUT に設定されている PositionError オブジェクトで呼び出されなければなりません。ユーザー権限の取得に費やされる時間は timeout 属性の対象期間に含まれないことに注意してください。timeout 属性は、位置取得動作に適用されるだけです。


disabled Type: boolean

Indicates whether the element is disabled or not. If this attribute is set to true the element is disabled. Disabled elements are usually drawn with grayed-out text. If the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire. The element will, however, still respond to mouse events. To enable the element, leave this attribute out entirely as opposed to setting the value to false. Visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state.

要素が無効化されているかどうかを示します。この属性が true に設定されている場合は要素が無効になっています。無効化された要素は通常グレイ表示のテキストで描画されています。要素が無効になっている場合は、ユーザのアクションには応答せず、フォーカスが当てられず、コマンドイベントは発生しません。 要素は、しかしながら、まだマウスイベントに応答します。要素を有効にするには、値をfalseに設定することとは対照的に、完全にこの属性を削除します。 表示されるコントロールは、メニューおよびメニュー項目を除いて、追加の状態を更新する必要があるために、通常は属性に使用される disabled 属性を有します。

2 - ol3.4ex 116a - Geolocation tracking with orientation example 1

「Geolocation tracking with orientation example (geolocation-orientation.html)」を参考に地図を表示してみます。

HTML ファイルの作成
a Eclipse のメニューの「ファイル」->「ファイルを開く」をクリックします。





b 「ファイルを開く」ウィンドウで、「user」->「mapsite」->「ol3proj」->「v3.4.0」->「examples」->「geolocation-orientation.html」をクリックして選択し、「OK」ボタンをクリックします。
同じように「geolocation-orientation.js」を開きます。





c メニューの「ファイル」->「新規」 -> 「ファイル」をクリックします。



d 「ファイル」ウィンドウで「ol3proj」をクリックして選択し、「ファイル名」を「2116-ol3ex.html」と入力し、「次へ」ボタンをクリックします。








e 「File Template」ウィンドウで「HTML 5 Template」をクリックして選択し、「OK」ボタンをクリックします。











f 「geolocation-orientation.html」の内容をコピーして「2116-ol3ex.html」に貼り付け、修正します。
g 同じように、新規に「2116-ol3ex.js」ファイルを作成し、「File Template」ウィンドウで「JavaScript Template」をクリックして選択し、「完了」ボタンをクリックして、「geolocation-orientation.js」の内容をコピーして貼り付け、修正します。「geolocation-orientation-require.js」も「2116-ol3ex-require.js」に貼り付けます。

「2116-ol3ex.html」
<!doctype html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="chrome=1">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
  <!--
  <link rel="stylesheet" href="../css/ol.css" type="text/css">
  <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
  <link rel="stylesheet" href="../resources/layout.css" type="text/css">
  <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
  -->
  <!-- ディレクトリ修正 -->
  <link rel="stylesheet" href="v3.4.0/css/ol.css" type="text/css">
  <link rel="stylesheet" href="v3.4.0/resources/bootstrap/css/bootstrap.min.css" type="text/css">
  <link rel="stylesheet" href="v3.4.0/resources/layout.css" type="text/css">
  <link rel="stylesheet" href="v3.4.0/resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
  <title>Mobile Geolocation Tracking with Orientation</title>
  <style type="text/css">
   html, body, .map {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
   }
   #info {
    position: absolute;
    font-size: 0.7em;
    top: 10px;
    right: 10px;
    background-color: lightgrey;
    padding: 4px;
   }
   .button {
    position: absolute;
    bottom: 40px;
    left: 10px;
   }
  </style>
 </head>
 <body>
  <div id="map" class="map"></div>
  <div id="info"></div>
  <img id="geolocation_marker" src="data/geolocation_marker.png" />
  <div class="button">
   <button id="geolocate">Geolocate Me!</button>
   <button id="simulate">Simulate</button>
  </div>
  <!--
  <script src="../resources/jquery.min.js" type="text/javascript"></script>
  <script src="../resources/example-behaviour.js" type="text/javascript"></script>
  -->
  <!-- ディレクトリ修正
   jQuery Minified版と
   example-behaviour.js(Examples用 JSコード[文字コードなど])
 -->
  <script src="v3.4.0/resources/jquery.min.js" type="text/javascript"></script>
  <script src="v3.4.0/resources/example-behaviour.js" type="text/javascript"></script>
  <!--
  <script src="loader.js?id=geolocation-orientation" type="text/javascript"></script>
  -->
  <!-- ファイル修正 -->  <!-- ディレクトリ修正 -->
  <script src="loader.js?id=2116-ol3ex" type="text/javascript"></script>
  <div style="display: none;">
   <div id="title">Geolocation tracking with orientation example</div>
   <div id="shortdesc">Example of a geolocated and oriented map.</div>
   <div id="tags">fullscreen, geolocation, orientation, mobile</div>
  </div>
  </body>
</html>

2 - ol3.4ex 115b - Device orientation example 2

「device-orientation.js(2115-ol3ex.js)」は、マップを表示するための JavaScript ファイルです。

「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.
デバイスの方位はを3つの角度 - アルファ、ベータ、およびガンマ(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つの角度は、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 仕様は、アルファ、ベータおよびガンマは度数であることを示していることに注意することが重要です。

2 - ol3.4ex 115a - Device orientation example 1

「Device orientation example (device-orientation.html)」を参考に地図を表示してみます。

HTML ファイルの作成
a Eclipse のメニューの「ファイル」->「ファイルを開く」をクリックします。





b 「ファイルを開く」ウィンドウで、「user」->「mapsite」->「ol3proj」->「v3.4.0」->「examples」->「device-orientation.html」をクリックして選択し、「OK」ボタンをクリックします。
同じように「device-orientation.js」を開きます。





c メニューの「ファイル」->「新規」 -> 「ファイル」をクリックします。



d 「ファイル」ウィンドウで「ol3proj」をクリックして選択し、「ファイル名」を「2115-ol3ex.html」と入力し、「次へ」ボタンをクリックします。








e 「File Template」ウィンドウで「HTML 5 Template」をクリックして選択し、「OK」ボタンをクリックします。











f 「device-orientation.html」の内容をコピーして「2115-ol3ex.html」に貼り付け、修正します。
g 同じように、新規に「2115-ol3ex.js」ファイルを作成し、「File Template」ウィンドウで「JavaScript Template」をクリックして選択し、「完了」ボタンをクリックして、「device-orientation.js」の内容をコピーして貼り付け、修正します。「device-orientation-require.js」も「2115-ol3ex-require.js」に貼り付けます。

「2115-ol3ex.html」
<!doctype html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="chrome=1">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
  <!--
  <link rel="stylesheet" href="../css/ol.css" type="text/css">
  <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
  <link rel="stylesheet" href="../resources/layout.css" type="text/css">
  <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
  -->
  <!-- ディレクトリ修正 -->
  <link rel="stylesheet" href="v3.4.0/css/ol.css" type="text/css">
  <link rel="stylesheet" href="v3.4.0/resources/bootstrap/css/bootstrap.min.css" type="text/css">
  <link rel="stylesheet" href="v3.4.0/resources/layout.css" type="text/css">
  <link rel="stylesheet" href="v3.4.0/resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
  <title>Device-Orientation example</title>
 </head>
 <body>
  <!-- 
  bootstrap.min.css, bootstrap-responsive.min.css 
   Examples用 CSSファイルで設定されたセレクタを使用。
  -->
  <div class="navbar navbar-inverse navbar-fixed-top">
   <div class="navbar-inner">
    <div class="container">
     <!--
     <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
     -->
     <!-- ディレクトリ修正 -->
     <a class="brand" href="v3.4.0/examples/"><img src="v3.4.0/resources/logo.png"> OpenLayers 3 Examples</a>
    </div>
   </div>
  </div>
  <div class="container-fluid">
   <div class="row-fluid">
    <div class="span12">
     <div id="map" class="map"></div>
    </div>
   </div>
   <div class="row-fluid">
    <div class="span12">0
     <h4 id="title">Device-Orientation example</h4>
     <label class="checkbox" for="track">
      <input id="track" type="checkbox"/>track position
     </label>
     <p>&alpha; : <code id="alpha"></code></p>
     <p>&beta; : <code id="beta"></code></p>
     <p>&gamma; : <code id="gamma"></code></p>
     <p>heading : <code id="heading"></code></p>
      <p id="shortdesc">Listen to DeviceOrientation events</p>
     <div id="docs">
      <!--
      <p>See the <a href="device-orientation.js" target="_blank">device-orientation.js source</a> to see how this is done.</p>
      -->
      <!-- ファイル修正 -->
      <p>See the <a href="2115-ol3ex.js" target="_blank">2115-ol3ex.js source</a> to see how this is done.</p>
     </div>
     <div id="tags">orientation, openstreetmap</div>
    </div>
   </div>
  </div>
  <!--
  <script src="../resources/jquery.min.js" type="text/javascript"></script>
  <script src="../resources/example-behaviour.js" type="text/javascript"></script>
  -->
  <!-- ディレクトリ修正
   jQuery Minified版と
   example-behaviour.js(Examples用 JSコード[文字コードなど])
 -->
  <script src="v3.4.0/resources/jquery.min.js" type="text/javascript"></script>
  <script src="v3.4.0/resources/example-behaviour.js" type="text/javascript"></script>
  <!--
  <script src="loader.js?id=device-orientation" type="text/javascript"></script>
  -->
  <!-- ファイル修正 -->  <!-- ディレクトリ修正 -->
  <script src="loader.js?id=2115-ol3ex" type="text/javascript"></script>
  </body>
</html>

2 - ol3.4ex 114b - Geolocation example 2

「geolocation.js(2114-ol3ex.js)」は、マップを表示するための JavaScript ファイルです。

「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]
});


2 - ol3.4ex 114a - Geolocation example 1

「Geolocation example (geolocation.html)」を参考に地図を表示してみます。

HTML ファイルの作成
a Eclipse のメニューの「ファイル」->「ファイルを開く」をクリックします。





b 「ファイルを開く」ウィンドウで、「user」->「mapsite」->「ol3proj」->「v3.4.0」->「examples」->「geolocation.html」をクリックして選択し、「OK」ボタンをクリックします。
同じように「geolocation.js」を開きます。





c メニューの「ファイル」->「新規」 -> 「ファイル」をクリックします。



d 「ファイル」ウィンドウで「ol3proj」をクリックして選択し、「ファイル名」を「2114-ol3ex.html」と入力し、「次へ」ボタンをクリックします。








e 「File Template」ウィンドウで「HTML 5 Template」をクリックして選択し、「OK」ボタンをクリックします。











f 「geolocation.html」の内容をコピーして「2114-ol3ex.html」に貼り付け、修正します。
g 同じように、新規に「2114-ol3ex.js」ファイルを作成し、「File Template」ウィンドウで「JavaScript Template」をクリックして選択し、「完了」ボタンをクリックして、「geolocation.js」の内容をコピーして貼り付け、修正します。「geolocation-require.js」も「2114-ol3ex-require.js」に貼り付けます。

「2114-ol3ex.html」
<!doctype html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="chrome=1">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
  <!--
  <link rel="stylesheet" href="../css/ol.css" type="text/css">
  <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
  <link rel="stylesheet" href="../resources/layout.css" type="text/css">
  <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
  -->
  <!-- ディレクトリ修正 -->
  <link rel="stylesheet" href="v3.4.0/css/ol.css" type="text/css">
  <link rel="stylesheet" href="v3.4.0/resources/bootstrap/css/bootstrap.min.css" type="text/css">
  <link rel="stylesheet" href="v3.4.0/resources/layout.css" type="text/css">
  <link rel="stylesheet" href="v3.4.0/resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
  <title>Geolocation example</title>
 </head>
 <body>
  <!-- 
  bootstrap.min.css, bootstrap-responsive.min.css 
   Examples用 CSSファイルで設定されたセレクタを使用。
  -->
  <div class="navbar navbar-inverse navbar-fixed-top">
   <div class="navbar-inner">
    <div class="container">
     <!--
     <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
     -->
     <!-- ディレクトリ修正 -->
     <a class="brand" href="v3.4.0/examples/"><img src="v3.4.0/resources/logo.png"> OpenLayers 3 Examples</a>
    </div>
   </div>
  </div>
  <div class="container-fluid">
   <div class="row-fluid">
    <div class="span12">
     <div id="map" class="map"></div>
    </div>
   </div>
   <div class="row-fluid">
    <div class="span12">0
     <h4 id="title">Geolocation example</h4>
     <label class="checkbox" for="track">
      <input id="track" type="checkbox"/>track position
     </label>
     <p>position accuracy : <code id="accuracy"></code></p>
     <p>altitude : <code id="altitude"></code></p>
     <p>altitude accuracy : <code id="altitudeAccuracy"></code></p>
     <p>heading : <code id="heading"></code></p>
     <p>speed : <code id="speed"></code></p>
      <p id="shortdesc">Example of a geolocation map.</p>
     <div id="docs">
      <!--
      <p>See the <a href="geolocation.js" target="_blank">geolocation.js source</a> to see how this is done.</p>
      -->
      <!-- ファイル修正 -->
      <p>See the <a href="2114-ol3ex.js" target="_blank">2114-ol3ex.js source</a> to see how this is done.</p>
     </div>
     <div id="tags">geolocation, openstreetmap</div>
    </div>
    <div class="span4 pull-right">
     <div id="info" class="alert alert-error" style="display: none;">
     </div>
    </div>
   </div>
  </div>
  <!--
  <script src="../resources/jquery.min.js" type="text/javascript"></script>
  <script src="../resources/example-behaviour.js" type="text/javascript"></script>
  -->
  <!-- ディレクトリ修正
   jQuery Minified版と
   example-behaviour.js(Examples用 JSコード[文字コードなど])
 -->
  <script src="v3.4.0/resources/jquery.min.js" type="text/javascript"></script>
  <script src="v3.4.0/resources/example-behaviour.js" type="text/javascript"></script>
  <!--
  <script src="loader.js?id=geolocation" type="text/javascript"></script>
  -->
  <!-- ファイル修正 -->  <!-- ディレクトリ修正 -->
  <script src="loader.js?id=2114-ol3ex" type="text/javascript"></script>
  </body>
</html>

2015年4月13日月曜日

2 - ol3.4ex 113b - Mobile full screen example 2

「mobile-full-screen.js(2113-ol3ex.js)」は、マップを表示するための JavaScript ファイルです。

「2113-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.BingMaps({
   /** ol.source.BingMaps
    * Layer source for Bing Maps tile data.
    * Bing Maps タイルデータのレイヤソース。(ol3 API)
    */
    key: 'Ak-dzM4w...(省略)',
    imagerySet: 'Road'
   })
  })
 ],
 renderer: exampleNS.getRendererFromQueryString(),
 // 'example-behavior.js' により URL にある renderer を返します
 target: 'map',
 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)
  */
 tracking: true
 /** tracking
  * Start Tracking. Default is false.
  * トラッキングを始めます。デフォルトは false。(ol3 API)
  */
});
geolocation.once('change:position', function() {
/** once()
 * Listen once for a certain type of event.
 * あるタイプのイヴェントを1回リッスンします。
 * Return: Unigue key for the listener.(ol3 API)
 */
 view.setCenter(geolocation.getPosition());
 /** setCenter()
  * Set the center of the current view.
  * 現在のビューの中心を設定します。(ol3 API)
  */
 /** getPosition()
  * Get the position of the device.
  * デバイスの位置を取得します。(ol3 API)
  * Returns:      The current position of the device 
  * reported in the current projection.
  */
 view.setResolution(2.388657133911758);
 /** setResolution(resolution)
  * Set the resolution for this view.
  * ビューの解像度を設定します。(ol3 API)
  */
});
** Use FastClick to eliminate the 300ms delay between a 
 * physical tap and the firing of a click event on mobile 
 * browsers. See http://updates.html5rocks.com/2013/12/
 * 300ms-tap-delay-gone-away for more information.
 * 物理的なタップとモバイルブラウザ上のクリックイベントの発生の
 * 間の 300ms の遅延を解消する FastClick を使用してください。
 * 詳細については、http://updates.html5rocks.com/2013/12/
 * 300ms-tap-delay-gone-away を参照してください。
 */
$(function() {
 FastClick.attach(document.body);
 /** body に FastClick をインスタンス化する
  * FastClick の 「Usage」
  * https://github.com/ftlabs/fastclick#usage
  * を参照してください。
  */
});


2 - ol3.4ex 113a - Mobile full screen example 1

「Mobile full screen example (mobile-full-screen.html)」を参考に地図を表示してみます。

HTML ファイルの作成
a Eclipse のメニューの「ファイル」->「ファイルを開く」をクリックします。





b 「ファイルを開く」ウィンドウで、「user」->「mapsite」->「ol3proj」->「v3.4.0」->「examples」->「mobile-full-screen.html」をクリックして選択し、「OK」ボタンをクリックします。
同じように「mobile-full-screen.js」を開きます。





c メニューの「ファイル」->「新規」 -> 「ファイル」をクリックします。



d 「ファイル」ウィンドウで「ol3proj」をクリックして選択し、「ファイル名」を「2113-ol3ex.html」と入力し、「次へ」ボタンをクリックします。








e 「File Template」ウィンドウで「HTML 5 Template」をクリックして選択し、「OK」ボタンをクリックします。











f 「mobile-full-screen.html」の内容をコピーして「2113-ol3ex.html」に貼り付け、修正します。
g 同じように、新規に「2113-ol3ex.js」ファイルを作成し、「File Template」ウィンドウで「JavaScript Template」をクリックして選択し、「完了」ボタンをクリックして、「mobile-full-screen.js」の内容をコピーして貼り付け、修正します。「mobile-full-screen-require.js」も「2113-ol3ex-require.js」に貼り付けます。

「2113-ol3ex.html」
<!doctype html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="chrome=1">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
  <title>Mobile full screen example</title>
  <style type="text/css">
   html, body, .map {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
   }
  </style>
 </head>
 <body>
  <div id="map" class="map"></div>
  <!--
  <script src="../resources/jquery.min.js" type="text/javascript"></script>
  <script src="../resources/example-behaviour.js" type="text/javascript"></script>
  -->
  <!-- ディレクトリ修正
   jQuery Minified版と
   example-behaviour.js(Examples用 JSコード[文字コードなど])
  -->
  <script src="v3.4.0/resources/jquery.min.js" type="text/javascript"></script>
  <script src="v3.4.0/resources/example-behaviour.js" type="text/javascript"></script>
  <!--
  <script src="loader.js?id=mobile-full-screen" type="text/javascript"></script>
  -->
  <!-- ファイル修正 -->  <!-- ディレクトリ修正 -->
  <script src="loader.js?id=2113-ol3ex" type="text/javascript"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.3/fastclick.js" type="text/javascript"></script>
  <div style="display: none;">
   <h4 id="title">Mobile full screen example</h4>
   <p id="shortdesc">Example of a full screen map.</p>
   <div id="tags">fullscreen, bing, geolocation, mobile</div>
  </div>
 </body>
</html>


FastClick
https://github.com/ftlabs/fastclick

FastClick is a simple, easy-to-use library for eliminating the 300ms delay between a physical tap and the firing of a click event on mobile browsers. The aim is to make your application feel less laggy and more responsive while avoiding any interference with your current logic.
FastClick is developed by FT Labs, part of the Financial Times.

FastClick は、モバイルブラウザ上で物理的なタップとクリックイベントの発生の間の300msの遅延を解消するためのシンプルで使いやすいライブラリです。目的は、現在のロジックとの干渉を回避しながら、アプリケーションが少ないラグと高い応答性を感じるようにすることです。
FastClickは、FT研究所、フィナンシャル·タイムズの一部によって開発されています。

2 - ol3.4ex 112b - Tiled WMS with custom projection example 2

「wms-custom-proj.js(2112-ol3ex.js)」は、マップを表示するための JavaScript ファイルです。

「2112-ol3ex.js」
/** By default OpenLayers does not know about the EPSG:21781 
 * (Swiss) projection. So we create a projection instance 
 * for EPSG:21781 and pass it to ol.proj.addProjection to 
 * make it available to the library for lookup by its code.
 * デフォルトで、OpenLayersは EPSG:21781(スイス)投影につい
 * てわかりません。そのため、EPSG:21781 投影インスタンスを作
 * 成し、そのコードによる検索のためのライブラリが利用できるよ
 * うにするために old.proj.addProjection にそれを渡します。
 */
var projection = new ol.proj.Projection({
/** ol.proj.Projection
 * Projection definition class. One of these is created 
 * for each projection supported in the application and 
 * stored in the ol.proj namespace. You can use these in 
 * applications, but this is not required, as API params 
 * and options use ol.proj.ProjectionLike which means the 
 * simple string code will suffice.
 * 投影定義クラス。これらの一つは、アプリケーションでサポートさ
 * れ、ol.proj名前空間に格納されている各投影に対して作成されま
 * す。アプリケーションでこれらを使用することができますが、API 
 * のパラメータとオプションは、単純な文字列コードが有能であるこ
 * とを意味する ol.proj.ProjectionLike を使用するので、これは
 * 必要ありません。(ol3 API)
 */
 code: 'EPSG:21781',
 /** The extent is used to determine zoom level 0. 
  * Recommended values for a projection's validity extent 
  * can be found at http://epsg.io/.
  * 範囲は、ズームレベル 0 を決定するために使用されます。投
  * 影の有効範囲の推奨値は、http://epsg.io/ で見つけること
  * ができます。
  */
 /** code
  * The SRS identifier code, e.g. EPSG:4326.(ol3 API)
  */
 extent: [485869.5728, 76443.1884, 837076.5648, 299941.7864],
 units: 'm'
 /** units
  * Units. Required unless a proj4 projection is defined 
  * for code.
  * units。もし、proj4 プロジェクションがコードとして定義され
  * ていなければ必要です。(ol3 API)
  */
});
ol.proj.addProjection(projection);
/** ol.proj.addProjection(projection)
 * Add a Projection object to the list of supported 
 * projections that can be looked up by their code.
 * コードによって検索することができるサポートされた投影のリ
 * ストに投影オブジェクトを追加します。(ol3 API)
 */
/** We also declare EPSG:21781/EPSG:4326 transform 
 * functions. These functions are necessary for the 
 * ScaleLine control and when calling 
 * ol.proj.transform for setting the view's initial 
 * center (see below).
 * EPSG:21781/ EPSG:4326 変換関数を同じように宣言します。
 * これらの関数は、ScaleLine コントロールと、ビューの初期
 * の中心を設定する ol.proj.transform 呼び出すときに必要
 * です(下記参照)。
 */
ol.proj.addCoordinateTransforms('EPSG:4326', projection,
/** ol.proj.addCoordinateTransforms(source, destination, 
 * forward, inverse)
 * Registers coordinate transform functions to convert 
 * coordinates between the source projection and the 
 * destination projection. The forward and inverse 
 * functions convert coordinate pairs; this function 
 * converts these into the functions used internally 
 * which also handle extents and coordinate arrays.
 * ソース投影と送信先投影との間で座標を変換するため関数を座標
 * 変換を登録します。順方向と逆方向の関数は、座標対を変換しま
 * す。この関数は、これらを範囲と座標配列も処理する内部的に使
 * 用される関数に変換します。(ol3 API)
 */
 function(coordinate) {
  return [
   WGStoCHy(coordinate[1], coordinate[0]),
   WGStoCHx(coordinate[1], coordinate[0])
  ];
 },
 function(coordinate) {
  return [
   CHtoWGSlng(coordinate[0], coordinate[1]),
   CHtoWGSlat(coordinate[0], coordinate[1])
  ];
});
var extent = [420000, 30000, 900000, 350000];
var layers = [
 new ol.layer.Tile({
  extent: extent,
  source: new ol.source.TileWMS({
  /** ol.source.TileWMS
   * Layer source for tile data from WMS servers.
   * WMS サーバからのタイルデータのレイヤソース。
   * (ol3 API)
   */
   url: 'http://wms.geo.admin.ch/',
   crossOrigin: 'anonymous',
   /** crossOrigin
    * The crossOrigin attribute for loaded images. Note 
    * that you must provide a crossOrigin value if you 
    * are using the WebGL renderer or if you want to 
    * access pixel data with the Canvas renderer. See 
    * https://developer.mozilla.org/en-US/docs/Web/HTML/
    * CORS_enabled_image for more detail.
    * ロードされたイメージの crossOrigin属性。WebGLのレンダ
    * ラーを使用している場合、または、キャンバスレンダラでピ
    * クセルデータにアクセスする場合、crossOrigin 値を提供な
    * ければならないことに注意してください。詳細は 
    * https://developer.mozilla.org/en-US/docs/Web/HTML/
    * CORS_enabled_image を参照してください。(ol3 API)
    */
   attributions: [new ol.Attribution({
   /** ol.Attribution
    * An attribution for a layer source.
    * レイヤソースの属性(ol3 API)
    */
   html: '&copy; ' +
    '<a href="http://www.geo.admin.ch/internet/geoportal/' +
    'en/home.html">' +
    'Pixelmap 1:1000000 / geo.admin.ch</a>'
   })],
   params: {
    'LAYERS': 'ch.swisstopo.pixelkarte-farbe-pk1000.noscale',
    'FORMAT': 'image/jpeg'
   },
   serverType: 'mapserver'
  })
 }),
 new ol.layer.Tile({
  extent: extent,
  source: new ol.source.TileWMS({
   url: 'http://wms.geo.admin.ch/',
   crossOrigin: 'anonymous',
   attributions: [new ol.Attribution({
    html: '&copy; ' +
     '<a href="http://www.geo.admin.ch/internet/geoportal/' +
     'en/home.html">' +
     'National parks / geo.admin.ch</a>'
   })],
   params: {'LAYERS': 'ch.bafu.schutzgebiete-paerke_nationaler_bedeutung'},
   serverType: 'mapserver'
  })
 })
];
var map = new ol.Map({
 controls: ol.control.defaults().extend([
 /** 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
  */
  new ol.control.ScaleLine({
  /** ol.control.ScaleLine
   * A control displaying rough x-axis distances, calculated 
   * for the center of the viewport. No scale line will be 
   * shown when the x-axis distance cannot be calculated in 
   * the view projection (e.g. at or beyond the poles in 
   * EPSG:4326). By default the scale line will show in the 
   * bottom left portion of the map, but this can be changed 
   * by using the css selector .ol-scale-line.
   * 粗いx軸の距離を表示するコントロール、ビューポートの中心に
   * 対して計算します。 x軸距離がビュー投影(例えば、
   * EPSG:4326 の極で、または、超えて)で計算することができ
   * ないときにスケールラインは表示されません。デフォルトでは、
   * スケールラインがマップの左下部分に表示されますが、これは 
   * CSSセレクタ .ol-scale-line を使用して変更することが
   * できます。(ol3 API)
   */
   units: 'metric'
  })
 ]),
 layers: layers,
 renderer: exampleNS.getRendererFromQueryString(),
 // 'example-behavior.js' により URL にある renderer を返します
 target: 'map',
 view: new ol.View({
  projection: projection,
  center: ol.proj.transform([8.23, 46.86], 'EPSG:4326', 'EPSG:21781'),
  extent: extent,
  zoom: 2
 })
});
/*
 * Swiss projection transform functions downloaded from
 * http://www.swisstopo.admin.ch/internet/swisstopo/en/home/
 * products/software/products/skripts.html
 * (上記サイトに JavaScript のコードファイルがあります。説明が
 * 次のようにあります。
 * Scripts for WGS84-LV03
 * swisstopo created some script examples allowing to 
 * calculate the Swiss projection. This allows you to 
 * convert WGS84 coordinates to CH1903/LV03 or vice versa.
 * swisstopo は、スイスの投影法を計算するいくつかのスクリプトサ
 * ンプルを作成しました。これは、WGS84 座標を CH1903/LV03 へ、
 * または、その逆に変換します。)
 */
// Convert WGS lat/long (° dec) to CH y
function WGStoCHy(lat, lng) {

 // Converts degrees dec to sex
 lat = DECtoSEX(lat);
 lng = DECtoSEX(lng);

 // Converts degrees to seconds (sex)
 lat = DEGtoSEC(lat);
 lng = DEGtoSEC(lng);

 // Axiliary values (% Bern)
 var lat_aux = (lat - 169028.66) / 10000;
 var lng_aux = (lng - 26782.5) / 10000;

 // Process Y
 var y = 600072.37 +
  211455.93 * lng_aux -
  10938.51 * lng_aux * lat_aux -
  0.36 * lng_aux * Math.pow(lat_aux, 2) -
  44.54 * Math.pow(lng_aux, 3);

 return y;
}

// Convert WGS lat/long (° dec) to CH x
function WGStoCHx(lat, lng) {

 // Converts degrees dec to sex
 lat = DECtoSEX(lat);
 lng = DECtoSEX(lng);

 // Converts degrees to seconds (sex)
 lat = DEGtoSEC(lat);
 lng = DEGtoSEC(lng);

 // Axiliary values (% Bern)
 var lat_aux = (lat - 169028.66) / 10000;
 var lng_aux = (lng - 26782.5) / 10000;

 // Process X
 var x = 200147.07 +
  308807.95 * lat_aux +
  3745.25 * Math.pow(lng_aux, 2) +
  76.63 * Math.pow(lat_aux, 2) -
  194.56 * Math.pow(lng_aux, 2) * lat_aux +
  119.79 * Math.pow(lat_aux, 3);

 return x;

}


// Convert CH y/x to WGS lat
function CHtoWGSlat(y, x) {

 // Converts militar to civil and  to unit = 1000km
 // Axiliary values (% Bern)
 var y_aux = (y - 600000) / 1000000;
 var x_aux = (x - 200000) / 1000000;

 // Process lat
 var lat = 16.9023892 +
  3.238272 * x_aux -
  0.270978 * Math.pow(y_aux, 2) -
  0.002528 * Math.pow(x_aux, 2) -
  0.0447 * Math.pow(y_aux, 2) * x_aux -
  0.0140 * Math.pow(x_aux, 3);

 // Unit 10000" to 1 " and converts seconds to degrees (dec)
 lat = lat * 100 / 36;

 return lat;

}

// Convert CH y/x to WGS long
function CHtoWGSlng(y, x) {

 // Converts militar to civil and  to unit = 1000km
 // Axiliary values (% Bern)
 var y_aux = (y - 600000) / 1000000;
 var x_aux = (x - 200000) / 1000000;

 // Process long
 var lng = 2.6779094 +
  4.728982 * y_aux +
  0.791484 * y_aux * x_aux +
  0.1306 * y_aux * Math.pow(x_aux, 2) -
  0.0436 * Math.pow(y_aux, 3);

 // Unit 10000" to 1 " and converts seconds to degrees (dec)
 lng = lng * 100 / 36;

 return lng;

}


// Convert SEX DMS angle to DEC
function SEXtoDEC(angle) {

 // Extract DMS
 var deg = parseInt(angle, 10);
 var min = parseInt((angle - deg) * 100, 10);
 var sec = (((angle - deg) * 100) - min) * 100;

 // Result in degrees sex (dd.mmss)
 return deg + (sec / 60 + min) / 60;

}

// Convert DEC angle to SEX DMS
function DECtoSEX(angle) {

 // Extract DMS
 var deg = parseInt(angle, 10);
 var min = parseInt((angle - deg) * 60, 10);
 var sec = (((angle - deg) * 60) - min) * 60;

 // Result in degrees sex (dd.mmss)
 return deg + min / 100 + sec / 10000;

}

// Convert Degrees angle to seconds
function DEGtoSEC(angle) {

 // Extract DMS
 var deg = parseInt(angle, 10);
 var min = parseInt((angle - deg) * 100, 10);
 var sec = (((angle - deg) * 100) - min) * 100;

 // Avoid rounding problems with seconds=0
 var parts = String(angle).split('.');
 if (parts.length == 2 && parts[1].length == 2) {
  min = Number(parts[1]);
  sec = 0;
 }

 // Result in degrees sex (dd.mmss)
 return sec + min * 60 + deg * 3600;

}