「273-ol3ex.js」
var earthquakeFill = new ol.style.Fill({
/** ol.style.Fill
* Set fill style for vector features.
* ベクタフィーチャの塗りつぶしスタイルを設定。（ol3 API）
*/
color: 'rgba(255, 153, 0, 0.8)' });
var earthquakeStroke = 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: 'rgba(255, 204, 0, 0.2)',
width: 1
});
var textFill = new ol.style.Fill({
color: '#fff'
});
var textStroke = new ol.style.Stroke({
color: 'rgba(0, 0, 0, 0.6)',
width: 3
});
var invisibleFill = new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.01)'
});
function createEarthquakeStyle(feature) {
/** 2012_Earthquakes_Mag5.kml stores the magnitude
* of each earthquake in a standards-violating
* <magnitude> tag in each Placemark. We extract
* it from the Placemark's name instead.
* 2012_Earthquakes_Mag5.kml は、ぞれぞれの Placemark
* にある標準規格に違反する <magnitude> タグのぞれぞれの
* 地震のマグニチュードを格納しています。代わりに Placemark
* の名前からそれを抽出します。
*/
var name = feature.get('name');
/** get(key)
* Gets a value.
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
var magnitude = parseFloat(name.substr(2)); /** parseFloat() * 引数として与えられた文字列を解析し、浮動小数点数を返します。 * （MDN[https://developer.mozilla.org/ja/docs/Web/ * JavaScript/Reference/Global_Objects/parseFloat]） */
/** String.prototype.substr() * The substr() method returns the characters in a * string beginning at the specified location * through the specified number of characters. * substr（）メソッドは、文字列内の指定した位置から始まり、 * 指定した文字数のまでの文字を返します。 * （MDN[https://developer.mozilla.org/en-US/docs/Web/ * JavaScript/Reference/Global_Objects/String/substr]） */
var radius = 5 + 20 * (magnitude - 5);
return new ol.style.Style({
/** ol.style.Style
* Base class for vector feature rendering styles.
* ベクタフィーチャがスタイルを描画するための基本クラス。
* （ol3 API）
*/
geometry: feature.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） */
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）
*/
radius1: radius, /** radius1: * Inner radius of a star. *（ol3 API[説明は Stable Only のチェックを外すと表示]） */
radius2: 3, /** radius2: * Outer radius of a star. *（ol3 API[説明は Stable Only のチェックを外すと表示]） */
points: 5, /** 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 のチェックを外すと表示]） */
angle: Math.PI, /** 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]） */
fill: earthquakeFill, // Fill style.（ol3 API） stroke: earthquakeStroke // Stroke style.（ol3 API） }) }); }
var maxFeatureCount;
function calculateClusterInfo(resolution) {
maxFeatureCount = 0;
var features = vector.getSource().getFeatures(); /** getSource() * Return: Source（al3 API） */
/** getFeatures() * Get all features on the source. * ソース上のすべてのフィーチャを取得します。 * Returns: Features.（al3 API） */
var feature, radius;
for (var i = features.length - 1; i >= 0; --i) {
feature = features[i];
var originalFeatures = feature.get('features');
var extent = ol.extent.createEmpty(); /** ol.extent.createEmpty * Returns: Empty extent.（al3 API） */
for (var j = 0, jj = originalFeatures.length; j < jj; ++j) {
ol.extent.extend(extent, originalFeatures[j].getGeometry().getExtent()); /** ol.extent.extend(extent1, extent2) * Returns: Extent.（al3 API） */
/** getExtent() * Get the extent of the geometry. * ジオメトリの範囲を取得します。（ol3 API） */
}
maxFeatureCount = Math.max(maxFeatureCount, jj); /** Math.max() * 引数として与えた複数の数の中で最大の数を返します。 * （MDN [https://developer.mozilla.org/ja/docs/Web/ * JavaScript/Reference/Global_Objects/Math/max]） */
radius = 0.25 * (ol.extent.getWidth(extent) + ol.extent.getHeight(extent)) / /** ol.extent.getWidth(extent) * Return: Width.（ol3 API） */
/** ol.extent.getHeight(extent) * Return: Height.（ol3 API） */
resolution;
feature.set('radius', radius);
/** set(key, value)
* Sets a value.
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
} }
var currentResolution;
function styleFunction(feature, resolution) {
if (resolution != currentResolution) {
calculateClusterInfo(resolution);
currentResolution = resolution;
}
var style;
var size = feature.get('features').length;
if (size > 1) {
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: feature.get('radius'),
fill: new ol.style.Fill({
color: [255, 153, 0, Math.min(0.8, 0.4 + (size / maxFeatureCount))] /** Math.min() * 引数として与えた複数の数の中で最小の数を返します。 * （MDN [https://developer.mozilla.org/ja/docs/Web/ * JavaScript/Reference/Global_Objects/Math/min]） */
}) }),
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: textFill,
stroke: textStroke
})
})];
} else {
var originalFeature = feature.get('features')[0];
style = [createEarthquakeStyle(originalFeature)];
}
return style;
}
function selectStyleFunction(feature, resolution) {
var styles = [new ol.style.Style({
image: new ol.style.Circle({
radius: feature.get('radius'),
fill: invisibleFill
})
})];
var originalFeatures = feature.get('features');
var originalFeature;
for (var i = originalFeatures.length - 1; i >= 0; --i) {
originalFeature = originalFeatures[i];
styles.push(createEarthquakeStyle(originalFeature)); /** push(elem) * Insert the provided element at the end of the * collection. * コレクションの最後に供給されたエレメントに挿入します。 * Name: elem, Type: T, Description: Element * （ol3 API） */
} return styles; }
var vector = new ol.layer.Vector({
/** ol.layer.Vector
* Vector data that is rendered client-side.
* クライアント側で描画されたベクタデータ。（ol3 API）
*/
source: new ol.source.Cluster({
distance: 40, /** distance * Minimum distance in pixels between clusters. * Default is 20. * クラスタ間のピクセル単位の最短間隔。デフォルトは 20。 *（ol3 API[説明は Stable Only のチェックを外すと表示]）） */
source: new ol.source.KML({
/** ol.source.KML
* Static vector source in KML format
* KML フォーマットの静的ベクタソース（0l3 API）
*/
extractStyles: false, /** extractStyles: * Extract styles from the KML document. Default * is true. * KML ドキュメントからの抽出スタイル。デフォrとは true。 * （0l3 API） */
projection: 'EPSG:3857',
// url: 'data/kml/2012_Earthquakes_Mag5.kml' url: 'v3.2.1/examples/data/kml/2012_Earthquakes_Mag5.kml'
}) }), style: styleFunction });
var raster = 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.
* Steman タイルサーバのレイヤソース。（0l3 API）
* （「2 - ol3ex 24b - Stamen example 2」
* も参照してください。
*/
layer: 'toner' }) });
var map = new ol.Map({
layers: [raster, vector],
interactions: ol.interaction.defaults().extend([new ol.interaction.Select({
/** ol.interaction.defaults
* Set of interactions included in maps by default.
* Specific interactions can be excluded by setting
* the appropriate option to false in the constructor
* options, but the order of the interactions is fixed.
* If you want to specify a different order for
* interactions, you will need to create your own
* ol.interaction.Interaction instances and insert
* them into a ol.Collection in the order you want
* before creating your ol.Map instance.
* デフォルトでマップに含まれるインターラクションのセット。
* 具体的なインターラクションは、コンストラクタのオプションで
* 適切なオプションをfalseに設定することで除外することができます
* が、インターラクションの順番は固定されています。インターラク
* ションに対して別の順番を指定したい場合は、独自の
* ol.interaction.Interaction インスタンスを作成し、ol.Map
* インスタンスを作成する前に望む順番で ol.Collection にそれら
* を挿入する必要があります。（ol3 API）
* （訳注：インターラクションの順番は、API を参照してください。）
*/
/** ol.interaction.Select * Handles selection of vector data. A * ol.FeatureOverlay is maintained internally to * store the selected feature(s). Which features * are selected is determined by the condition * option, and optionally the toggle or add/remove * options. * ベクタデータの選択を処理します。 ol.FeatureOverlay * は、選択したフィーチャを格納するために内部的に維持され * ています。選択されているどのフィーチャでも条件オプショ * ン、そして部分的にトグルまたは追加/削除オプションによっ * て決定されます。（ol3 API） */
condition: function(evt) {
return evt.originalEvent.type == 'mousemove' ||
evt.type == 'singleclick';
},
style: selectStyleFunction
})]),
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
0 件のコメント:
コメントを投稿