arc.js は、
GitHub springmeyer/arc.js
https://github.com/springmeyer/arc.js/
の README.md に次のようにあります。
Calculate great circles routes as lines in GeoJSON or WKT format.
Algorithms from http://williams.best.vwh.net/avform.htm#Intermediate
Includes basic support for splitting lines that cross the dateline, based on a partial port of code from OGR.
GeoJSONまたはWKT形式のラインのような大円ルートを計算します。
http://williams.best.vwh.net/avform.htm#Intermediate からのアルゴリズムです。
OGR からのコードの一部のポートに基づいて、日付変更線を横断する分割ラインの基本的なサポートが含んでいます。
「2145-ol3ex.js」
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.Stamen({
/** ol.source.Stamen
* Layer source for the Stamen tile server.
* Stamen タイルサーバのレイヤソース。（ol3 API）
* （2 - ol3ex 24b - Stamen example 1 参照）
*/
layer: 'toner'
})
})
],
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
var defaultStroke = 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[説明は Stable Only のチェックを外すと表示]）
*/
color: '#EAE911', /** color: * Color. See ol.color for possible formats. Default * null; if null, the Canvas/renderer default black * will be used. * 色。可能なフォーマットについては ol.color を参照してく * ださい。デフォルトはnull; nullの場合、Canvas/renderer * デフォルトの黒が使用されます。 * （ol3 API[説明は Stable Only のチェックを外すと表示]） */
width: 2 });
var defaultStyle = new ol.style.Style({
/** ol.style.Style
* Container for vector feature rendering styles. Any
* changes made to the style or its children through
* set*() methods will not take effect until the
* feature or layer that uses the style is re-rendered.
* ベクタフィーチャがスタイルを描画するためのコンテナ。
* スタイルや set*() メソッドを通じてその子に加えられた変
* 更は、スタイルを使用するフィーチャまたはレイヤが再レン
* ダリングされるまで有効になりません。
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
stroke: defaultStroke });
var pointsPerMs = 0.1;
var animateFlights = function(event) {
var vectorContext = event.vectorContext;
/** vectorContext{ol.render.VectorContext}
* For canvas, this is an instance of
* ol.render.canvas.Immediate.
* キャンバスの場合、これは ol.render.canvas.Immediate
* のインスタンスです。
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
var frameState = event.frameState;
/** frameState{olx.FrameState}
* An object representing the current render frame
* state.
* 現在の描画フレーム状態を表すオブジェクト。
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
vectorContext.setFillStrokeStyle(null, defaultStroke); /** setFillStrokeStyle(fillStyle, strokeStyle) * Set the fill and stroke style for subsequent draw * operations. To clear either fill or stroke styles, * pass null for the appropriate parameter. * ドロー操作後のための塗つぶしと線のスタイルを設定します。 * 塗りつぶしまたは線スタイルのいずれかをクリアするために、 * 適切なパラメータに null を渡します。 * （ol3 API[説明は Stable Only のチェックを外すと表示]） */
var features = flightsSource.getFeatures(); /** getFeatures() * Get all features on the source. * ソース上の不すべてのフィーチャを取得します。 * （ol3 API） */
for (var i = 0; i < features.length; i++) {
var feature = features[i];
if (!feature.get('finished')) {
/** get(key)
* Gets a value.（ol3 API）
*/
// only draw the lines for which the animation has // not finished yet // アニメーションがまだ完了していない線だけを引きます。
var coords = feature.getGeometry().getCoordinates();
/** getGeometry()
* Get the feature's default geometry. A feature may
* have any number of named geometries. The "default"
* geometry (the one that is rendered by default) is
* set when calling ol.Feature#setGeometry.
* フィーチャのデフォルトのジオメトリを取得します。フィー
* チャは、任意の数の指定のジオメトリのを有することができ
* ます。「デフォルト」のジオメトリ（デフォルトでレンダリ
* ングされるもの）が ol.Feature＃setGeometry を呼び出すと
* きに設定されています。（ol3 API）
*/
/** getCoordinates()
* Return the coordinates of the linestring.
* ラインストリングの座標を返します。（ol3 API）
*/
var elapsedTime = frameState.time - feature.get('start');
var elapsedPoints = elapsedTime * pointsPerMs;
if (elapsedPoints >= coords.length) {
feature.set('finished', true);
/** set(key, value, opt_silent)
* Sets a value.（ol3 API）
*/
}
var maxIndex = Math.min(elapsedPoints, coords.length);
/** Math.min()
* 引数として与えた複数の数の中で最小の数を返します。
* （MDN[https://developer.mozilla.org/ja/docs/Web/
* JavaScript/Reference/Global_Objects/Math/min]）
*/
var currentLine = new ol.geom.LineString(coords.slice(0, maxIndex));
/** ol.geom.LineString
* Linestring geometry.（ol3 API）
*/
// directly draw the line with the vector context // ベクトルコンテキストで,、直接、線を引きます。
vectorContext.drawLineStringGeometry(currentLine, feature);
/** drawLineStringGeometry(lineStringGeometry)
* Render a LineString into the canvas. Rendering is
* immediate and uses the current style.
* キャンバス（canvas）にラインストリング（LineString）
* をレンダリングします。レンダリングは即時であり、現在の
* スタイルを使用します。
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
} }
// tell OL3 to continue the postcompose animation // OL3 に postcompose アニメーションを継続することを教えます。
map.render(); /** render() * Request a map rendering (at the next animation * frame). * （次のアニメーションフレームで）map 描画を要求します。 * （ol3 API） */
};
var addLater = function(feature, timeout) {
window.setTimeout(function() {
/** setTimeout(func, dylay)
* 指定された遅延の後に、コードの断片または関数を実行します。
* func : delay ミリ秒後に実行したい関数。
* delay : 関数呼び出しを遅延させるミリ秒(1/1000 秒)。
* （MDN[https://developer.mozilla.org/ja/docs/Web/
* API/Window/setTimeout]）
*/
feature.set('start', new Date().getTime());
/** Date
* 日付や時刻を扱うことが可能な、JavaScript の Date
* インスタンスを生成します。
* （MDN[https://developer.mozilla.org/ja/docs/Web/
* JavaScript/Reference/Global_Objects/Date]）
*/
/** Date.prototype.getTime() * ユニバーサル時間に従い、指定された日付の時刻に対応する数 * 値を返します。 * GetTime メソッドによって返される値は、1970 年 1 月 1 日 * 00:00:00 UTC からの経過ミリ秒です。このメソッドは、日付 * と時刻を別の Date オブジェクトに割り当てるために使用でき * ます。 * （MDN[https://developer.mozilla.org/ja/docs/Web/ * JavaScript/Reference/Global_Objects/Date/getTime]） */
flightsSource.addFeature(feature); /** addFeature(feature) * Add a single feature to the source. If you want to * add batch of features at once, call * source.addFeatures() a instead. * 単一フィーチャをソースに追加します。一度にフィーチャの * バッチを追加したいときは、替りに source.addFeatures() * を呼び出します。（ol3 API） */
}, timeout); };
var flightsSource = new ol.source.Vector({
/** ol.source.Vector
* Provides a source of features for vector layers.
* Vector features provided by this source are suitable
* for editing. See ol.source.VectorTile for vector
* data that is optimized for rendering.
* ベクタレイヤのフィーチャのソースを用意します。このソー
* スが提供するベクタフィーチャは、編集に適しています。レ
* ンダリングのために最適化されたベクタデータの
* ol.source.VectorTile を参照してください。（ol3 API）
*/
wrapX: false, /** wrapX: * Wrap the world horizontally. Default is true. For * vector editing across the -180° and 180° meridians * to work properly, this should be set to false. The * resulting geometry coordinates will then exceed the * world bounds. * 水平方向に世界をラップします。デフォルトは true。-180° * と180°の子午線を横切って編集するベクトルが正しく動作す * るために、これは false に設定する必要があります。ジオメ * トリの座標の結果は、その後、世界の境界線を超えます。 * （ol3 API[説明は Stable Only のチェックを外すと表示]） */
attributions: [new ol.Attribution({
/** ol.Attribution
* An attribution for a layer source.
* レイヤソースの属性（ol3 API）
*/
html: 'Flight data by ' + '<a href="http://openflights.org/data.html">OpenFlights</a>,' })],
loader: function(extent, resolution, projection) {
/** loader:
* The loader function used to load features, from a
* remote source for example. Note that the source
* will create and use an XHR feature loader when
* url is set.
* 例えばリモートソースから、フィーチャをロードするために
* 使用される loader 関数。ソースは、url が設定されている
* 場合、XHR feature loader を作成し使用することに注意し
* てください。
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
// var url = 'data/openflights/flights.json'; var url = 'v3.12.1/examples/data/openflights/flights.json';
fetch(url).then(function(response) {
/** Fetch API（現在、Chrome, Firefox, Opera のみサポート）
* The Fetch API provides an interface for fetching
* resources (e.g., across the network.) It will
* seem familiar to anyone who has used
* XMLHttpRequest, but the new API provides a more
* powerful and flexible feature set.
* Fetch API は、（例えば、ネットワークを介して）のリソー
* スを取得するためのインタフェースを提供します。これは、
* XMLHttpRequest を使用している人にはおなじみだと思われ
* ますが、新しい API がより強力で柔軟な機能セットを提供
* します。
* （MDN[https://developer.mozilla.org/en-US/docs/Web/
* API/Fetch_API]）
* Response
* The Response interface of the Fetch API represents
* the response to a request.
* Fetch API の Response インターフェイスは、要求（request）
* に対する応答（response）を表します。
* （MDN[https://developer.mozilla.org/en-US/docs/Web/
* API/Response]）
* Body.json()
* The json() method of the Body mixin takes a
* Response stream and reads it to completion. It
* returns a promise that resolves with an object
* literal containing the JSON data.
* Body mixin の json() メソッドは、Response stream を
* 受け取り、完了にそれを読み込みます。これは、JSON データ
* を含むオブジェクトリテラルで解決するpromise を返します。
* （MDN[https://developer.mozilla.org/en-US/docs/Web/
* API/Body/json]）
*/
return response.json();
}).then(function(json) {
var flightsData = json.flights;
for (var i = 0; i < flightsData.length; i++) {
var flight = flightsData[i];
var from = flight[0];
var to = flight[1];
// create an arc circle between the two locations
// 2地点間のアーク円を作成します。
var arcGenerator = new arc.GreatCircle(
/** arc.GreatCircle()
* Pass the start/end to the GreatCircle
* constructor, along with an optional object
* representing the properties for this future line.
* future line のプロパティを表すオプションのオブジェク
* トと一緒に、GrateCircle コンストラクタに開始/終了
* （start/end）を渡します。
* （arc.js API）
*/
{x: from[1], y: from[0]},
{x: to[1], y: to[0]});
var arcLine = arcGenerator.Arc(100, {offset: 10});
/** Arc()
* Call the Arc function on the GreatCircle object
* to generate a line.
* ラインを生成するために、GrateCircle オブジェクトの
* Arc 関数を呼び出します。
* （arc.js API）
*/
if (arcLine.geometries.length === 1) {
var line = new ol.geom.LineString(arcLine.geometries[0].coords);
line.transform(ol.proj.get('EPSG:4326'), ol.proj.get('EPSG:3857'));
/** 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() し
* て、それから clone に関してこの関数を使用します。
* （ol3 API）
*/
/** ol.proj.getTransform(source, destination)
* Given the projection-like objects, searches for
* a transformation function to convert a
* coordinates array from the source projection to
* the destination projection.
* projection 系オブジェクトを与えられると、変換関数の
* ための検索は、ソース投影から宛先の投影にの座標の配列
* に変換します。（ol3 API）
*/
var feature = 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）
*/
geometry: line,
finished: false
});
// add the feature with a delay so that the
// animation for all features does not start at
// the same time
// すべてのフィーチャに対するアニメーションが同時に起動
// しないように、遅延してフィーチャを追加。
addLater(feature, i * 50);
}
}
map.on('postcompose', animateFlights);
/** on(type, listener, opt_this)
* Listen for a certain type of event.
* あるタイプのイベントをリッスンします。（ol3 API）
*/
}); } });
var flightsLayer = new ol.layer.Vector({
/** ol.layer.Vector
* Vector data that is rendered client-side.
* クライアント側で描画されたベクタデータ。（ol3 API）
*/
source: flightsSource,
style: function(feature, resolution) {
/** style:
* Layer style. See ol.style for default style which
* will be used if this is not defined.
* レイヤースタイル。これが定義されていない場合に使用される
* デフォルトのスタイルに対する ol.style を参照してくださ
* い。（ol3 API）
*/
// if the animation is still active for a feature, do // not render the feature with the layer style // アニメーションがフィーチャに対してまだアクティブである場 // 合は、レイヤスタイルでフィーチャをレンダリングしません。
if (feature.get('finished')) {
return defaultStyle;
} else {
return null;
}
}
});
map.addLayer(flightsLayer); /** addLayer(layer) * Adds the given layer to the top of this map. * 与えられたレイヤをこのマップの一番上に追加します。（ol3 API） */
