IGCは、グライダーやパラグライダーの３次元のトラッキングに使われ、Andoroid アプリには、「IGC Tacker」などがあります。
IGC ファイルフォーマットについては、
「IGC FILE FORMAT REFERENCE AND DEVELOPERS' GUIDE - Ian Forster-Lewis（http://carrier.csi.cam.ac.uk/forsterlewis/soaring/igc_file_format/igc_format_2008.html）」などを参照してください。
「Clement-Latour.igc」の内容
AXGD123 6030 SN07172 SW3.32 HFDTE190411 HOPLTPILOT: Clement Latour HOGTYGLIDERTYPE: R10.2 HOGIDGLIDERID: None HODTM100GPSDATUM: WGS-84 HOCIDCOMPETITIONID: HOCCLCOMPETITION CLASS: None HOSITSite: Marlens B0853524556201N00651065EA0200502041
---
「236-ol3ex.js」の内容
var colors = {
'Clement Latour': 'rgba(0, 0, 255, 0.7)',
'Damien de Baesnt': 'rgba(0, 215, 255, 0.7)',
'Sylvain Dhonneur': 'rgba(0, 165, 255, 0.7)',
'Tom Payne': 'rgba(0, 255, 255, 0.7)',
'Ulrich Prinz': 'rgba(0, 215, 255, 0.7)'
};
var styleCache = {};
var styleFunction = function(feature, resolution) {
var color = colors[feature.get('PLT')];
/** get(key)
* Gets a value.
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
var styleArray = styleCache[color];
if (!styleArray) {
styleArray = [new ol.style.Style({
/** ol.style.Style
* Base class for vector feature rendering styles.
* ベクタフィーチャがスタイルを描画するための基本クラス。
* （ol3 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機能は、オプションで入力されたものはすべて返します。
* それらはデフォルトを返しません。（ol3 API）
*/
color: color, width: 3 }) })]; styleCache[color] = styleArray; } return styleArray; };
var vectorSource = new ol.source.IGC({
/** ol.source.IGC
* Static vector source in IGC format
* IGCフォーマットの静的ベクトルソース。（ol3 API）
*/
projection: 'EPSG:3857', urls: [ 'v3.0.0/examples/data/igc/Clement-Latour.igc', // 修正 'v3.0.0/examples/data/igc/Damien-de-Baenst.igc', 'v3.0.0/examples/data/igc/Sylvain-Dhonneur.igc', 'v3.0.0/examples/data/igc/Tom-Payne.igc', 'v3.0.0/examples/data/igc/Ulrich-Prinz.igc' ] });
var time = {
start: Infinity,
stop: -Infinity,
duration: 0
};
vectorSource.on('addfeature', function(event) {
/** on()
* Listen for a certain type of event.
* あるイベントの型をリッスンします。（al3 API）
*/
var geometry = event.feature.getGeometry(); /** event * Instance of an Event that is available to an event * handler. * イベントハンドラで使用できるイベントのインスタンス。 */
/** getGeometry() * Returns the Geometry associated with this feature * using the current geometry name property. By default, * this is geometry but it may be changed by calling * setGeometryName. * 現在のジオメトリネームプロパティを使用して、このフィーチャに * 関連したジオメトリを返します。デフォルトでは、ジオメトリです * が、setGeometryName を呼び出すことによって変更することができ * ます。（ol3 API） */
time.start = Math.min(time.start, geometry.getFirstCoordinate()[2]); /** Math.min() * 引数として与えた複数の数の中で最小の数を返します。 * （MDN [https://developer.mozilla.org/ja/docs/Web/ * JavaScript/Reference/Global_Objects/Math/min]） */
/** getFirstCoordinate() * Return: First coordinate.（ol3 API） */
time.stop = Math.max(time.stop, geometry.getLastCoordinate()[2]); /** Math.max() * 引数として与えた複数の数の中で最大の数を返します。 * （MDN [https://developer.mozilla.org/ja/docs/Web/ * JavaScript/Reference/Global_Objects/Math/max]） */
/** getLastCoordinate() * Return: Last point.（ol3 API） */
time.duration = time.stop - time.start; });
var map = new ol.Map({
layers: [
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.
* プリレンダリング（事前描画）を提供するレイヤソースのための、
* 特定の解像度でのズームレベルによって編成されているグリッドの
* タイルイメージ。（ol3 API）
*/
source: new ol.source.OSM({
/** ol.source.OSM
* Layer source for the OpenStreetMap tile server.
* OpenStreetMap タイルサーバのレイヤソース。（ol3 API）
*/
attributions: [
new ol.Attribution({
/** ol.Attribution
* An attribution for a layer source.
* レイヤソースに対する attribution。（ol3 API）
*/
html: 'All maps © ' +
'<a href="http://www.opencyclemap.org/">OpenCycleMap</a>
}),
ol.source.OSM.DATA_ATTRIBUTION
// v3.1.0 以降 ol.source.OSM.ATTRIBUTION を使用
],
url: 'http://{a-c}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png'
})
}),
new ol.layer.Vector({
/** ol.layer.Vector
* Vector data that is rendered client-side.
* クライアント側で描画されるベクタデータ。（ol3 API）
*/
source: vectorSource, style: styleFunction }) ], 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
* 値のタイプ（型）の説明 - 式などで表示
* attributionOptions の値の型は、
* olx.control.AttributionOptions の型を使用。
* （@use JSDoc[http://usejsdoc.org/]より）
*/
collapsible: false // 折りたたみ }) }),
view: new ol.View({
center: [703365.7089403362, 5714629.865071137],
zoom: 9
})
});
var point = null;
var line = null;
var displaySnap = function(coordinate) {
var closestFeature =
vectorSource.getClosestFeatureToCoordinate(coordinate); /** getClosestFeatureToCoordinate() * Returns: Closest feature.（ol3 API） */
var info = document.getElementById('info');
if (closestFeature === null) {
point = null;
line = null;
info.innerHTML = ' ';
} else {
var geometry = closestFeature.getGeometry();
var closestPoint = geometry.getClosestPoint(coordinate); /** setClosestPoint() * Returns: Closest point.（ol3 API） */
if (point === null) {
point = new ol.geom.Point(closestPoint);
/** ol.geom.Point
* Point geometry.（ol3 API）
*/
} else {
point.setCoordinates(closestPoint); /** setCoordinates() * setCoordinates(coordinates) [Type: ol.Coordinate, * Description: Coordinates]（ol3 API） */ }
var date = new Date(closestPoint[2] * 1000); /** Date * 日付や時刻を扱うことが可能な、JavaScript の Date インスタ * ンスを生成します。 * （MDN[https://developer.mozilla.org/ja/docs/Web/ * JavaScript/Reference/Global_Objects/Date]） */
info.innerHTML =
closestFeature.get('PLT') + ' (' + date.toUTCString() + ')';
/** Date.prototype.toUTCString()
* The toUTCString() method converts a date to a string,
* using the UTC time zone.
* toUTCString（）メソッドは、UTCタイムゾーンを使って、
* 日時を文字列に変換します。
* （MDN[https://developer.mozilla.org/en-US/docs/Web/
* JavaScript/Reference/Global_Objects/Date/toUTCString]）
*/
var coordinates = [coordinate, [closestPoint[0], closestPoint[1]]];
if (line === null) {
line = new ol.geom.LineString(coordinates); /** ol.geom.LineString * Linestring geometry.（ol3 API） */
} else {
line.setCoordinates(coordinates);
}
}
map.render(); /** render() * Requests a render frame; rendering will effectively occur * at the next browser animation frame. * レンダーフレームをを要求します。すなわち、レンダリングは、 * 次のブラウザのアニメーションフレームで、効果的に発生します。 * （ol3 API） */ };
$(map.getViewport()).on('mousemove', function(evt) {
/** getViewport()
* Return: Viewport （ol3 API）
*/
/** jQuery on イベント */
var coordinate = map.getEventCoordinate(evt.originalEvent); /** getEventCoordinate * Returns the geographical coordinate for a browser event. * ブラウザイベントに対して地理的座標を返します。 */
displaySnap(coordinate); });
map.on('click', function(evt) {
/** on
* Listen for a certain type of event.
* あるタイプのイベントをリッスンします。（ol3 API）
*/
displaySnap(evt.coordinate); });
var imageStyle = new ol.style.Circle({
/** ol.style.Circle
* Set circle style for vector features.
* ベクタフィーチャの円のスタイルを設定。（ol3 API）
*/
radius: 5,
fill: null,
stroke: new ol.style.Stroke({
color: 'rgba(255,0,0,0.9)',
width: 1
})
});
var strokeStyle = new ol.style.Stroke({
color: 'rgba(255,0,0,0.9)',
width: 1
});
map.on('postcompose', function(evt) {
var vectorContext = evt.vectorContext;
if (point !== null) {
vectorContext.setImageStyle(imageStyle);
vectorContext.drawPointGeometry(point);
}
if (line !== null) {
vectorContext.setFillStrokeStyle(null, strokeStyle);
vectorContext.drawLineStringGeometry(line);
}
});
var featureOverlay = 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,
style: new ol.style.Style({
image: new ol.style.Circle({
radius: 5,
fill: new ol.style.Fill({
/** ol.style.Fill
* Set fill style for vector features.
* ベクタフィーチャの塗りつぶしスタイルを設定。（ol3 API）
*/
color: 'rgba(255,0,0,0.9)' }), stroke: null }) }) });
$('#time').on('input', function(event) {
var value = parseInt($(this).val(), 10) / 100; /** parseInt(string, radix) * str: 文字列, radix: 基数（進法） * 文字列の引数をパースし、指定された基数の整数を返します。 * （MDN[https://developer.mozilla.org/ja/docs/Web/ * JavaScript/Reference/Global_Objects/parseInt]） */
var m = time.start + (time.duration * value);
vectorSource.forEachFeature(function(feature) {
/** forEachFeature
* forEachFeature(f) [Type: function, Description: Callback]
* （ol3 API）
*/
var geometry = /** @type {ol.geom.LineString} */ (feature.getGeometry());
var coordinate = geometry.getCoordinateAtM(m, true); /** getCoordinateAtM() * Returns the coordinate at m using linear interpolation, * or null if no such coordinate exists. * 線形補間を使用する m で座標を、または、そのような座標が存在 * しない場合は null を返します。（ol3 API） */
var highlight = feature.get('highlight');
if (highlight === undefined) {
highlight = new ol.Feature(new ol.geom.Point(coordinate)); /** ol.Feature * A vector object for geographic features with a * geometry and other attribute properties, similar to * the features vector file formats like GeoJSON. * GeoJSONのようなフィーチャベクタファイルフォーマットと同様 * の、ジオメトリおよびその他の属性プロパティを持つ地理的 * フィーチャのベクタオブジェクト。（ol3 API） */
feature.set('highlight', highlight);
featureOverlay.addFeature(highlight);
} else {
highlight.getGeometry().setCoordinates(coordinate);
}
});
map.render();
});
