「276-ol3ex.js」
var stroke = new ol.style.Stroke({color: 'black', width: 2});
/** 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 fill = new ol.style.Fill({color: 'red'});
/** ol.style.Fill
* Set fill style for vector features.
* ベクタフィーチャの塗りつぶしスタイルを設定。（ol3 API）
*/
var styles = {
'square': [new ol.style.Style({
/** ol.style.Style
* Base class for vector feature rendering styles.
* ベクタフィーチャがスタイルを描画するための基本クラス。
* （ol3 API）
*/
image: new ol.style.RegularShape( /** ol.style.RegularShape * Set regular shape style for vector features. The * resulting shape will be a regular polygon when * radius is provided, or a star when radius1 and * radius2 are provided. * ベクタフィーチャの規則的な形状のスタイルを設定します。生じ * た形状は、radius が提供されたとき正多角形になり、または、 * radius1 と radius2 が提供されたとき星形になります。 * （ol3 API） */
/** @type {olx.style.RegularShapeOptions} */({
/** @type
* 値のタイプ（型）の説明 - 式などで表示
* （@use JSDoc[http://usejsdoc.org/]より）
*/
fill: fill, stroke: stroke,
points: 4, /** points: * Number of points for stars and regular polygons. * In case of a polygon, the number of points is * the number of sides. * 星形と正多角形の点の数。ポリゴンの場合、点の数は辺の数です。 * （ol3 API[説明は Stable Only のチェックを外すと表示]） */
radius: 10, /** radius: * Radius of a regular polygon. * （ol3 API[説明は Stable Only のチェックを外すと表示]ｌ */
angle: Math.PI / 4 /** angle: * Shape's angle in radians. A value of 0 will * have one of the shape's point facing up. * Default value is 0. * ラジウス単位の形状の角度。値 0 は、表を上にした一つの * 形状の点です。デフォル値は 0 です。 * （ol3 API[説明は Stable Only のチェックを外すと表示]） */
/** Math.PI() * 円周率。約 3.14159 です。 * （MDN[https://developer.mozilla.org/ja/docs/Web * /JavaScript/Reference/Global_Objects/Math/PI]） */
})) })],
'triangle': [new ol.style.Style({
image: new ol.style.RegularShape(
/** @type {olx.style.RegularShapeOptions} */({
fill: fill,
stroke: stroke,
points: 3,
radius: 10,
rotation: Math.PI / 4, /** rotation: * Rotation in radians (positive rotation * clockwise). Default is 0. * ラジウス単位の回転（時計回り）。デフォルトは 0 。 */
angle: 0 })) })],
'star': [new ol.style.Style({
image: new ol.style.RegularShape(
/** @type {olx.style.RegularShapeOptions} */({
fill: fill,
stroke: stroke,
points: 5,
radius: 10,
radius2: 4, /** radius2: * Outer radius of a star. *（ol3 API[説明は Stable Only のチェックを外すと表示]） */
angle: 0 })) })],
'cross': [new ol.style.Style({
image: new ol.style.RegularShape(
/** @type {olx.style.RegularShapeOptions} */({
fill: fill,
stroke: stroke,
points: 4,
radius: 10,
radius2: 0,
angle: 0
}))
})],
'x': [new ol.style.Style({
image: new ol.style.RegularShape(
/** @type {olx.style.RegularShapeOptions} */({
fill: fill,
stroke: stroke,
points: 4,
radius: 10,
radius2: 0,
angle: Math.PI / 4
}))
})]
};
var styleKeys = ['x', 'cross', 'star', 'triangle', 'square']; var count = 250;
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） */
features[i].setStyle(styles[styleKeys[Math.floor(Math.random() * 5)]]); /** setStyle * Set the style for the feature. This can be a * single style object, an array of styles, or a * function that takes a resolution and returns an * array of styles. If it is null the feature has * no style (a null style). * フィーチャのスタイルを設定します。これは、単一のスタイル * オブジェクト、スタイルの配列、または、解像度を取りスタイ * ルの配列を返す関数とすることができます。それが null の * 場合フィーチャは、スタイル（ヌルスタイル）を持っていませ * ん。（ol3 API） */
/** Math.floor() * The Math.floor() function returns the largest * integer less than or equal to a given number. * Math.floor() 関数は、指定された数以下の最大の整数、 * または、等しい数を返します。 * （MDN[https://developer.mozilla.org/en-US/docs/Web/ * JavaScript/Reference/Global_Objects/Math/floor]） */
}
var source = new ol.source.Vector({
/*: ol.source.Vector
* Provides a source of features for vector layers.
* ベクタレイヤのフィーチャのソースを提供します。（ol3 API）
*/
features: features });
var vectorLayer = new ol.layer.Vector({
/** ol.layer.Vector
* Vector data that is rendered client-side.
* クライアント側で描画されたベクタデータ。（ol3 API）
*/
source: source });
var map = new ol.Map({
layers: [
vectorLayer
],
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
0 件のコメント:
コメントを投稿