「igc.js（236-ol3ex.js）」は、マップを表示するための JavaScript ファイルです。
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();
});
