「252-ol3ex.js」
/**
* Define a namespace for the application.
*/
window.app = {};
var app = window.app;
/**
* @constructor
* @extends {ol.interaction.Pointer}
*/
/** 「@constructor（@class と同義）」 * The @class tag marks a function as being a * constructor, meant to be called with the new * keyword to return an instance. * @classタグは、インスタンスを返すために、新しいキーワードで * 呼び出されることを意図し、コンストラクタとして function を * マークします。 * （@use JSDoc [http://usejsdoc.org/tags-class.html]） */
/** 「@extends（@augments と同義）」 * The @augments or@extends tag indicates that a * symbol inherits from, and potentially adds to, * a parent symbol. You can use this tag to document * both class-based and prototype-based inheritance. * @augmentsまたは@@extendsタグは、シンボルが親シンボルから * 継承し、潜在的に追加する、ことを示しています。 * あなたは、クラスベースとプロトタイプベース両方の継承を * 文書化するために、このタグを使用することができます。 * （@use JSDoc [http://usejsdoc.org/tags-augments.html]） */
app.Drag = function() {
ol.interaction.Pointer.call(this, {
/** ol.interaction.Pointer
* Base class that calls user-defined functions on
* down, move and up events. This class also manages
* "drag sequences".
* When the handleDownEvent user function returns
* true a drag sequence is started. During a drag
* sequence the handleDragEvent user function is
* called on move events. The drag sequence ends
* when the handleUpEvent user function is called
* and returns false.
* ダウンとムーブ、アップイベントに関するユーザ定義関数を
* 呼び出す基本クラス。このクラスは、「ドラッグ·シーケン
* ス」を管理します。
* handleDownEvent ユーザ関数が true を返した場合、
* ドラッグシーケンスが開始されます。ドラッグシーケンスの
* 間、handleDragEvent ユーザ関数は、ムーブイベントで
* 呼び出されます。ドラッグシーケンスは handleUpEvent
* ユーザ関数が呼び出されたときに終了し、falseを返します。
* （ol3 API）
*/
/** Function.prototype.call() * The call() method calls a function with a given * this value and arguments provided individually. * call メソッドは、与えられた this 値とここに与えられ * た引数とともに、関数を呼び出します。 * （MDN[https://developer.mozilla.org/en-US/docs/Web/ * JavaScript/Reference/Global_Objects/Function/call]） */
handleDownEvent: app.Drag.prototype.handleDownEvent, /** Object.prototype * The Object.prototype property represents the * Object prototype object. * Object.prototype プロパティは、Object プロパティ * オブジェクトを表します。 * （MDN[https://developer.mozilla.org/en-US/docs/Web/ * JavaScript/Reference/Global_Objects/Object/prototype]） */
handleDragEvent: app.Drag.prototype.handleDragEvent, handleMoveEvent: app.Drag.prototype.handleMoveEvent, handleUpEvent: app.Drag.prototype.handleUpEvent });
/**
* @type {ol.Pixel}
* @private
*/
/** @type * 値のタイプ（型）の説明 - 式などで表示 * （@use JSDoc[http://usejsdoc.org/]より） */
/** @private * The @private tag marks a symbol as private, or * not meant for general use. Private members are * not shown in the generated output unless JSDoc * is run with the -p/--private command-line * option. In JSDoc 3.3.0 and later, you can also * use the -a/--access command-line option to * change this behavior. * @private タグは、プライベートとしての記号を記し、一 * 般的な使用を意味していません。JSDoc が、-p/--private * command-line オプションと実行されない限り、プライ * ベートメンバは生成出力には表示されません。JSDocの3.3.0 * 以降では、この動作を変更するために -a/--access * command-line オプションを使用することもできます。 * （@use JSDoc[http://usejsdoc.org/tags-private.html]） */
this.coordinate_ = null;
/**
* @type {string|undefined}
* @private
*/
this.cursor_ = 'pointer';
/**
* @type {ol.Feature}
* @private
*/
this.feature_ = null;
/**
* @type {string|undefined}
* @private
*/
this.previousCursor_ = undefined;
};
ol.inherits(app.Drag, ol.interaction.Pointer); /** ol.inherits * ol.inherits is an alias to the goog.inherits * function. It is exported for use in non-compiled * application code. See ol.exports. * ol.inherits は、goog.inherits 関数へのエイリアス * です。これは、コンパイルされないアプリケーションコードで * 使用するためにエクスポートされます。 ol.exports を参照 * してください。 * （penLayers 3 API Documentation - Namespace: ol * [http://tschaub.net/openlayers.github.io/en/ * master/apidoc/ol.html]） * * goog.inherits(childCtor, parentCtor) * Inherit the prototype methods from one constructor * into another. * 一つのコンストラクタからもうひとつへプロパティメッソドを * 継承します。 * （goog Closure Library API Documentation * [http://docs.closure-library.googlecode.com/git/ * namespace_goog.html]） */
/**
* @param {ol.MapBrowserEvent} evt Map browser event.
* @return {boolean} `true` to start the drag sequence.
*/
/** 「@param」 * The @param tag provides the name, type, and * description of a function parameter. * The @param tag requires you to specify the name of * the parameter you are documenting. You can also * include the parameter's type, enclosed in curly * brackets, and a description of the parameter. * @paramタグは、関数パラメータの名前と型、説明を提供します。 * @paramタグを使用すると、文書化されたパラメータの名前を * 指定する必要があります。また、パラメータのタイプと、中括弧 * で囲まれたおよびパラメータの説明を含めることができます。 * （@use JSDoc [http://usejsdoc.org/tags-param.html]） */
/** @return（@returns と同義） * The @returns tag documents the value that a function * returns. * @returns タグは、関数が返す値について説明します。 * （@use JSDoc [http://usejsdoc.org/tags-returns..html]） */
app.Drag.prototype.handleDownEvent = function(evt) {
var map = evt.map;
var feature = map.forEachFeatureAtPixel(evt.pixel, /** 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） */
function(feature, layer) {
return feature;
});
if (feature) {
this.coordinate_ = evt.coordinate;
this.feature_ = feature;
}
return !!feature;
};
/**
* @param {ol.MapBrowserEvent} evt Map browser event.
*/
app.Drag.prototype.handleDragEvent = function(evt) {
var map = evt.map;
var feature = map.forEachFeatureAtPixel(evt.pixel,
function(feature, layer) {
return feature;
});
var deltaX = evt.coordinate[0] - this.coordinate_[0]; var deltaY = evt.coordinate[1] - this.coordinate_[1];
var geometry = /** @type {ol.geom.SimpleGeometry} */
(this.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） */
geometry.translate(deltaX, deltaY); /** translate(deltaX, deltaY) * Translate the geometry. * （ol3 API[説明は Stable Only のチェックを外すと表示]） */
this.coordinate_[0] = evt.coordinate[0]; this.coordinate_[1] = evt.coordinate[1]; };
/**
* @param {ol.MapBrowserEvent} evt Event.
*/
app.Drag.prototype.handleMoveEvent = function(evt) {
if (this.cursor_) {
var map = evt.map;
var feature = map.forEachFeatureAtPixel(evt.pixel,
function(feature, layer) {
return feature;
});
var element = evt.map.getTargetElement(); /** getTargetElement * Get the DOM element into which this map is * rendered. In contrast to`getTarget` this * method always return an `Element`, or `null` * if themap has no target. * このマップがレンダリングされる DOM 要素を取得します。 * マップがターゲットを持っていない場合は、`getTarget` * とは対照的に、このメソッドは常に` Element`、もしく * は `null`を返します。 * （ol/ol/map.js） */
if (feature) {
if (element.style.cursor != this.cursor_) {
this.previousCursor_ = element.style.cursor;
element.style.cursor = this.cursor_;
}
} else if (this.previousCursor_ !== undefined) {
element.style.cursor = this.previousCursor_;
this.previousCursor_ = undefined;
}
}
};
/**
* @param {ol.MapBrowserEvent} evt Map browser event.
* @return {boolean} `false` to stop the drag sequence.
*/
app.Drag.prototype.handleUpEvent = function(evt) {
this.coordinate_ = null;
this.feature_ = null;
return false;
};
var pointFeature = new ol.Feature(new ol.geom.Point([0, 0])); /** 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） */
var lineFeature = new ol.Feature(
new ol.geom.LineString([[-1e7, 1e6], [-1e6, 3e6]])); /** ol.geom.LineString * Linestring geometry.（ol3 API） */
var polygonFeature = new ol.Feature(
new ol.geom.Polygon([[[-3e6, -1e6], [-3e6, 1e6], [-1e6, 1e6], [-1e6, -1e6], [-3e6, -1e6]]])); /** ol.geom.Polygon * Polygon geometry.（ol3 API） */
var map = new ol.Map({
interactions: ol.interaction.defaults().extend([new app.Drag()]), /** 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 を参照してください。） */
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.TileJSON({
/** ol.source.TileJSON
* Layer source for tile data in TileJSON format.
* TileJSON フォーマットのタイルデータのためのレイヤソース。
*（ol3 API）
*/
url: 'http://api.tiles.mapbox.com/v3/mapbox.geography-class.jsonp' }) }),
new ol.layer.Vector({
/** ol.layer.Vector
* Vector data that is rendered client-side.
* クライアント側で描画されたベクタデータ。（ol3 API）
*/
source: new ol.source.Vector({
/** ol.source.Vector
* Provides a source of features for vector layers.
* ベクタレイヤのフィーチャのソースを用意します。（ol3 API）
*/
features: [pointFeature, lineFeature, polygonFeature] }),
style: new ol.style.Style({
/** ol.style.Style
* Base class for vector feature rendering styles.
* ベクタフィーチャがスタイルを描画するための基本クラス。
* （ol3 API）
*/
image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
/** ol.style.Icon
* Set icon style for vector features.
* ベクタフィーチャのアイコンスタイルを設定します。
* （ol3 API）
*/
anchor: [0.5, 46], anchorXUnits: 'fraction', anchorYUnits: 'pixels', opacity: 0.95, //src: 'data/icon.png' src: 'v3.1.1/examples/data/icon.png' // 修正 })),
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）
*/
width: 3, color: [255, 0, 0, 1] }),
fill: new ol.style.Fill({
/** ol.style.Fill
* Set fill style for vector features.
* ベクタフィーチャの塗りつぶしスタイルを設定。（ol3 API）
*/
color: [0, 0, 255, 0.6] }) }) }) ],
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
