「overviewMap.js（4-geoext3.js）」は、マップを表示するための JavaScript ファイルです。
「4-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]） */
'GeoExt.component.OverviewMap' /** GeoExt.component.OverviewMap * An GeoExt.component.OverviewMap displays an overview * map of an parent map. You can use this component as * any other Ext.Component, e.g give it as an item to a * panel. * GeoExt.component.OverviewMapは 親マップの overview * （概要）マップを表示します。このコンポーネントを任意の * 他の Ext.Component として使用できます。例えば、それを * item（項目）として panel（パネル）に与えることができます。 * （GeoExt doc[w/ext]） */
]);
var mapComponent, mapPanel, overviewMap1, overviewMap2;
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: 'OverviewMaps', /** 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 source, source2, layer, layer2, olMap, description, ovMapPanel1, ovMapPanel2;
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 参照）
*/
layer = 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: source });
source2 = new ol.source.MapQuest({layer: 'osm'});
layer2 = new ol.layer.Tile({
source: source2
});
olMap = new ol.Map({
layers: [layer],
interactions: ol.interaction.defaults().extend([
/** ol.interaction.defaults
* Set of interactions included in maps by default.
* Specific interactions can be excluded by setting
* the appropriate option to false in the constructor
* options, but the order of the interactions is fixed.
* If you want to specify a different order for
* interactions, you will need to create your own
* ol.interaction.Interaction instances and insert
* them into a ol.Collection in the order you want
* before creating your ol.Map instance.
* デフォルトでマップに含まれるインターラクションのセット。
* 具体的なインターラクションは、コンストラクタのオプションで
* 適切なオプションを false に設定することで除外することがで
* きますが、インターラクションの順番は固定されています。イン
* ターラクションに対して別の順番を指定したい場合は、独自の
* ol.interaction.Interaction インスタンスを作成し、
* ol.Map インスタンスを作成する前に、望む順番で
* ol.Collection にそれらを挿入する必要があります。
* （ol3 API）
*（訳注：インターラクションの順番は、API を参照してください。）
*/
new ol.interaction.DragRotateAndZoom()
/** ol.interaction.DragRotateAndZoom
* Allows the user to zoom and rotate the map by
* clicking and dragging on the map. By default,
* this interaction is limited to when the shift
* key is held down.
* This interaction is only supported for mouse
* devices.
* And this interaction is not included in the
* default interactions.
* マップ上をクリックとドラッグすることで、マップをズーム
* し、回転することを許可します。デフォルトでは、このイン
* ターラクションは、シフトキーを押しているときに制限され
* ています。
* このインターラクションは、マウスデバイスだけサポートし
* ます。
* そして、このインターラクションは、デフォルトのインター
* ラクションに含まれません。（ol3 API）
*/
]),
view: new ol.View({
center: [0, 0],
zoom: 4
})
});
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', {
/** 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]）
*/
title: 'GeoExt.component.OverviewMap 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）
*/
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）
*/
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）
*/
});
overviewMap1 = Ext.create('GeoExt.component.OverviewMap', {
parentMap: olMap
/** parentMap : ol.Map
* A configured map or a configuration object for the map
* constructor. This should be the map the overviewMap is
* bind to.
* 設定されたマップまたは map（マップ）コンストラクタの設定オ
* ブジェクト。これは overviewMap がバインドされたマップであ
* る必要があります。（GeoExt doc[w/ext）
*/
});
overviewMap2 = Ext.create('GeoExt.component.OverviewMap', {
parentMap: olMap,
magnification: 12,
/** magnification : Number
* The magnification is the relationship in which the
* resolution of the overviewmaps view is bigger then
* resolution of the parentMaps view. Defaults to: 5
* magnification（倍率）は overviewmaps ビューの解像度が
* parentMaps ビューの解像度よりどのくらい大きいかという関
* 係です。デフォルトは：5（GeoExt doc[w/ext）
*/
layers: [layer2],
/** layers : ol.Collection
* An ol.Collection of ol.layers.Base. If not defined on
* construction, the layers of the parentMap will be used.
* Defaults to: []
* ol.layers.Base の ol.Collection。構造上で定義されていな
* い場合、parentMap のレイヤが使用されます。デフォルトは：[]
* （GeoExt doc[w/ext）
*/
anchorStyle: new ol.style.Style({
/** anchorStyle
* （GeoExt doc[w/ext）
*/
/** ol.style.Style
* Base class for vector feature rendering styles. Any
* changes made to the style or its children through
* set*() methods will not take effect until the feature
* or layer that uses the style is re-rendered.
* ベクタフィーチャがスタイルを描画するための基本クラス。
* スタイルや set*() メソッドを通じてその子に加えられた変
* 更は、スタイルを使用するフィーチャまたはレイヤが再レン
* ダリングされるまで有効になりません。
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
image: new ol.style.Circle({
/** ol.style.Circle
* Set circle style for vector features.
* ベクタフィーチャの円のスタイルを設定。（ol3 API）
*/
radius: 7,
fill: new ol.style.Fill({
/** ol.style.Fill
* Set fill style for vector features.
* ベクタフィーチャの塗りつぶしスタイルを設定。（ol3 API）
*/
color: 'rgb(255, 204, 51)'
})
})
}),
boxStyle: new ol.style.Style({
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: 'rgb(255, 204, 51)',
width: 3
}),
fill: new ol.style.Fill({
color: 'rgba(255, 204, 51, 0.2)'
})
})
});
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',
flex: 1,
/** flex : Number
* Flex may be applied to child items of a box layout
* (vbox or hbox). Each child item with a flex property
* will fill space (horizontally in hbox, vertically in
* vbox) according to that item's relative flex value
* compared to the sum of all items with a flex value
* specified.
* Any child items that have either a flex of 0 or
* undefined will not be 'flexed' (the initial size will
* not be changed).
* flex（フレックス）は、ボックスレイアウト（vbox または
* hbox）の子 item（アイテム）に適用することができます。flex
* プロパティを持つそれぞれの子 item は、指定された flex 値
* を持つすべての item の合計と比べ、その item の相対的な
* flex 値に応じて（vbox に垂直方向、hbox に水平方向）スペー
* スを埋めます。
* 0 flex または、未定義のいずれかを持っている任意の子 item
* は、「（ウィンドウに合わせて）伸縮」されることはありません
* （初期サイズは変更されません）。
* （GeoExt doc[w/ext）
*/
border: false,
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）
*/
autoScroll: true
/** autoScroll : Booleandeprecated
* This cfg has been deprected since 5.1.0
* Use scrollable instead
*/
});
ovMapPanel1 = Ext.create('Ext.panel.Panel', {
title: 'OverviewMap (default)',
flex: 1,
layout: 'fit',
items: overviewMap1
});
ovMapPanel2 = Ext.create('Ext.panel.Panel', {
title: 'OverviewMap (configured)',
flex: 1,
layout: 'fit',
items: overviewMap2
});
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",
items: [
mapPanel,
{
xtype: 'panel',
/** xtype : Ext.enums.Widget
* Note: Only applies to Ext.Component derived classes
* when used as a config in Ext.define.
* This property provides a shorter alternative to
* creating objects than using a full class name. Using
* xtype is the most common way to define component
* instances, especially in a container.
* 注：Ext.define で設定として使用された場合、派生クラスを
* Ext.Component にのみ適用されます。
* このプロパティは、完全なクラス名を使用するよりも、オブ
* ジェクトを作成する短い代替手段を提供します。 xtype を使
* 用することは、特にコンテナで、コンポーネントのインスタン
* スを定義する最も一般的な方法です。
* （GeoExt doc[w/ext]）
*/
region: 'east',
width: 400,
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.
* Overrides: Ext.Component.border
* ゼロ幅の border（境界線）でパネルを描画するため false
* を指定します。
* true として値を残すためには、選択されたテーマ
* $panel-border-width を使用します。
* ネプチューン（Neptune Theme）を使用するか拡張するとき、
* デフォルトは false です。
* デフォルトは：true。
* 上書き: Ext.Component.border
* （GeoExt doc[w/ext]）
*/
layout: {
/** layout [Specify as an Object]
* type
* The layout type to be used for this container. If
* not specified, a default Ext.layout.container.Auto
* will be created and used.
* Valid layout type values are listed in
* Ext.enums.Layout.
* Layout specific configuration properties
* Additional layout specific configuration properties
* may also be specified. For complete details
* regarding the valid config options for each layout
* type, see the layout class corresponding to the type
* specified.
* type（タイプ）
* layout type（レイアウトタイプ）は、この container（コン
* テナ）に使用されます。
* 指定しない場合、デフォルトの Ext.layout.container.Auto
* が作成および使用されます。
* 有効な layout type の値は Ext.enums.Layout に記載され
* ています。
* layout（レイアウト）固有の設定プロパティー
* 追加の layout 固有の構成プロパティを指定することもできま
* す。各 layout type に有効な設定オプションに関する詳細に
* ついては、指定された type に対応する layout クラスを参照
* してください。（GeoExt doc[w/ext]）
*/
type: 'vbox',
align: 'stretch'
},
items: [
ovMapPanel1,
description,
ovMapPanel2
]
}
]
});
}
});
0 件のコメント:
コメントを投稿