*****
GPX（ジーピーエックス、GPS eXchange Format）は、GPS装置やGPSソフトウェアなど、アプリケーション間でGPSのデータをやりとりするためのデータフォーマットである。GPXは、XML Schemaベースでデザインされており、ウェイポイントや軌跡、ルートなどを記述する。
*****
「gpx.js（235-ol3ex.js）」は、マップを表示するための JavaScript ファイルです。
fells_loop.gpx の内容は、次のようになっています。
「fells_loop.gpx」
<?xml version="1.0"?> <gpx version="1.0" creator="ExpertGPS 1.1 - http://www.topografix.com" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://www.topografix.com/GPX/1/0" xsi:schemaLocation="http://www.topografix.com/GPX/1/0 http://www.topografix.com/GPX/1/0/gpx.xsd"> <time>2002-02-27T17:18:33Z</time> <bounds minlat="42.401051" minlon="-71.126602" maxlat="42.468655" maxlon="-71.102973"/>
<wpt lat="42.438878" lon="-71.119277"> <ele>44.586548</ele> <time>2001-11-28T21:05:28Z</time> <name>5066</name> <desc><![CDATA[5066]]></desc> <sym>Crossing</sym> <type><![CDATA[Crossing]]></type> </wpt>
<wpt lat="42.439227" lon="-71.119689">---
「235-ol3ex.js」
var projection = ol.proj.get('EPSG:3857');
/** ol.proj.get
* Fetches a Projection object for the code specified.
* 指定されたコードのプロジェクション·オブジェクトを取得します。
* （0l3 API）
*/
var raster = 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.BingMaps({
/** ol.source.BingMaps
* Layer source for Bing Maps tile data.
* Bing Maps タイルデータのレイヤソース。（ol3 API）
*/
imagerySet: 'Aerial',
key: 'Ak-dzM...（省略）'
})
});
var style = {
'Point': [new ol.style.Style({
/** 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）
*/
fill: new ol.style.Fill({
/** ol.style.Fill
* Set fill style for vector features.
* ベクタフィーチャの塗りつぶしスタイルを設定。（ol3 API）
*/
color: 'rgba(255,255,0,0.4)' }), radius: 5,
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: '#ff0',
width: 1
})
})
})],
'LineString': [new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#f00',
width: 3
})
})],
'MultiLineString': [new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#0f0',
width: 3
})
})]
};
var vector = new ol.layer.Vector({
/** ol.layer.Vector
* Vector data that is rendered client-side.
* クライアント側で描画されるベクタデータ。（ol3 API）
*/
source: new ol.source.GPX({
/** ol.source.GPX
* Static vector source in GPX format.
* GPX形式の静的ベクトルソース。
*/
projection: projection,
// url: 'data/gpx/fells_loop.gpx'
url: 'v3.0.0/examples/data/gpx/fells_loop.gpx' // 修正
}),
style: function(feature, resolution) {
return style[feature.getGeometry().getType()]; /** 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） */
/** getType() * Get the type of this geometry. * ジオメトリの型を取得。（ol3 API） */
features.push(clone); /** push(elem) * Insert the provided element at the end of the * collection. * コレクションの最後に供給されたエレメントに挿入します。 * Name: elem, Type: T, Description: Element * （ol3 API） */
}); } });
var map = new ol.Map({
layers: [raster, vector],
target: document.getElementById('map'),
view: new ol.View({
center: [-7916041.528716288, 5228379.045749711],
zoom: 12
})
});
var displayFeatureInfo = function(pixel) {
var features = [];
map.forEachFeatureAtPixel(pixel, function(feature, layer) {
/** forEachFeatureAtPixel
* Detect features that intersect a pixel on the viewport,
* and execute a callback with each intersecting feature.
* Layers included in the detection can be configured
* through opt_layerFilter. Feature overlays will always
* be included in the detection.
* ビューポート上のピクセルと交差するフィーチャを検出し、
* 各交差するフィーチャとコールバックを実行します。
* 検出に含まれるレイヤが opt_layerFilter を通じて
* 設定することができます。フィーチャーオーバーレイは
* 常に検出に含まれます。（ol3 API）
*/
features.push(feature);
if (features.length > 0) {
var info = [];
var i, ii;
for (i = 0, ii = features.length; i < ii; ++i) {
info.push(features[i].get('desc'));
/** get(key)
* Gets a value.
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
}
document.getElementById('info').innerHTML = info.join(', ') || '(unknown)';
/** Array.join
* 配列の全ての要素を繋いで文字列にします。
* （MDN [https://developer.mozilla.org/ja/docs/Web/
* JavaScript/Reference/Global_Objects/Array/join]）
*/
map.getTarget().style.cursor = 'pointer'; /** getTarget() * Get the target in which this map is rendered. * Note that this returns what is entered as an option or * in setTarget: if that was an element, it returns an * element; if a string, it returns that. * レンダリングされたこのマップのターゲットを取得します。 * これはオプションとして、または setTarget に入力されているも * のを返すことに注意してください：それが要素ならば、要素を返し * ます。文字列ならば、それを返します。（ol3 API） */
} else {
document.getElementById('info').innerHTML = ' ';
map.getTarget().style.cursor = '';
}
};
$(map.getViewport()).on('mousemove', function(evt) {
/** getViewport()
* Return: Viewport （ol3 API）
*/
/** jQuery on イベント */
var pixel = map.getEventPixel(evt.originalEvent); /** getEventPixel * Returns the map pixel position for a browser event. * ブラウザイベントに対して、マップのピクセル位置を返します。 * （ol3 API） */
displayFeatureInfo(pixel); });
map.on('click', function(evt) {
/** on
* Listen for a certain type of event.
* あるタイプのイベントをリッスンします。（ol3 API）
*/
displayFeatureInfo(evt.pixel);
});
var exportGPXElement = document.getElementById('export-gpx');
if ('download' in exportGPXElement) {
var vectorSource = /** @type {ol.source.Vector} */ (vector.getSource());
/** @type
* 値のタイプ（型）の説明 - 式などで表示
* ol.source.Vector の型を使用。
* （@use JSDoc[http://usejsdoc.org/]より）
*/
/** getSource() * Return: Source（al3 API） */
exportGPXElement.addEventListener('click', function(e) {
/** EventTarget.addEventListener
* addEventListener は、 1 つのイベントターゲットにイベント
* リスナーを1 つ登録します。イベントターゲットは、ドキュメント
* 上の単一のノード、ドキュメント自身、ウィンドウ、あるいは、
* XMLHttpRequest です。
* （MDN[https://developer.mozilla.org/ja/docs/Web/API/
* EventTarget.addEventListener]）
*/
if (!exportGPXElement.href) {
var features = [];
vectorSource.forEachFeature(function(feature) {
/** forEachFeature
* forEachFeature(f) [Type: function,
* Description: Callback]（ol3 API）
*/
var clone = feature.clone(); /** clone() * Clone this feature. If the original feature has a * geometry it is also cloned. The feature id is not * set in the clone. * このフィーチャを複製します。元のフィーチャは、ジオメトリ * を有する場合にも複製します。フィーチャ ID は、クローンに * 設定されていません。（ol3 API） */
clone.getGeometry().transform(projection, 'EPSG:4326'); /** 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） */
/** transform(source, destination)
* Transform each coordinate of the geometry from one
* coordinate reference system to another. The
* geometry is modified in place. For example, a line
* will be transformed to a line and a circle to a
* circle. If you do not want the geometry modified in
* place, first clone() it and then use this function
* on the clone.
* ある座標参照系から別のものへジオメトリの各座標を変換。ジ
* オメトリは、所定の位置に修正されます。例えば、ラインはラ
* インに、円は円に変換されます。ジオメトリを所定の位置に修
* 正したくない場合、最初にそれを clone() し、それからク
* ローンでこの関数を使用します。（ol3 API）
*/
features.push(clone); });
var node = new ol.format.GPX().writeFeatures(features); /** ol.format.GPX * Feature format for reading and writing data in the * GPX format. * GPX フォーマットでデータを読み書きするためのフィーチャの * フォーマット。（ol3 API） */
/** writeFeatures * Encode an array of features in the GPX format. * GPX フォーマットのフィーチャの配列をエンコードします。 * （ol3 API） */
var string = new XMLSerializer().serializeToString( /** XMLSerializer() * DOM サブツリーや DOM 文書をテキストに変換できます。 * XmlSerializerを権限のないスクリプトで使用できます。 * serializeToString メソッド * 文字列の形にシリアライズされたサブツリーを返します。 * （MDN [https://developer.mozilla.org/ja/docs/ * XMLSerializer]） */
/** @type {Node} */ (node));
var base64 = exampleNS.strToBase64(string); //'example-behavior.js' により文字列を Base64 へエンコードします。
exportGPXElement.href = 'data:gpx+xml;base64,' + base64; } }, false);
} else {
var info = document.getElementById('no-download');
/**
* display error message
*/
info.style.display = '';
}
0 件のコメント:
コメントを投稿