「gx-popup.js（8-geoext3.js）」は、マップを表示するための JavaScript ファイルです。
「8-geoext3.js」
Ext.require([ /** require( expressions, [fn], [scope] ) * Loads all classes by the given names and all their * direct dependencies; optionally executes the given * callback function when finishes, within the optional * scope. * 指定された名前とそのすべての直接依存によって、すべて * のクラスをロードします。任意の範囲内で、終了するとき * に任意で与えられたコールバック関数を実行します。 * （GeoExt doc[w/ext]） */
'GeoExt.component.Map', /** GeoExt.component.Map * The map component and a panel side by side * map component（マップコンポーネント）とパネルの位置関 * 係（並び）。 * （GeoExt doc[w/ext]） */
]);
var olMap, mapComp, popup;
Ext.application({
/** Ext.app.Application
* Represents an Ext JS application, which is typically
* a single page app using a Viewport.
* An application consists of one or more Views. The
* behavior of a View is managed by its corresponding
* ViewController and ViewModel.
* Global activities are coordinated by Controllers
* which are ultimately instantiated by an instance
* of this (or a derived) class.
* 通常、ビューポートを使用して1つのページの app である
* ExtJS アプリケーションを表します。
* アプリケーションは、1つまたは複数の View で構成されて
* います。View の動作は、その対応する ViewController
* と ViewModel によって管理されます。
* グローバルな動作は、このインスタンス（または派生）
* クラスで最終的にインスタンス化されている Controller
* によって調整されます。（GeoExt doc[w/ext]）
*/
name: 'Popup', /** name : String * The name of your application. This will also be the * namespace for your views, controllers models and * stores. Don't use spaces or special characters in * the name. Application name is mandatory. * アプリケーションの名前。これはまた、views、controllers * models と stores の名前空間になります。name には * スペースや特殊文字を使用しないでください。アプリケー * ション名は必須です。初期値は、''。 * （GeoExt doc[w/ext]） */
launch: function() {
/** launch( profile ) : Booleantemplate
* Called automatically when the page has completely
* loaded. This is an empty function that should be
* overridden by each application that needs to take
* action on page load.
* ページが完全にロードされたときに自動的に呼び出されます。
* これは、ページのロード時にアクションを実行する必要があ
* る各アプリケーションによって上書きされなければならない
* 空の関数です。（GeoExt doc[w/ext]）
*/
var description;
olMap = new ol.Map({
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.Stamen({
/** ol.source.Stamen
* Layer source for the Stamen tile server.
* Stamen タイルサーバのレイヤソース。（ol3 API）
* （2 - ol3ex 24b - Stamen example 1 参照）
*/
layer: 'watercolor'
})
}),
new ol.layer.Tile({
source: new ol.source.Stamen({
layer: 'terrain-labels'
})
})
],
view: new ol.View({
center: ol.proj.fromLonLat( [-122.416667, 37.783333] ),
/** ol.proj.fromLonLat(coordinate, opt_projection)
* Transforms a coordinate from longitude/latitude to a
* different projection.
* 緯度/経度座標から異なる投影に変換します。（ol3 API）
*/
zoom: 12 }) });
popup = Ext.create('GeoExt.component.Popup', {
/** create( [name], [args] ) : Object
* Instantiate a class by either full name, alias or
* alternate name.
* If Ext.Loader is enabled and the class has not been
* defined yet, it will attempt to load the class via
* synchronous loading.
* 完全な名前、別名または代替名のいずれかによってクラスを
* インスタンス化します。
* Ext.Loader が有効になっており、クラスがまだ定義されて
* いない場合は、同期ロードを経由してクラスをロードしよう
* とします。（GeoExt doc[w/ext）
*/
/** GeoExt.component.Popup * An GeoExt.component.Popup can be used to displays a * popup over the map. * GeoExt.component.Popup はマップ（map）上にポップアップ * を表示するために使用されます。 * （GeoExt doc[w/ext]） */
map: olMap,
width: 140
/** width : Number|String
* The width of this component. A numeric value will be
* interpreted as the number of pixels; a string value
* will be treated as a CSS value with units.
* このコンポーネントの幅。数値は、ピクセル数として解釈され
* ます。文字列値は単位でCSS値として扱われます。
* （GeoExt doc[w/ext]）
*/
});
mapComp = Ext.create('GeoExt.component.Map', {
title: 'GeoExt.component.Map Example',
/** title : String
* The title text to be used to display in the Panel
* Header. Or a config object for a Panel Title.
* Panel Header に表示するために使用される title テキ
* スト。または Panel Title のための config オブジェ
* クト。（GeoExt doc[w/ext）
*/
map: olMap,
region: 'center',
/** region : "north"/"south"/"east"/"west"/"center"
* Defines the region inside border layout.
* ボーダレイアウト内の領域を遅疑します。
* （GeoExt doc[w/ext]）
*/
pointerRest: true,
/** pointerRest : Boolean
* A boolean flag to control whether the map component
* will fire the events pointerrest and pointerrestout.
* If this is set to false (the default), no such events
* will be fired.Whether the component shall provide the
* pointerrest and pointerrestout events.
* Defaults to: false
* マップコンポーネントが pointerrest と pointerrestout
* イベントを発生するかどうかを制御するための boolean フラ
* グ。これが false に設定されている（デフォルト）場合は、
* コンポーネントが pointerrest と pointerrestoutイベント
* を提供しなければならないかどうかというようなイベントは発
* 生されません。
* デフォルト：false
* （GeoExt doc[w/ext]）
*/
pointerRestInterval: 750,
/** pointerRestInterval : Number
* The amount of milliseconds after which we will
* consider a rested pointer as pointerrest. Only
* relevant if pointerRest is true.The interval in
* milliseconds.
* Defaults to: 1000
* pointerrest として停止ポインタを考慮した後のミリ秒単位の
* 量。pointerRest が true の場合のみ関連性があります。ミリ
* 秒単位の間隔。
* デフォルト: 1000
* （GeoExt doc[w/ext]）
*/
pointerRestPixelTolerance: 5
/** pointerRestPixelTolerance : Number
* The amount of pixels that a pointer may move in both
* vertical and horizontal direction, and still be
* considered to be a pointerrest. Only relevant if
* pointerRest is true.The tolerance in pixels.
* Defaults to: 3
* ポインタはまだ両方の垂直および水平方向に移動でき、そして
* pointerrest であると考られるピクセルの量。pointerRest
* が true の場合のみ関連性がある。ピクセル単位の許容範囲。
* デフォルト：3
* （GeoExt doc[w/ext]）
*/
});
// Add a pointerrest handler to the map component to // render the popup. // ポップアップをレンダリングするためにマップコンポーネント // にpointerrestハンドラを追加します。
mapComp.on('pointerrest', function(evt) {
/** on( eventName, [fn], [scope], [options], [order] ) :
* Object
* The on method is shorthand for addListener.
* on メソッドは addListener の短縮形。
* （GeoExt doc[w/ext]）
*/
var coordinate = evt.coordinate,
/** coordinate{ol.Coordinate}
* The coordinate of the original browser event.
* オリジナルブラウザイベントの coordinate。（ol3 API）
*/
hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
coordinate, 'EPSG:3857', 'EPSG:4326'));
/** ol.coordinate.toStringHDMS(coordinate)
* Format a geographic coordinate with the hemisphere,
* degrees, minutes, and seconds.
* 半球、度、分、秒で地理座標をフォーマットします。
* （ol3 API）
*/
/** ol.proj.transform(coordinate, source, destination)
* Transforms a coordinate from source projection to
* destination projection. This returns a new coordinate
* (and does not modify the original).
* ソース投影から変換先投影に座標変換します。これは、新しい座
* 標を返します（オリジナルを変更しません）。（ol3 API）
*/
// Insert a linebreak after either N or S in hdms // hdms の N または S いずれかの後に改行を挿入します。
hdms = hdms.replace(/([NS])/, '$1<br>');
/** String.prototype.replace()
* replace() メソッドは、pattern にマッチした文字列の一部ま
* たは全てを replacement で置き換えた新しい文字列を返しま
* す。pattern は文字列または RegExp、replacement は文字列
* または各マッチで呼び出される関数です。
* str.replace(pattern, replacement[, flags])
* （MDN[https://developer.mozilla.org/ja/docs/Web/
* JavaScript/Reference/Global_Objects/String/replace]）
*/
// set content and position popup // コンテンツを設定しポップアップを配置します。
popup.setHtml('<p><strong>Pointer rested on</strong>' +
'<br /><code>' + hdms + '</code></p>');
/** setHtml( html )private
* Parameters - html : Object（GeoExt doc[w/ext]）
*/
popup.position(coordinate);
/** position(coordinate)
* (Re-)Positions the popup to the given coordinates.
* 指定された座標にポップアップを配置します。
* （GeoExt doc[w/ext]）
*/
popup.show();
/** show( this, eOpts )
* Fires after the component is shown when calling the
* show method.
* show メソッドを呼び出すときにコンポーネントが表示された
* 後発生します。
* （GeoExt doc[w/ext]）
*/
});
// hide the popup once it isn't on the map any longer //それがマップ（map）上にすでにないときポップアップを隠します。
mapComp.on('pointerrestout', popup.hide, popup);
description = Ext.create('Ext.panel.Panel', {
/** Ext.panel.Panel
* Panel is a container that has specific functionality
* and structural components that make it the perfect
* building block for application-oriented user interfaces.
* Panels are, by virtue of their inheritance from
* Ext.container.Container, capable of being configured
* with a layout, and containing child Components.
* パネルは、特定の機能とそれアプリケーション指向のユーザ
* インターフェイスに最適なビルディングブロックにする構造
* 的要素を持っているコンテナです。パネルは、
* Ext.container.Container からの継承のおかげで、layout
* で構成し、子コンポーネントを含むことができます。
* （GeoExt doc[w/ext]）
*/
contentEl: 'description',
/** contentEl : String
* Specify an existing HTML element, or the id of an
* existing HTML element to use as the content for this
* component.
* This config option is used to take an existing HTML
* element and place it in the layout element of a new
* component (it simply moves the specified DOM element
* after the Component is rendered to use as the content.
* 既存のHTMLエレメントを指定するか、既存のHTMLエレメン
* トの id は、このコンポーネントのコンテンツとして使用
* します。
* Component（コンポーネント）が 、content（コンテンツ）
* として使用するためにレンダリングされた後に、この設定オ
* プションは、既存のHTMLエレメントを取得し、新しい
* component（コンポーネント）の layout（レイアウト）エレ
* メントでそれを配置するために使用されます（それは単に指定
* された DOM エレメントを移動させます）。
* （GeoExt doc[w/ext）
*/
title: 'Description', region: 'east', width: 300,
border: false,
/** border : Boolean
* Specify as false to render the Panel with zero width
* borders.
* Leaving the value as true uses the selected theme's
* $panel-border-width.
* Defaults to false when using or extending Neptune.
* Defaults to: true.
* ゼロ幅の border（境界線）でパネルを描画するため false
* を指定します。
* true として値を残すためには、選択されたテーマ
* $panel-border-width を使用します。
* ネプチューン（Neptune Theme）を使用するか拡張すると
* き、デフォルトは false です。
* デフォルトは：true。
* （GeoExt doc[w/ext）
*/
bodyPadding: 5
/** bodyPadding : Number/String
* A shortcut for setting a padding style on the body
* element. The value can either be a number to be
* applied to all sides, or a normal css string
* describing padding.
* bodyエレメントにパディングスタイルを設定するための
* ショートカット。値は、すべての側面に適用される数字、
* または通常のCSSの文字列記述パディングのいずれかにで
* きます。
* （GeoExt doc[w/ext）
*/
});
Ext.create('Ext.Viewport', {
/** Ext.Viewport (Ext.container.Viewport)
* A specialized container representing the viewable
* application area (the browser viewport).
* The Viewport renders itself to the document body,
* and automatically sizes itself to the size of the
* browser viewport and manages window resizing. There
* may only be one Viewport created in a page.
* 表示可能なアプリケーション領域（ブラウザのビューポート）
* を表す特殊なコンテナ。
* Viewport は、document body にそれ自身をレンダリングし、
* 自動的に自身のサイズをブラウザのビューポートのサイズにし、
* ウィンドウのサイズ変更を管理します。１ページに作成した
* ビューポートは一つだけ設定できます。
* （GeoExt doc[w/ext]）
*/
layout: "border",
/** layout : Ext.enums.Layout/Object
* Important: In order for child items to be correctly
* sized and positioned, typically a layout manager must
* be specified through the layout configuration option.
* The sizing and positioning of child items is the
* responsibility of the Container's layout manager
* which creates and manages the type of layout you have
* in mind.
* 重要：子アイテムが正しいサイズと配置されるためには、
* 一般的にレイアウトマネージャは、layout configuration
* option（レイアウト設定オプション）を使用して指定する
* 必要があります。
* 子アイテムのサイズと位置は、レイアウトの種類を管理す
* るContainer's layout manager（コンテナレイアウトマ
* ネージャ）の役割です。
* （GeoExt doc[w/ext）
*/
items: [
/** items : Object/Object[]
* A single item, or an array of child Components to be
* added to this container
* Unless configured with a layout, a Container simply
* renders child Components serially into its
* encapsulating element and performs no sizing or
* positioning upon them.
* 単一の item（アイテム）、または子 Compornents（コン
* ポーネント）の配列は、このコンテナに追加します。
* layout（レイアウト）で構成されていない限り、Container
* （コンテナ）は単に、子 Compornents（コンポーネント）
* をそのカプセル化要素に直列にレンダリングし、それらに
* サイズや位置調整も実行しません。
* （GeoExt doc[w/ext）
*/
mapComp,
description
]
});
}
});
