「272-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 = 4500000;
for (var i = 0; i < count; ++i) {
var coordinates = [2 * e * Math.random() - e, 2 * e * Math.random() - e]; /** 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]） */
features[i] = new ol.Feature(new ol.geom.Point(coordinates)); /** 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） */
/** ol.geom.Point * Point geometry.（ol3 API） */
}
var source = new ol.source.Vector({
/** ol.source.Vector
* Provides a source of features for vector layers.
* ベクタレイヤのフィーチャのソースを用意します。（ol3 API）
*/
features: features });
var clusterSource = new ol.source.Cluster({
distance: 40,
/** distance * Minimum distance in pixels between clusters. * Default is 20. * クラスタ間のピクセル単位の最短間隔。デフォルトは 20。 * （ol3 API[説明は Stable Only のチェックを外すと表示]） */
source: source });
var styleCache = {};
var clusters = new ol.layer.Vector({
/** ol.layer.Vector
* Vector data that is rendered client-side.
* クライアント側で描画されたベクタデータ。（ol3 API）
*/
source: clusterSource,
style: function(feature, resolution) {
var size = feature.get('features').length;
/** get(key)
* Gets a value.
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
var style = styleCache[size];
if (!style) {
style = [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: 10,
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: '#fff' }),
fill: new ol.style.Fill({
/** ol.style.Fill
* Set fill style for vector features.
* ベクタフィーチャの塗りつぶしスタイルを設定。（ol3 API）
*/
color: '#3399CC' }) }),
text: new ol.style.Text({
/** ol.style.Text
* Set text style for vector features.
* ベクタフィーチャの文字列のスタイルを設定します。
* （ol3 API）
*/
text: size.toString(), /** Number.prototype.toString( [ radix ] ) * 指定された Number オブジェクトを表す 文字列を返します。 * radix: 数値を表すために使われる基数を指定する、2 から * 36 までの整数。省略したときは 10。 * MDN（[https://developer.mozilla.org/ja/docs/Web/ * JavaScript/Reference/Global_Objects/Number/toString]） */
fill: new ol.style.Fill({
color: '#fff'
})
})
})];
styleCache[size] = style;
}
return style;
}
});
var raster = new ol.layer.Tile({
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 参照）
*/
});
var raw = new ol.layer.Vector({
source: source
});
var map = new ol.Map({
layers: [raster, clusters],
renderer: 'canvas',
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
0 件のコメント:
コメントを投稿