「254-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'})
* Layer source for the MapQuest tile server.
* MapQuest タイルサーバのレイヤソース。（ol3 API
* 2 - ol3ex 23b - MapQuest example 2 参照）
*/
});
var map = new ol.Map({
layers: [raster],
target: 'map',
view: new ol.View({
center: [-11000000, 4600000],
zoom: 4
})
});
/** The features are not added to a regular vector * layer/source, but to a feature overlay which holds a * collection of features. This collection is passed to * the modify and also the draw interaction, so that * both can add or modify features. * フィーチャは、通常、ベクター層/ソースに追加するが、フィーチャ * のコレクションを保持するフィーチャオーバーレイには追加されませ * ん。このコレクションは、変更、または、描画インターラクションに * 渡されます。そのため、フィーチャを追加または変更の両方ができま * す。 */
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）
*/
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'
})
})
})
});
featureOverlay.setMap(map); /** setMap(map) * Set the map to be associated with this overlay. * このオーバレイに関連付けられているマップを設定します。 * （ol3 API） */
var modify = new ol.interaction.Modify({
/** ol.interaction.Modify
* Interaction for modifying vector data.
* ベクタデータを変形するためのインタラクション。
* （ol3 API）
*/
features: featureOverlay.getFeatures(), /** the SHIFT key must be pressed to delete vertices, so * that new vertices can be drawn at the same position * of existing vertices * Shift キーは、頂点を削除するために押す必要があります。 * そうすると、新たな頂点が既存の頂点と同じ位置に描画できます、 */
deleteCondition: function(event) {
return ol.events.condition.shiftKeyOnly(event) && /** ol.events.condition.shiftKeyOnly * Returns: True if only the shift key is pressed. * （ol3 API） */
ol.events.condition.singleClick(event); /** ol.events.condition.singleClick * Returns: True if the event is a map singleclick event. * （ol3 API） */
} });
map.addInteraction(modify); /** addInteraction(interaction) * Add the given interaction to the map. * マップへ与えられたインターラクションを追加します。（ol3 API） */
var draw; // global so we can remove it later
function addInteraction() {
draw = new ol.interaction.Draw({
/** ol.interaction.Draw
* Interaction that allows drawing geometries.
* ジオメトリの描画を認めるインターラクション。（ol3 API）
*/
features: featureOverlay.getFeatures(), /** getFeatures() * Get the selected features. * 選択されたフィーチャを取得します。 * Return: Features collection（ol3 API） */
type: /** @type {ol.geom.GeometryType} */ (typeSelect.value)
/** @type
* 値のタイプ（型）の説明 - 式などで表示
* （@use JSDoc[http://usejsdoc.org/]より）
*/
}); map.addInteraction(draw); }
var typeSelect = document.getElementById('type');
/**
* 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]） */
typeSelect.onchange = function(e) {
map.removeInteraction(draw); /** removeInteraction(() * Remove the given interaction from the map. * マップから与えられたインターラクションを削除します。 * （ol3 API） */
addInteraction(); };
addInteraction();
