「map.js（3-geoext3.js）」は、マップを表示するための JavaScript ファイルです。
「3-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]） */
'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]） */
'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]） */
]);
var olMap, mapComponent, mapPanel;
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: 'MapComponent', /** 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 }) });
mapComponent = Ext.create('GeoExt.component.Map', {
/** 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）
*/
map: olMap
/** map : ol.Map
* A configured map or a configuration object for the
* map constructor.
* 設定されたマップまたは map（マップ）コンストラクタの
* 設定オブジェクト。
*/
});
mapPanel = Ext.create('Ext.panel.Panel', {
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）
*/
region: 'center',
/** region : "north"/"south"/"east"/"west"/"center"
* Defines the region inside border layout.
* ボーダレイアウトの内側の領域を定義します。
* （GeoExt doc[w/ext）
*/
layout: 'fit',
/** 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: [mapComponent]
/** 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）
*/
});
description = Ext.create('Ext.panel.Panel', {
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,
/** 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）
*/
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', {
layout: "border",
items: [
mapPanel,
description
]
});
}
});
0 件のコメント:
コメントを投稿