2012_Earthquakes_Mag5.kml の内容は、次のようになっています。
「2012_Earthquakes_Mag5.kml」
<?xml version="1.0" encoding="UTF-8"?> <kml xmlns="http://earth.google.com/kml/2.0" xmlns:atom="http://www.w3.org/2005/Atom"> <Document> <name>2012 Earthquakes, Magnitude 5</name> <atom:author> <atom:name>U.S. Geological Survey</atom:name> </atom:author> <atom:link href="http://earthquake.usgs.gov"/>
<Folder> <name>Magnitude 5</name> <Placemark id="2012 Jan 15 13:40:16.40 UTC"> <name>M 5.9 - 2012 Jan 15, SOUTH SHETLAND ISLANDS</name> <magnitude>5.9</magnitude> <Point> <coordinates>-56.072,-60.975,0</coordinates> </Point> </Placemark>
<Placemark id="2012 Jan 19 06:48:48.75 UTC">---
「233-ol3ex.js」
var styleCache = {};
var styleFunction = function(feature, resolution) {
/** 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);
var style = styleCache[radius];
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: radius,
fill: new ol.style.Fill({
/** ol.style.Fill
* Set fill style for vector features.
* ベクタフィーチャの塗りつぶしスタイルを設定。（ol3 API）
*/
color: 'rgba(255, 153, 0, 0.4)' }),
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: 'rgba(255, 204, 0, 0.2)', width: 1 }) }) })]; styleCache[radius] = style; } return style; };
var vector = new ol.layer.Vector({
/** ol.layer.Vector
* Vector data that is rendered client-side.
* クライアント側で描画されるベクタデータ。（ol3 API）
*/
source: new ol.source.KML({
/** ol.source.KML
* Static vector source in KML format
* KML フォーマットの静的ベクタソース（0l3 API）
*/
extractStyles: false, projection: 'EPSG:3857', // url: 'data/kml/2012_Earthquakes_Mag5.kml' url: 'v3.0.0/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.
* Stamen タイルサーバのレイヤソース。（ol3 API）
* （2 - ol3ex 24b - Stamen example 2 参照）
*/
layer: 'toner'
})
});
var map = new ol.Map({
layers: [raster, vector],
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
var info = $('#info');
info.tooltip({
/** Tooltips tooltip.js
* Inspired by the excellent jQuery.tipsy plugin written
* by Jason Frame; Tooltips are an updated version,
* which don't rely on images, use CSS3 for animations,
* and data-attributes for local title storage.
* Jason Frame によって書かれた優れたjQuery.tipsyプラグイン
* に触発されました。Tooltips は、更新されたバージョンで、画像
* に依存しない、アニメーションに CSS3 を使用し、ローカルタイト
* ル·ストレージのためのデータの属性です。
* （Bootstrap[http://getbootstrap.com/javascript/
* #tooltips]）
*
* カーソルを何かの項目に合わせたとき、その項目に覆いかぶさるよう
* な形で小さな枠が出現し、その枠内には選択された項目に関する補足
* 情報が表示される。
* （ツールチップ[http://ja.wikipedia.org/wiki/
* %E3%83%84%E3%83%BC%E3%83%AB%E3%83%81%E3%83%83%E3%83%97]）
*/
animation: false,
/** animation
* Apply a CSS fade transition to the tooltip
* ツールチップにCSSのフェードトランジション（遷移）を適用しま
* す。
*/
trigger: 'manual'
/** trigger
* How tooltip is triggered - click | hover |
* focus | manual. You may pass multiple triggers;
* separate them with a space.
* ツールチップがトリガされる方法 - click | hover |
* focus | manual。複数のトリガを設定するには、スペースで
* 分割。
*/
});
var displayFeatureInfo = function(pixel) {
info.css({
/** .css()
* Get the computed style properties for the first element
* in the set of matched elements.
* マッチした要素のセットの最初の要素の計算されたスタイルプロ
* パティを取得します。
* （jQuery[http://api.jquery.com/css/]）
*/
left: pixel[0] + 'px',
top: (pixel[1] - 15) + 'px'
});
var feature = map.forEachFeatureAtPixel(pixel, function(feature, layer) {
/** forEachFeatureAtPixel
* Detect features that intersect a pixel on the viewport,
* and execute a callback with each intersecting feature.
* Layers included in the detection can be configured
* through opt_layerFilter. Feature overlays will always
* be included in the detection.
* ビューポート上のピクセルと交差するフィーチャを検出し、
* 各交差するフィーチャとコールバックを実行します。
* 検出に含まれるレイヤが opt_layerFilter を通じて
* 設定することができます。フィーチャーオーバーレイは
* 常に検出に含まれます。（ol3 API）
*/
return feature;
});
if (feature) {
info.tooltip('hide')
/** .tooltip('hide')
* Hides an element's tooltip. Returns to the caller
* before the tooltip has actually been hidden (i.e.
* before the hidden.bs.tooltip event occurs).
* This is considered a "manual" triggering of the
* tooltip.
* 要素のツールチップを非表示にします。ツールチップが実際に
* 隠される前（すなわち、hidden.bs.tooltipイベントが発生
* する前）に、caller が返されます。これは、ツールチップの
* トリガ（trigger:） が manyal とみなされます。
* （Bootstrap[http://getbootstrap.com/javascript/
* #tooltips]）
*/
.attr('data-original-title', feature.get('name'))
/** .attr()
* Get the value of an attribute for the first element
* in the set of matched elements or set one or more
* attributes for every matched element.
* マッチした要素のセットの最初の要素の属性の値を取得するか、
* すべての一致した要素の1つ以上の属性を設定します。
* （jQuery[http://api.jquery.com/attr/]）
*/
/** get(key)
* Gets a value.
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
.tooltip('fixTitle')
// 変更した title 属性を tooltip に反映
.tooltip('show');
/** .tooltip('show')
* Reveals an element's tooltip. Returns to the caller
* before the tooltip has actually been shown (i.e.
* before the shown.bs.tooltip event occurs).
* This is considered a "manual" triggering of the
* tooltip. Tooltips with zero-length titles are never
* displayed.
* 要素のツールチップをRevealsにします。ツールチップが実際に
* 表示される前（すなわち、shown.bs.tooltipイベントが発生
* する前）に、caller が返されます。これは、ツールチップの
* トリガ（trigger:） が manyal とみなされます。
* zero-length タイトルのツールチップは決して表示されません。
* （Bootstrap[http://getbootstrap.com/javascript/
* #tooltips]）
*/
} else {
info.tooltip('hide');
}
};
$(map.getViewport()).on('mousemove', function(evt) {
/** getViewport()
* Return: Viewport （ol3 API）
*/
// jQuery on イベント
displayFeatureInfo(map.getEventPixel(evt.originalEvent)); /** getEventPixel * Returns the map pixel position for a browser event. * ブラウザイベントに対して、マップのピクセル位置を返します。 * （ol3 API） */ });
map.on('click', function(evt) {
/** on
* Listen for a certain type of event.
* あるタイプのイベントをリッスンします。（ol3 API）
*/
displayFeatureInfo(evt.pixel);
});
0 件のコメント:
コメントを投稿