「275-ol3ex.js」
var count = 20000;
var features = new Array(count); /** Array(arraylength) * JavaScript は配列を扱うことができます。配列とは順序を持つ複数 * のデータの集合であり、JavaScript のグローバルオブジェクトであ * る Array は、高位の、（C言語等で云うところの）「リスト」の様 * な、配列のコンストラクタです。 * arraylength * Array コンストラクタに渡される唯一の引数（arrayLength）に 0 * から 4,294,967,295( 232-1 ) までの整数値を指定する場合は、そ * の値を要素数とする配列が作成されます。その際に範囲外の値を指 * 定した場合には、例外: RangeError がスローされます。 * （MDN[https://developer.mozilla.org/ja/docs/Web/ * JavaScript/Reference/Global_Objects/Array]） */
var e = 18000000;
for (var i = 0; i < count; ++i) {
features[i] = 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': new ol.geom.Point( /** ol.geom.Point * Point geometry.（ol3 API） */
[2 * e * Math.random() - e, 2 * e * Math.random() /** Math.random() * The Math.random() function returns a floating-point, * pseudo-random number in the range [0, 1) that is, * from 0 (inclusive) up to but not including 1 * (exclusive), which you can then scale to your * desired range. The implementation selects the * initial seed to the random number generation * algorithm; it cannot be chosen or reset by the * user. * Math.random() 関数は浮動小数点を返し、0 と 1 の範囲の * 擬似乱数、すなわち 0 以上 1 未満、で、任意の範囲に合わせ * ることができます。インプリメンテーションは、乱数発生アル * ゴリズムのためにイニシャルシードを選択しますが、ユーザが * 選んだりリセットできません。 * （MDN[https://developer.mozilla.org/en-US/docs/Web/ * JavaScript/Reference/Global_Objects/Math/random]） */
'i': i,
'size': i % 2 ? 10 : 20 /** %（モジュロ） * 二項演算子です。2 つのオペランドで除算したときの、整数の余 * りを返します。 * 条件演算子 condition ? expr1 : expr2 * condition: true か false かを評価する条件文です。 * expr1, expr2: 各々の値の場合に実行する式です。 * condition が true の場合、演算子は expr1 の値を選択します。 * そうでない場合は expr2 の値を選択します。 * （MDN[https://developer.mozilla.org/ja/docs/Web/ * JavaScript/Guide/Expressions_and_Operators]） */
}); }
var styles = {
'10': [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）
*/
radius: 5,
fill: new ol.style.Fill({color: '#666666'}),
/** ol.style.Fill
* Set fill style for vector features.
* ベクタフィーチャの塗りつぶしスタイルを設定。（ol3 API）
*/
stroke: new ol.style.Stroke({color: '#bada55', 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）
*/
})
})],
'20': [new ol.style.Style({
image: new ol.style.Circle({
radius: 10,
fill: new ol.style.Fill({color: '#666666'}),
stroke: new ol.style.Stroke({color: '#bada55', width: 1})
})
})]
};
var vectorSource = new ol.source.Vector({
/*: ol.source.Vector
* Provides a source of features for vector layers.
* ベクタレイヤのフィーチャのソースを提供します。（ol3 API）
*/
features: features });
var vector = new ol.layer.Vector({
/** ol.layer.Vector
* Vector data that is rendered client-side.
* クライアント側で描画されたベクタデータ。（ol3 API）
*/
source: vectorSource,
style: function(feature, resolution) {
return styles[feature.get('size')];
/** get(key)
* Gets a value.
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
} });
var map = new ol.Map({
layers: [vector],
target: document.getElementById('map'),
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
var point = null;
var line = null;
var displaySnap = function(coordinate) {
var closestFeature = vectorSource.getClosestFeatureToCoordinate(coordinate); /** etClosestFeatureToCoordinate(coordinate) * Get the closest feature to the provided * coordinate. * 提供された座標に一番近いフィーチャを取得します。 * （ol3 API） */
if (closestFeature === null) {
point = null;
line = null;
} else {
var geometry = closestFeature.getGeometry(); /** 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） */
var closestPoint = geometry.getClosestPoint(coordinate); /** setClosestPoint() * Returns: Closest point.（ol3 API） */
if (point === null) {
point = new ol.geom.Point(closestPoint);
} else {
point.setCoordinates(closestPoint); /** setCoordinates() * setCoordinates(coordinates) [Type: ol.Coordinate, Description: Coordinates] * （ol3 API） */
}
if (line === null) {
line = new ol.geom.LineString([coordinate, closestPoint]); /** ol.geom.LineString * Linestring geometry.（ol3 API） */
} else {
line.setCoordinates([coordinate, closestPoint]);
}
}
map.render(); /** render() * Requests a render frame; rendering will effectively occur * at the next browser animation frame. * レンダーフレームをを要求します。すなわち、レンダリングは、 * 次のブラウザのアニメーションフレームで、効果的に発生します。 * （ol3 API） */
};
map.on('pointermove', function(evt) {
/** on
* Listen for a certain type of event.
* あるタイプのイベントをリッスンします。（ol3 API）
*/
/** pointermove * Triggered when a pointer is moved. Note that on * touch devices this is triggered when the map is * panned, so is not the same as mousemove. * ポインタが移動されたときにトリガされます。タッチデバイス * で、マップがパンされるときにこれはトリガーされ、 mousemove * と同じではないことに注意してください。 * （ol3 API） */
if (evt.dragging) {
/** dragging{boolean}
* Indicates if the map is currently being dragged.
* Only set for POINTERDRAG and POINTERMOVE events.
* Default is false.
* マップが現在ドラッグされているかどうかを示します。
* POINTERDRAG と POINTERMOVE イベント用にのみ
* 設定します。デフォルトは false です。（ol3 API）
*/
return; }
var coordinate = map.getEventCoordinate(evt.originalEvent); /** getEventCoordinate() * Returns the geographical coordinate for a browser event. * ブラウザイベントに対して地理的座標を返します。 */
displaySnap(coordinate); });
map.on('click', function(evt) {
/** click
* A click with no dragging. A double click will
* fire two of this.
* ドラグをしないクリック。ダブルクリックは、これを２つ発生
* します。
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
displaySnap(evt.coordinate); });
var imageStyle = new ol.style.Circle({
radius: 10,
fill: null,
stroke: new ol.style.Stroke({
color: 'rgba(255,255,0,0.9)',
width: 3
})
});
var strokeStyle = new ol.style.Stroke({
color: 'rgba(255,255,0,0.9)',
width: 3
});
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);
}
});
map.on('pointermove', function(evt) {
if (evt.dragging) {
return;
}
var pixel = map.getEventPixel(evt.originalEvent); /** getEventPixel() * Returns the map pixel position for a browser event. * ブラウザイベントに対して、マップのピクセル位置を返します。 * （ol3 API） */
var hit = map.hasFeatureAtPixel(pixel); /** hasFeatureAtPixel() * Detect if features intersect a pixel on the * viewport. Layers included in the detection can be * configured through opt_layerFilter. Feature over * lays will always be included in the detection. * フィーチャがビューポート上でピクセルと交差するかどうかを検出 * します。検出に含まれたレイヤは、opt_layerFilter を通じて * 設定することができます。フィーチャオーバーレイは、常に検出に * 含まれます。 * （ol3 API[説明は Stable Only のチェックを外すと表示]） */
if (hit) {
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 {
map.getTarget().style.cursor = '';
}
});
「ol.MapBrowserEvent」
（Events emitted as map browser events are instances of this type. See ol.Map for which events trigger a map browser event.
マップブラウザイベントとして発するイベントは、このタイプのインスタンスです。イベントがマップブラウザイベントをトリガする ol.Map を参照してください。）
のメンバ。
ol/ol/mapbrowserevent.js 32行目
* @param {goog.events.BrowserEvent} browserEvent Browser event.
ol/ol/mapbrowserevent.js 52行目
this.originalEvent = browserEvent.getBrowserEvent();
goog.events.BrowserEvent
「events.BrowserEvent - Extends goog.events.Event」
（http://docs.closure-library.googlecode.com/git/class_goog_events_BrowserEvent.html）
Accepts a browser event object and creates a patched, cross browser event object. The content of this object will not be initialized if no event object is provided. If this is the case, init() needs to be invoked separately.
events.BrowserEvent。goog.events.Eventを拡張します。
ブラウザイベントオブジェクトを受け入れ、パッチを適用した、クロスブラウザイベントオブジェクトを作成します。イベントオブジェクトが提供されない場合は、このオブジェクトの内容は初期化されません。この場合は、init（）は別々に呼び出す必要があります。
「Instance Methods」
getBrowserEvent() ⇒ Event
No description.
Returns: Event The underlying browser event object.
0 件のコメント:
コメントを投稿