「278-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.MapQuest({layer: 'sat'})
/** ol.source.MapQuest
* Layer source for the MapQuest tile server.
* MapQuest タイルサーバのレイヤソース。（ol3 API
* 2 - ol3ex 23b - MapQuest example 2 参照）
*/
}) ],
renderer: exampleNS.getRendererFromQueryString(), //'example-behavior.js' により URL にある renderer を返します */
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
var imageStyle = new ol.style.Circle({
/** ol.style.Circle
* Set circle style for vector features.
* ベクタフィーチャの円のスタイルを設定。（ol3 API）
*/
radius: 5,
snapToPixel: false, /** snapToPixel: * If true integral numbers of pixels are used as * the X and Y pixel coordinate when drawing the * circle in the output canvas. If false * fractional numbers may be used. Using true * allows for "sharp" rendering (no blur), while * using false allows for "accurate" rendering. * Note that accuracy is important if the * circle's position is animated. Without it, the * circle may jitter noticeably. Default value is *true. * true（真）の場合、ピクセルの整数は、出力キャンバスに * 円を描画するとき、X と Y のピクセル座標として使用され * ます。false（偽）の場合、分数を使用することができます。 * true（真）を使用すると「シャープ」なレンダリング（ぼ * かしなし）を可能にします。一方、false（偽）を使用する * と「精密」なレンダリングを可能にします。円の位置がアニ * メーション化されている場合は、その精度が重要であること * に注意してください。それがなければ、円が著しく小刻みに * 動きます。デフォルト値は true です。 * （ol3 API[説明は Stable Only のチェックを外すと表示]） */
fill: new ol.style.Fill({color: 'yellow'}),
/** ol.style.Fill
* Set fill style for vector features.
* ベクタフィーチャの塗りつぶしスタイルを設定。（ol3 API）
*/
stroke: new ol.style.Stroke({color: 'red', width: 1})
/** 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）
*/
});
var headInnerImageStyle = new ol.style.Style({
/** ol.style.Style
* Base class for vector feature rendering styles.
* ベクタフィーチャがスタイルを描画するための基本クラス。
* （ol3 API）
*/
image: new ol.style.Circle({
radius: 2,
snapToPixel: false,
fill: new ol.style.Fill({color: 'blue'})
})
});
var headOuterImageStyle = new ol.style.Circle({
radius: 5,
snapToPixel: false,
fill: new ol.style.Fill({color: 'black'})
});
var n = 200; var omegaTheta = 30000; // Rotation period in ms var R = 7e6; var r = 2e6; var p = 2e6;
map.on('postcompose', function(event) {
/** on
* Listen for a certain type of event.
* あるタイプのイベントをリッスンします。（ol3 API）
*/
/** postcompose イベント * レイヤを描画した後に発生するイベント。 * （「Layer spy example」参照） */
var vectorContext = event.vectorContext;
var frameState = event.frameState;
var theta = 2 * Math.PI * frameState.time / omegaTheta;
var coordinates = [];
var i;
for (i = 0; i < n; ++i) {
var t = theta + 2 * Math.PI * i / n; /** Math.PI() * 円周率。約 3.14159 です。 * （MDN[https://developer.mozilla.org/ja/docs/Web * /JavaScript/Reference/Global_Objects/Math/PI]） */
var x = (R + r) * Math.cos(t) + p * Math.cos((R + r) * t / r); /** Math.cos() * 引数として与えた数のコサインを返します。 * （MDN[https://developer.mozilla.org/ja/docs/Web/ * JavaScript/Reference/Global_Objects/Math/cos]） */
var y = (R + r) * Math.sin(t) + p * Math.sin((R + r) * t / r); /** Math.sin() * 引数として与えた数のサイン（正弦）を返します。 * （MDN[https://developer.mozilla.org/ja/docs/Web/ * JavaScript/Reference/Global_Objects/Math/sin]） */
coordinates.push([x, y]); /** push(elem) * Insert the provided element at the end of the * collection. * コレクションの最後に供給されたエレメントに挿入します。 * Name: elem, Type: T, Description: Element * （ol3 API） */
}
vectorContext.setImageStyle(imageStyle); /** setImageStyle() * Set the image style for subsequent draw * operations. Pass null to remove the image * style. * その後のドロー操作のための画像のスタイルを設定します。 * 画像のスタイルを削除するには null を渡します。 * （ol3 API[説明は Stable Only のチェックを外すと表示]） */
vectorContext.drawMultiPointGeometry( /** drawMultiPointGeometry * Render a MultiPoint geometry into the canvas. * Rendering is immediate and uses the current * style. * キャンバスにマルチポイントジオメトリをレンダリングし * ます。レンダリングは即時に実行され、現在のスタイルを * 使用します。 * （ol3 API[説明は Stable Only のチェックを外すと表示]） */
new ol.geom.MultiPoint(coordinates), null); /** ol.geom.MultiPoint * Multi-point geometry.（ol3 API） */
var headPoint = new ol.geom.Point(coordinates[coordinates.length - 1]); /** ol.geom.Point * Point geometry.（ol3 API） */
var headFeature = new ol.Feature(headPoint); /** 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） */
vectorContext.drawFeature(headFeature, headInnerImageStyle); /** drawFeature(() * Render a feature into the canvas. In order to * respect the zIndex of the style this method * draws asynchronously and thus after calls to * drawXxxxGeometry have been finished, * effectively drawing the feature on top of * everything else. You probably should be using * ol.FeatureOverlay instead of calling this * method directly. * キャンバスにフィーチャをレンダリングします。 スタイルの * zIndex を尊重するために、このメソッドは非同期的に描画 * します。これにより、終了した drawXxxxGeometry への呼 * び出した後に、他のすべての上のフィーチャを効果的に描画し * ます。このメソッドを直接呼び出す代わりに、おそらく * ol.FeatureOverlay を使用する必要があります。 * （ol3 API[説明は Stable Only のチェックを外すと表示]） */
vectorContext.setImageStyle(headOuterImageStyle); vectorContext.drawMultiPointGeometry(headPoint, null);
map.render(); /** render() * Requests a render frame; rendering will effectively occur * at the next browser animation frame. * レンダーフレームをを要求します。すなわち、レンダリングは、 * 次のブラウザのアニメーションフレームで、効果的に発生します。 * （ol3 API） */
}); map.render();
0 件のコメント:
コメントを投稿