「255-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 source = new ol.source.Vector(); /*: ol.source.Vector * Provides a source of features for vector layers. * ベクタレイヤのフィーチャのソースを提供します。（ol3 API） */
var vector = new ol.layer.Vector({
/** ol.layer.Vector
* Vector data that is rendered client-side.
* クライアント側で描画されたベクタデータ。（ol3 API）
*/
source: source,
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'
})
})
})
});
/**
* Currently drawed feature
* @type {ol.Feature}
*/
var sketch;
/**
* Element for currently drawed feature
* @type {Element}
*/
/** @type * 値のタイプ（型）の説明 - 式などで表示 * （@use JSDoc[http://usejsdoc.org/]より） */
var sketchElement;
/**
* handle pointer move
* @param {Event} evt
*/
/** 「@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]） */
var mouseMoveHandler = function(evt) {
if (sketch) {
var output;
var geom = (sketch.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） */
if (geom instanceof ol.geom.Polygon) {
/** instanceof
* instanceof 演算子は、オブジェクトが自身のプロトタイプに
* コンストラクタの prototype プロパティを持っているかを確
* 認します。
* （MDN[https://developer.mozilla.org/ja/docs/
* JavaScript/Reference/Operators/instanceof]）
*/
/** ol.geom.Polygon * Polygon geometry.（ol3 API） */
output = formatArea(/** @type {ol.geom.Polygon} */ (geom));
} else if (geom instanceof ol.geom.LineString) {
/** ol.geom.LineString * Linestring geometry.（ol3 API） */
output = formatLength( /** @type {ol.geom.LineString} */ (geom));
}
sketchElement.innerHTML = output; /** element.innerHTML * innerHTML は、与えられた要素に含まれる全てのマークアップ * と内容を設定または取得します。 * （MDN[https://developer.mozilla.org/ja/docs/Web/ * API/element.innerHTML]） */
} };
var map = new ol.Map({
layers: [raster, vector],
target: 'map',
view: new ol.View({
center: [-11000000, 4600000],
zoom: 15
})
});
$(map.getViewport()).on('mousemove', mouseMoveHandler);
/** getViewport()
* Return: Viewport （ol3 API）
*/
/** jQuery on イベント */
var typeSelect = document.getElementById('type');
var draw; // global so we can remove it later
function addInteraction() {
var type = (typeSelect.value == 'area' ? 'Polygon' : 'LineString'); /** 条件演算子 condition ? expr1 : expr2 * condition: true か false かを評価する条件文です。 * expr1, expr2: 各々の値の場合に実行する式です。 * condition が true の場合、演算子は expr1 の値を選択します。 * そうでない場合は expr2 の値を選択します。 * （MDN[https://developer.mozilla.org/ja/docs/JavaScript/ * Reference/Operators/Conditional_Operator]） */
draw = new ol.interaction.Draw({
/** ol.interaction.Draw
* Interaction that allows drawing geometries.
* ジオメトリの描画を認めるインターラクション。（ol3 API）
*/
source: source,
type: /** @type {ol.geom.GeometryType} */ (type)
});
map.addInteraction(draw); /** addInteraction(interaction) * Add the given interaction to the map. * マップへ与えられたインターラクションを追加します。（ol3 API） */
draw.on('drawstart',
/** on()
* Listen for a certain type of event.
* ある種のイベントをリッスンします。（ol3 API）
*/
function(evt) {
// set sketch
sketch = evt.feature;
sketchElement = document.createElement('li');
/** document.createElement
* 指定の要素名の要素を生成します。
* （MDN[https://developer.mozilla.org/ja/docs/Web/
* API/document.createElement）
*/
var outputList = document.getElementById('measureOutput');
if (outputList.childNodes) {
/** Node.childNodes
* childNodes は 与えられた要素の子ノードの collection
* を返します。
* （MDN[https://developer.mozilla.org/ja/docs/Web/
* API/Node.childNodes]）
*/
outputList.insertBefore(sketchElement, outputList.firstChild); /** Node.insertBefore * 指定のノードを現在のノードの子ノードとして参照要素の前に * 挿入します。 * （MDN[https://developer.mozilla.org/ja/docs/Web/ * API/Node.insertBefore]） */
/** Node.firstChild * ノードのツリーの中で最初の子ノード、もしくは子ノードが * なければ null を返します。ノードが Document の場合 * は、その直接の子のリスト内の最初のノードを返します。 * （MDN[https://developer.mozilla.org/ja/docs/Web/ * API/Node.firstChild]） */
} else {
outputList.appendChild(sketchElement); /** Node.appendChild * 特定の親ノードの子ノードリストの末尾にノードを追加します。 * 追加しようとしたノードが既に存在していたら、それは現在の * 親ノードから除かれ、新しい親ノードに追加されます。 * （MDN[https://developer.mozilla.org/ja/docs/Web/ * API/Node.appendChild]） */
}
}, this);
draw.on('drawend',
function(evt) {
// unset sketch
sketch = null;
sketchElement = null;
}, this);
}
/**
* Let user change the geometry type.
* @param {Event} e Change event.
*/
typeSelect.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]）
*/
map.removeInteraction(draw); /** removeInteraction(() * Remove the given interaction from the map. * マップから与えられたインターラクションを削除します。 * （ol3 API） */
addInteraction(); };
/**
* format length output
* @param {ol.geom.LineString} line
* @return {string}
*/
/** @return（@returns と同義） * The @returns tag documents the value that a function * returns. * @returns タグは、関数が返す値について説明します。 * （@use JSDoc [http://usejsdoc.org/tags-returns..html]） */
var formatLength = function(line) {
var length = Math.round(line.getLength() * 100) / 100; /** Math.round() * 引数として与えた数を四捨五入して、最も近似の整数を返します。 * （MDN[https://developer.mozilla.org/ja/docs/Web/ * JavaScript/Reference/Global_Objects/Math/round]） */
/** getLength() * Return: Length (on projected plane).（ol3 API） */
var output;
if (length > 100) {
output = (Math.round(length / 1000 * 100) / 100) +
' ' + 'km';
} else {
output = (Math.round(length * 100) / 100) +
' ' + 'm';
}
return output;
};
/**
* format length output
* @param {ol.geom.Polygon} polygon
* @return {string}
*/
var formatArea = function(polygon) {
var area = polygon.getArea(); /** getArea() * Return: Area (on projected plane).（ol3 API） */
var output;
if (area > 10000) {
output = (Math.round(area / 1000000 * 100) / 100) +
' ' + 'km<sup>2</sup>';
} else {
output = (Math.round(area * 100) / 100) +
' ' + 'm<sup>2</sup>';
}
return output;
};
addInteraction();
0 件のコメント:
コメントを投稿