「2118-ol3ex.js」
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.MapQuest({layer: 'sat'})
/** ol.source.MapQuest
* Layer source for the MapQuest tile server.
* MapQuest タイルサーバのレイヤソース。（ol3 API
* 2 - ol3ex 23b - MapQuest example 2 参照）
*/
});
var vector = 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） */
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.2)' }),
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: '#ffcc33', width: 2 }),
image: new ol.style.Circle({
/** ol.style.Circle
* Set circle style for vector features.
* ベクタフィーチャの円のスタイルを設定。（ol3 API）
*/
radius: 7,
fill: new ol.style.Fill({
color: '#ffcc33'
})
})
})
});
var map = new ol.Map({
layers: [raster, vector],
target: 'map',
view: new ol.View({
center: [-11000000, 4600000],
zoom: 4
})
});
var Modify = {
init: function() {
this.select = new ol.interaction.Select(); /** 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） */
map.addInteraction(this.select); /** addInteraction(interaction) * Add the given interaction to the map. * マップへ与えられたインターラクションを追加します。 * （ol3 API） */
this.modify = new ol.interaction.Modify({
/** ol.interaction.Modify
* Interaction for modifying vector data.
* ベクタデータを変形するためのインタラクション。
* （ol3 API）
*/
features: this.select.getFeatures()
/** getFeatures()
* Get the selected features.
* 選択されたフィーチャを取得します。
* Return: Features collection（ol3 API）
*/
});
map.addInteraction(this.modify);
this.setEvents();
},
setEvents: function() {
var selectedFeatures = this.select.getFeatures();
this.select.on('change:active', function() {
/** on
* Listen for a certain type of event.
* あるタイプのイベントをリッスンします。（ol3 API）
*/
selectedFeatures.forEach(selectedFeatures.remove, selectedFeatures);
/** forEach(f, opt_this)
* Iterate over each element, calling the provided
* callback.
* 提供されたコールバックを呼び出すため、各要素を反復処理しま
* す。（ol3 API）
*/
/** remove(elem)
* Remove the first occurrence of an element from
* the collection.
* コレクションから最初に発生する要素を削除します。（ol3 API）
*/
});
},
setActive: function(active) {
this.select.setActive(active); /** setActive(active) * Activate or deactivate the interaction. * インターラクションを有効または無効にします。 * （ol3 API[説明は Stable Only のチェックを外すと表示]） */
this.modify.setActive(active); } }; Modify.init();
var Draw = {
init: function() {
map.addInteraction(this.Point);
this.Point.setActive(false);
map.addInteraction(this.LineString);
this.LineString.setActive(false);
map.addInteraction(this.Polygon);
this.Polygon.setActive(false);
},
Point: new ol.interaction.Draw({
/** ol.interaction.Draw
* Interaction that allows drawing geometries.
* ジオメトリの描画を認めるインターラクション。（ol3 API）
*/
source: vector.getSource(), /** getSource() * Return: Source.（ol3 API） */
type: /** @type {ol.geom.GeometryType} */ ('Point')
/** @type
* 値のタイプ（型）の説明 - 式などで表示
* （@use JSDoc[http://usejsdoc.org/]より）
*/
}),
LineString: new ol.interaction.Draw({
source: vector.getSource(),
type: /** @type {ol.geom.GeometryType} */ ('LineString')
}),
Polygon: new ol.interaction.Draw({
source: vector.getSource(),
type: /** @type {ol.geom.GeometryType} */ ('Polygon')
}),
getActive: function() {
return this.activeType ? this[this.activeType].getActive() : false; /** 条件演算子 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]） */
/** getActive() * Return whether the interaction is currently active. * インターラクションが現在有効かどうかを返します。 * true if the interaction is active, false otherwise. * （ol3 API[説明は Stable Only のチェックを外すと表示]） */
},
setActive: function(active) {
var type = optionsForm.elements['draw-type'].value;
if (active) {
this.activeType && this[this.activeType].setActive(false);
this[type].setActive(true);
this.activeType = type;
} else {
this.activeType && this[this.activeType].setActive(false);
this.activeType = null;
}
}
};
Draw.init();
var optionsForm = document.getElementById('options-form');
/**
* Let user change the geometry type.
* @param {Event} e Change event.
*/
/** 「@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]）
*/
optionsForm.onchange = function(e) {
/** GlobalEventHandlers.onchange()
* The onchange property sets and returns the event handler
* for the change event.
* onchange プロパティは、change イベントに対してイベントハ
* ンドラを設定、および、返します。
* （MDN[https://developer.mozilla.org/en-US/docs/Web/
* API/GlobalEventHandlers/onchange]）
*/
var type = e.target.getAttribute('name');
/** element.getAttribute
* getAttribute() は指定の要素について名前付けされた属性の
* 値を返します。名前付けされた属性が存在しなければ、返され
* る値は null もしくは ""(空文字列)となります。
* （MDN[https://developer.mozilla.org/ja/docs/Web/
* API/Element/getAttribute]）
*/
var value = e.target.value;
if (type == 'draw-type') {
Draw.getActive() && Draw.setActive(true);
} else if (type == 'interaction') {
if (value == 'modify') {
Draw.setActive(false);
Modify.setActive(true);
} else if (value == 'draw') {
Draw.setActive(true);
Modify.setActive(false);
}
}
};
Draw.setActive(true); Modify.setActive(false);
/** The snap interaction must be added after the Modify * and Draw interactions in order for its map browser * event handlers to be fired first. Its handlers are * responsible of doing the snapping. * スナップインタラクションは、そのマップブラウザのイベント * ハンドラが最初に発生するために、Modify と Draw インタラ * クションの後で追加される必要があります。そのハンドラは、 * スナップを実行しなければなりません。 */
var snap = new ol.interaction.Snap({
/** ol.interaction.Snap
* Handles snapping of vector features while modifying
* or drawing them. The features can come from a
* ol.source.Vector or ol.Collection Any interaction
* object that allows the user to interact with the
* features using the mouse can benefit from the
* snapping, as long as it is added before.
* The snap interaction modifies map browser event
* coordinate and pixel properties to force the snap to
* occur to any interaction that them.
* 変更または描画の間、ベクタフィーチャのスナップを処理しま
* す。フィーチャは、ol.source.Vector または ol.Collection
* 由来です。ユーザーがマウスを使用してフィーチャをインタラ
* クションすることを可能にする任意のインタラクションオブジェ
* クトは、それが前に追加されるように、スナップの恩恵を得る
* ことができます。スナップインタラクションは、マップブラウ
* ザイベントコーディネートと画素特性をそれらの任意のインタ
* ラクションのために発生するスナップへ強制的に変更します。
* （ol3 API）
*/
source: vector.getSource() }); map.addInteraction(snap);
0 件のコメント:
コメントを投稿