「210-ol3ex.js」
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 参照）
*/
}),
new ol.layer.Image({
/** ol.layer.Image
* Server-rendered images that are available for arbitrary
* extents and resolutions.
* 任意の範囲と解像度で利用可能な server-rendered イメージ。
* （ol3 API）
*/
source: new ol.source.ImageVector({
/** ol.source.ImageVector
* An image source whose images are canvas elements
* into which vector features read from a vector source
* (ol.source.Vector) are drawn. An ol.source.ImageVector
* object is to be used as the source of an image layer
* (ol.layer.Image). Image layers are rotated, scaled,
* and translated, as opposed to being re-rendered,
* during animations and interactions. So, like any
* other image layer, an image layer configured with
* an ol.source.ImageVector will exhibit this behaviour.
* This is in contrast to a vector layer, where vector
* features are re-drawn during animations and
* interactions.
* ベクタソース（ol.source.Vector）から読み込まれたベクタ
* フィーチャがキャンバスエレメントに描画されたイメージのイ
* メージソース。ol.source.ImageVectorオブジェクトは、
* イメージレイヤのソース（ol.layer.Image）として使用さ
* れます。イメージレイヤは、アニメーションとインターラクショ
* ンの間に、再レンダリングされるのではなく、回転、拡大縮小、
* および変換されています。それで、他のイメージレイヤと同様に、
* ol.source.ImageVector で設定されたイメージレイヤは、
* この動作を表します。これは、ベクタフィーチャがアニメーショ
* ンとインターラクションの間に再描画されるベクタレイヤとは
* 対照的です。（ol3 API）
*/
source: new ol.source.GeoJSON({
/** ol.format.GeoJSON
* Feature format for reading and writing data
* in the GeoJSON format.
* GeoJSON フォーマットのデータを読み書きするための
* フィーチャフォーマット。（ol3 API）
*/
projection: 'EPSG:3857',
// url: 'data/geojson/countries.geojson',
url: 'v3.0.0/examples/data/geojson/countries.geojson',
}),
style: 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
})
})
})
})
],
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 1
})
});
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: 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)'
})
})
});
var highlight;
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);
});
// マウスクリック時？
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 件のコメント:
コメントを投稿