「countries.geojson」データの内容は次のようになっていました。
「countries.geojson」
{"type":"FeatureCollection",
"features":[{
"type":"Feature",
"id":"AFG",
"properties":{"name":"Afghanistan"},
"geometry":{
"type":"Polygon",
"coordinates":[[[61.210817,35.650072],...
「210-ol3ex.js」
var styleCache = {};
var vectorLayer = new ol.layer.Vector({
/** ol.layer.Vector
* Vector data that is rendered client-side. Note that any
* property set in the options is set as a ol.Object property
* on the layer object; for example, setting title: 'My
* Title' in the options means that title is observable, and
* has get/set accessors.
* クライアント側で描画されたベクタデータ。オプションで設定した任
* 意のプロパティは、レイヤオブジェクトで ol.Object プロパティ
* として設定されていることに注意してください。たとえば、オプショ
* ンで、title：'My Title' を設定することは、タイトルは
* observable で、アクセサを取得/設定することを意味します。
* （ol3 API）
*/
source: new ol.source.GeoJSON({
/** ol.source.GeoJSON
* Static vector source in GeoJSON format
* GeoJSON フォーマットの静的ベクタソース。（ol3 API）
*/
projection: 'EPSG:3857',
//url: 'data/geojson/countries.geojson',
url: 'v3.0.0/examples/data/geojson/countries.geojson',
}),
style: function(feature, resolution) {
var text = resolution < 5000 ? feature.get('name') : '';
/** 条件演算子 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]）
*/
// 解像度が 5000 以下なら ラベル（name 国名）非表示
if (!styleCache[text]) {
// 'styleCache[text]={}' なので 'if(true)'
styleCache[text] = [new ol.style.Style({
/** ol.style.Style
* Base class for vector feature rendering styles.
* ベクタフィーチャがスタイルを描画するための基本クラス。
* （ol3 API）
*/
fill: new ol.style.Fill({
/** ol.style.Fill
* Set fill style for vector features.
* ベクタフィーチャの塗りつぶしスタイルを設定。（ol3 API）
*/
color: 'rgba(255, 255, 255, 0.6)'
}),
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: '#319FD3',
width: 1
}),
text: new ol.style.Text({
/** ol.style.Text
* Set text style for vector features.
* ベクタフィーチャの文字列のスタイルを設定します。
* （ol3 API）
*/
font: '12px Calibri,sans-serif',
text: text,
fill: new ol.style.Fill({
color: '#000'
}),
stroke: new ol.style.Stroke({
color: '#fff',
width: 3
})
})
})];
}
return styleCache[text];
}
});
var map = new ol.Map({
layers: [
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.MapQuest({layer: 'sat'})
/** ol.source.MapQuest
* Layer source for the MapQuest tile server.
* MapQuest タイルサーバのレイヤソース。（ol3 API
* 2 - ol3ex 23b - MapQuest example 2 参照）
*/
}),
vectorLayer
],
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 1
})
});
var highlightStyleCache = {};
var featureOverlay = new ol.FeatureOverlay({
/** ol.FeatureOverlay
* A mechanism for changing the style of a small number of
* features on a temporary basis, for example highlighting.
* This is necessary with the Canvas renderer, where, unlike
* in SVG, features cannot be individually referenced.
* ハイライトのように、一時的に少数のフィーチャがスタイルの変更す
* るためのメカニズム。これは Canvas レンダラが必要で、SVGとは異
* なり、フィーチャを個別に参照することはできません。（ol3 API）
*/
map: map,
style: function(feature, resolution) {
var text = resolution < 5000 ? feature.get('name') : '';
if (!highlightStyleCache[text]) {
highlightStyleCache[text] = [new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#f00',
width: 1
}),
fill: new ol.style.Fill({
color: 'rgba(255,0,0,0.1)'
}),
text: new ol.style.Text({
font: '12px Calibri,sans-serif',
text: text,
fill: new ol.style.Fill({
color: '#000'
}),
stroke: new ol.style.Stroke({
color: '#f00',
width: 3
})
})
})];
}
return highlightStyleCache[text];
}
});
var hightlight;
var displayFeatureInfo = function(pixel) {
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;
});
// 国名（name）の表示
var info = document.getElementById('info');
if (feature) {
info.innerHTML = feature.getId() + ': ' + feature.get('name');
/** getId()
* Return: id（ol3 API）
*/
} else {
info.innerHTML = ' ';
}
// フィーチャのハイライトのオンオフ
if (feature !== highlight) {
if (highlight) {
featureOverlay.removeFeature(highlight);
/** removeFeature(feature)
* Name: feature, Type: ol.Feature,
* Description: Feature （ol3 API）
*/
}
if (feature) {
featureOverlay.addFeature(feature);
/** addFeature(feature)
* Name: feature, Type: ol.Feature,
* Description: Feature （ol3 API）
*/
}
highlight = feature;
}
};
/** マウス（ポインタ）が動いた時、ビューポートのピクセル位置を * 取得して displayFeatureInfo を実行。 */
$(map.getViewport()).on('mousemove', function(evt) {
/** getViewport()
* Return: Viewport （ol3 API）
*/
/** jQuery on イベント */
var pixel = map.getEventPixel(evt.originalEvent);
displayFeatureInfo(pixel);
/** 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);
});
originalEvent
「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 件のコメント:
コメントを投稿