「2161-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.OSM() /** ol.source.OSM * Layer source for the OpenStreetMap tile server. * OpenStreetMap タイルサーバのレイヤソース。（ol3 API） */
});
var source = new ol.source.Vector({wrapX: false});
/** ol.source.Vector
* Provides a source of features for vector layers.
* Vector features provided by this source are
* suitable for editing. See ol.source.VectorTile for
* vector data that is optimized for rendering.
* ベクタレイヤのフィーチャのソースを用意します。このソース
* が提供するベクタフィーチャは、編集に適しています。レンダ
* リングのために最適化されたベクタデータの
* ol.source.VectorTile を参照してください。（ol3 API）
*/
/** wrapX: * Wrap the world horizontally. Default is true. For * vector editing across the -180° and 180° meridians * to work properly, this should be set to false. The * resulting geometry coordinates will then exceed the * world bounds. * 水平方向に世界をラップします。デフォルトは true。-180° * と180°の子午線を横切って編集するベクトルが正しく動作す * るために、これは false に設定する必要があります。ジオメ * トリの座標の結果は、その後、世界の境界線を超えます。 * （ol3 API[説明は Stable Only のチェックを外すと表示]） */
var vector = new ol.layer.Vector({
/** ol.layer.Vector
* Vector data that is rendered client-side.
* クライアント側で描画されるベクタデータ。（ol3 API）
*/
source: source });
var map = new ol.Map({
layers: [raster, vector],
target: 'map',
view: new ol.View({
center: [-11000000, 4600000],
zoom: 4
})
});
var typeSelect = document.getElementById('type');
var draw; // global so we can remove it later // グローバル、私たちは、後でそれを削除することができます
function addInteraction() {
var value = typeSelect.value;
if (value !== 'None') {
var geometryFunction;
if (value === 'Square') {
value = 'Circle';
geometryFunction = ol.interaction.Draw.createRegularPolygon(4);
/** ol.interaction.Draw.createRegularPolygon(opt_sides, opt_angle)
* Create a geometryFunction for type: 'Circle' that
* will create a regular polygon with a user specified
* number of sides and start angle instead of an
* ol.geom.Circle geometry.
* ol.geom.Circle ジオメトリの代わりにユーザーが指定した
* 辺の数の正多角形を作成し、角度を開始しする
* 「type: 'Circle'」の geometryFunction を作成します。
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
} else if (value === 'Box') {
value = 'Circle';
geometryFunction = ol.interaction.Draw.createBox();
/** ol.interaction.Draw.createBox()
* Create a geometryFunction that will create a
* box-shaped polygon (aligned with the coordinate
* system axes). Use this with the draw interaction
* and type: 'Circle' to return a box instead of a
* circle geometry.
* （座標系の軸で位置合わせされる）ボックス状のポリゴンで
* geometryFunction を作成します。サークルジオメトリの替
* りにボックスを返すために、ドローインタラクションと
* 「type: 'Circle'」して使用してください。
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
} else if (value === 'Star') {
value = 'Circle';
geometryFunction = function(coordinates, geometry) {
if (!geometry) {
geometry = new ol.geom.Polygon(null);
/** ol.geom.Polygon
* Polygon geometry.（ol3 API）
*/
}
var center = coordinates[0];
var last = coordinates[1];
var dx = center[0] - last[0];
var dy = center[1] - last[1];
var radius = Math.sqrt(dx * dx + dy * dy);
/** Math.sqrt()
* 引数として与えた数の平方根を返します。
* （MDN[https://developer.mozilla.org/ja/docs/Web/
* JavaScript/Reference/Global_Objects/Math/sqrt]）
*/
var rotation = Math.atan2(dy, dx);
/** Math.atan2()
* 引数の比率でのアークタンジェントを返します。
* （MDN[https://developer.mozilla.org/ja/docs/Web/
* JavaScript/Reference/Global_Objects/Math/atan2]）
*/
var newCoordinates = [];
var numPoints = 12;
for (var i = 0; i < numPoints; ++i) {
var angle = rotation + i * 2 * Math.PI / numPoints;
/** Math.PI()
* 円周率。約 3.14159 です。
* （MDN[https://developer.mozilla.org/ja/docs/Web
* /JavaScript/Reference/Global_Objects/Math/PI]）
*/
var fraction = i % 2 === 0 ? 1 : 0.5;
/** %（剰余）
* 剰余演算子は1つ目の数値を2つ目の数値で割った余りを返し
* ます。
* （MDN[https://developer.mozilla.org/ja/docs/Web/
* JavaScript/Reference/Operators/
* Arithmetic_Operators#Remainder]）
*/
/** ===（厳密に等しい）
* 厳密等価演算子はオペランド同士が、型を変換することなく
* 厳密に等しいならば真を返します。
* （MDN[https://developer.mozilla.org/ja/docs/Web/
* JavaScript/Reference/Operators/
* Comparison_Operators#Identity]）
*/
var offsetX = radius * fraction * Math.cos(angle);
/** Math.cos()
* 引数として与えた数のコサインを返します。
* （MDN[https://developer.mozilla.org/ja/docs/Web/
* JavaScript/Reference/Global_Objects/Math/cos]）
*/
var offsetY = radius * fraction * Math.sin(angle);
/** Math.sin()
* 引数として与えた数のサイン（正弦）を返します。
* （MDN[https://developer.mozilla.org/ja/docs/Web/
* JavaScript/Reference/Global_Objects/Math/sin]）
*/
newCoordinates.push([center[0] + offsetX, center[1] + offsetY]);
/** push(elem)
* Insert the provided element at the end of the
* collection.
* コレクションの最後に供給されたエレメントに挿入します。
* Name: elem, Type: T, Description: Element
* （ol3 API）
*/
}
newCoordinates.push(newCoordinates[0].slice());
/** Array.prototype.slice()
* The slice() method returns a shallow copy of a
* portionof an array into a new array object.
* slice()メソッドは、配列の一部の簡易コピーを新しい配列オ
* ブジェクトに返します。
* （MDN[https://developer.mozilla.org/ja/docs/Web/
* JavaScript/Reference/Global_Objects/Array/slice]）
*/
geometry.setCoordinates([newCoordinates]);
/** setCoordinates()
* setCoordinates(coordinates) [Type: ol.Coordinate,
* Description: Coordinates]（ol3 API）
*/
return geometry; }; }
draw = new ol.interaction.Draw({
/** ol.interaction.Draw
* Interaction that allows drawing geometries.
* ジオメトリの描画を認めるインターラクション。（ol3 API）
*/
source: source,
/** source
* Destination source for the drawn features.
* 描画されたフィーチャのための宛先ソース。
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
type: /** @type {ol.geom.GeometryType} */ (value),
/** type
* Drawing type ('Point', 'LineString', 'Polygon',
* 'MultiPoint', 'MultiLineString', 'MultiPolygon'
* or 'Circle'). Required.
* タイプ（「ポイント」、 「ラインストリング」、「ポリゴン」、
* 「マルチポイント」、「マルチラインストリング」、 「マルチ
* ポリゴン'」または「'サークル」）を描画します。 必須。
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
/** @type
* 値のタイプ（型）の説明 - 式などで表示
* （@use JSDoc[http://usejsdoc.org/]より）
*/
geometryFunction: geometryFunction
/** geometryFunction
* Function that is called when a geometry's coordinates
* are updated.
* ジオメトリの座標が更新されるとき、予備だ荒れる関数です。
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
});
map.addInteraction(draw); /** addInteraction(interaction) * Add the given interaction to the map. * マップへ指定されたインターラクションを追加します。 * （ol3 API） */
} }
/** * Handle change event. * 変更イベントを処理します。 */
typeSelect.onchange = function() {
/** 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(); };
addInteraction();
