7-2 JavaScript ファイルの作成
「basic-mapfish.js（7-geoext3.js）」は、マップを表示するための JavaScript ファイルです。
「7-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.data.MapfishPrintProvider',
/** GeoExt.data.MapfishPrintProvider
* Provides an interface to a Mapfish or GeoServer print
* module.
* MapfishまたはGeoServerプリントモジュールへのインタフェー
* スを提供します。
* （GeoExt doc[w/ext]）
*/
'GeoExt.data.serializer.TileWMS',
/** GeoExt.data.serializer.TileWMS
* A serializer for layer that hava a ol.source.TileWMS
* source.
* ol.source.TileWMS ソースを持つレイヤのシリアライザ。
* （GeoExt doc[w/ext]）
*/
'GeoExt.data.serializer.Vector'
/** GeoExt.data.serializer.Vector
* A serializer for layers that have a ol.source.Vector
* source.
* This class is heavily inspired by the excellent ngeo
* Print service class: camptocamp/ngeo.
* Additionally some utility methods were borrowed from
* the color class of the google/closure-library.
* ol.source.Vector ソースを持つレイヤのためのシリアライザ。
* このクラスは、優れた nego プリントサービスクラス
* （camptocamp/nego）に大きく触発されています。
* さらにいくつかのユーティリティメソッドは、Google/クロージャ
* ライブラリのカラークラスから借用されました。
* （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: 'MapPanel',
/** 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;
var extentLayer = new ol.layer.Vector({
/** ol.layer.Vector
* Vector data that is rendered client-side.
* クライアント側で描画されたベクタデータ。（ol3 API）
*/
source: new ol.source.Vector(),
/** ol.source.Vector
* Provides a source of features for vector layers.
* ベクタレイヤのフィーチャのソースを用意します。（ol3 API）
*/
});
var vectorLayer = new ol.layer.Vector({
source: new ol.source.Vector({
// url: '../data/SanFranciscoPublicSchools-Points.kml',
url: 'js/libs/geoext3-master/examples/data/SanFranciscoPublicSchools-Points.kml',
format: new ol.format.KML(),
/** ol.source.KML
* Static vector source in KML format
* KML フォーマットの静的ベクタソース（0l3 API）
*/
attributions: [new ol.Attribution({
/** ol.Attribution
* An attribution for a layer source.
* レイヤソースの属性（ol3 API）
*/
html: '<a href="https://data.sfgov.org/Geographic' +
'-Locations-and-Boundaries/San-Francisco-Public' +
'-Schools-Points/dpub-rukj">' +
'© 2015 City and County of San Francisco' +
'</a>' +
', (via data.sfgov.org)'
})]
})
});
var bgLayer = 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.TileWMS({
/** ol.source.TileWMS
* Layer source for tile data from WMS servers.
* WMS サーバからのタイルデータのレイヤソース。
* （ol3 API）
*/
url: 'http://ows.terrestris.de/osm-gray/service',
params: {
LAYERS: "OSM-WMS"
}
})
});
olMap = new ol.Map({
layers: [
bgLayer,
vectorLayer,
extentLayer
],
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
});
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.data.model.print.Capability 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）
*/
});
/**
* Once the store is loaded, we can create the button with
* the following assumptions:
* ストアがロードされると、私たちは以下の仮定を持つボタンを
* 作成することができます。
*
* * The button will print the first layout
* * ボタンは最初のレイアウトを印刷します。
* * The attributes used are the first of the above
* * layout
* * 使用された属性は最初の上部のレイアウトです。
* * We'll request the first dpi value of the
* * suggested ones
* * 提案された最初の dpi 値を要求します。
*/
var onPrintProviderReady = function(provider) {
// this is the assumption: take the first layout and
// render an appropriate extent on the map
// これは仮定です：最初のレイアウトを取得し、地図上の適切な
// 範囲をレンダリングします。
var capabilities = provider.capabilityRec;
/** capabilityRec : Objectreadonly
* The capabiltyRec is an instance of
* 'GeoExt.data.model.print.Capability' and contains the
* PrintCapabilities of the Printprovider.
* capabiltyRec は「GeoExt.data.model.print.Capability」
* のインスタンスであり、Printprovider の PrintCapabilities
* を含んでいます。
* （GeoExt doc[w/ext）
*/
var layout = capabilities.layouts().getAt(0);
/** getAt( index ) : Object
* Returns the item at the specified index.
* 指定されたインデックスの item を返します。
* （GeoExt doc[w/ext）
*/
var attr = layout.attributes().getAt(0);
/** attributes( attributes )
* Formats an object of name value properties as HTML
* element attribute values suitable for using when
* creating textual markup.
* テキストマークアップを作成する際に使用するのに適したHTML
* 要素属性値として、名前値プロパティのオブジェクトをフォー
* マとします。
* （GeoExt doc[w/ext）
*/
var clientInfo = attr.get('clientInfo');
var render = GeoExt.data.MapfishPrintProvider.renderPrintExtent;
/** renderPrintExtent(mapComponent, extentLayer,
* clientInfo) static
* Renders the extent of the printout. Will ensure that
* the extent is always visible and that the ratio matches
* the ratio that clientInfo contains
* 印刷の範囲を描画します。範囲が常に表示されていることを確認
* し、比率が、CLIENTINFO を含んでいる割合と一致していること
* になります。
* （GeoExt doc[w/ext）
*/
render(mapComponent, extentLayer, clientInfo);
mapComponent.getView().on('propertychange', function(){
/** getView( ) : ol.View
* Returns the view of the map.
* map の view を返します。
* （GeoExt doc[w/ext）
*/
/** on( eventName, [fn], [scope], [options], [order] ) :
* Object
* The on method is shorthand for addListener.
* Appends an event handler to this object.
* on メソッドは addListener の短縮形です。
* このオブジェクトにイベントハンドラを追加します。
* （GeoExt doc[w/ext）
*/
extentLayer.getSource().clear();
/** getSource()
* Return the associated vectorsource of the layer.
* レイヤの関連したベクタソースを返します。
* （ol3 API）
*/
/** clear(opt_fast)
* Remove all features from the source.
* ソースから据えてのフィーチャを削除します。
* （ol3 API）
*/
render(mapComponent, extentLayer, clientInfo);
});
description.add({
/**add( component ) : Ext.Component[]/Ext.Component
* Adds Component(s) to this Container.
* このコンテナにコンポーネントを追加します。
* （GeoExt doc[w/ext）
*/
xtype: 'button',
/** xtype
* Every component has a specific xtype, which is its
* Ext-specific type name, along with methods for
* checking the xtype like getXType and isXType. See the
* [Component Guide][../../../core_concepts/
* components.html]
* for more information on xtypes and the Component
* hierarchy.
* すべてのコンポーネントは、getXType と isXType ような
* xtype をチェックするための方法に沿って、その Ext 特定
* の type name である特定 xtype を持っています。xtypes
* の詳細とコンポーネント階層について[コンポーネントガイ
* ド] [../../../ core_concepts/ components.html]を参
* 照してください 。
* （GeoExt doc[w/ext）
*/
text: 'Print',
handler: function(){
/** handler : Function/String
* A function called when the button is clicked (can be
* used instead of click event).
* ボタンがクリックされたときに呼び出される関数。（代わ
* りにクリックイベントを使用することができます）。
* （GeoExt doc[w/ext）
*/
var spec = {
layout: layout.get('name'),
attributes: {}
};
var firstFeature = extentLayer.getSource().getFeatures()[0];
/** getFeatures()
* Get all features on the source.
* ソース上のすべてのフィーチャを取得します。
* （ol3 API）
*/
var bbox = firstFeature.getGeometry().getExtent();
/** getGeometry()
* Get the feature's default geometry. A feature may
* have any number of named geometries. The "default"
* geometry (the one that is rendered by default) is
* set when calling ol.Feature#setGeometry.
* フィーチャのデフォルトのジオメトリを取得します。フィー
* チャは、任意の数の指定のジオメトリのを有することができ
* ます。 「デフォルト」のジオメトリ（デフォルトでレンダ
* リングされるもの）が ol.Feature＃setGeometry を呼び
* 出すときに設定されています。（ol3 API）
*/
/** getExtent()
* Get the validity extent for this projection.
* この投影の有効範囲を取得。（ol3 API）
*/
var util = GeoExt.data.MapfishPrintProvider;
var mapView = mapComponent.getView();
var serializedLayers = util.getSerializedLayers(
/** getSerializedLayers( )static
* Will return an array of serialized layers for
* mapfish print servlet v3.0.
* mapfish印刷サーブレットv3.0のためにシリアライズされた
* レイヤの配列を返します。
* （GeoExt doc[w/ext）
*/
mapComponent,
function(layer) {
// do not print the extent layer
// エクステントレイヤを印刷しません。
var isExtentLayer = (extentLayer === layer);
return !isExtentLayer;
}
);
serializedLayers.reverse();
/** Array.prototype.reverse()
* 配列の要素を反転させます。最初の要素は最後に、最後の要
* 素は最初になります。
* （MDN[https://developer.mozilla.org/ja/docs/Web/
* JavaScript/Reference/Global_Objects/Array/reverse]）
*/
spec.attributes[attr.get('name')] = {
bbox: bbox,
dpi: clientInfo.dpiSuggestions[0],
layers: serializedLayers,
projection: mapView.getProjection().getCode(),
/** getProjection()
* Get the view projection.
* View の投影を取得します。（ol3 API）
*/
/** getCode()
* Get the code for this projection, e.g. 'EPSG:4326'.
* この投影のコード（例えば EPSG:4326）を取得します。
* （ol3 API）
*/
rotation: mapView.getRotation()
/** getRotation()
* view の回転角度を取得します。（ol3 API）
*/
};
Ext.create('Ext.form.Panel', {
/** Ext.form.Panel
* FormPanel provides a standard container for forms.
* It is essentially a standard Ext.panel.Panel which
* automatically creates a BasicForm for managing any
* Ext.form.field.Field objects that are added as
* descendants of the panel. It also includes
* conveniences for configuring and working with the
* BasicForm and the collection of Fields.
* FormPanel は、フォームのための標準的なコンテナを提供し
* ます。それは本質的に、自動的にパネルの子孫として追加さ
* れているすべての Ext.form.field.Field オブジェクトを
* 管理するための BasicForm を作成する標準
* Ext.panel.Panel です。また、設定と BasicForm と
* フィールドのコレクションを操作するための便利さを備えて
* います。（GeoExt doc[w/ext）
*/
standardSubmit: true,
/** standardSubmit : Boolean
* If set to true, a standard HTML form submit is used
* instead of a XHR (Ajax) style form submission. All
* of the field values, plus any additional params
* configured via baseParams and/or the options to
* submit, will be included in the values submitted
* in the form.
* trueに設定すると、XHR（アヤックス）スタイルのフォー
* ムの送信の替わりに、標準の HTML 形式送信が使用されま
* す。すべてのフィールド値、プラス baseParams 経由を設
* 定された任意の追加のparams および/または送信オプショ
* ン、がフォームに送信された値に含まれます。
* （GeoExt doc[w/ext）
*/
url: 'http://webmapcenter.de/print-servlet-3.1.2/' +
'print/geoext/buildreport.pdf',
/** url : String
* The URL to use for form actions if one isn't
* supplied in the doAction options.
* doAction オプションで提供されないなら、フォームアクショ
* ンに使用する URL。
* （GeoExt doc[w/ext）
*/
method: 'POST',
/** method : String
* The request method to use (GET or POST) for form
* actions if one isn't supplied in the action options.
* action オプションで提供されないなら、フォームアクショ
* ンに（GET or POST を）使用するリクエストメソッド。
* （GeoExt doc[w/ext）
*/
items: [
{
xtype: 'textfield',
name: 'spec',
value: Ext.encode(spec)
/** value : String/Number
* The value of this button. Only applicable when
* used as an item of a Segmented Button.
* このボタンの値。セグメント化されたボタンの item と
* して使用したときだけ適用。
* （GeoExt doc[w/ext）
*/
/** encode( o ) : String
* Shorthand for Ext.JSON.encode
* Ext.JSON.encode の短縮形。
* （GeoExt doc[w/ext）
*/
}
]
}).submit();
/** submit( options )
* This is a proxy for the underlying BasicForm's
* Ext.form.Basic.submit call.
* これは、基礎となるBasicFormの Ext.form.Basic.submit
* 呼び出しのプロキシです。
* （GeoExt doc[w/ext）
*/
}
});
};
Ext.create('GeoExt.data.MapfishPrintProvider', {
url: "http://webmapcenter.de/print-servlet-3.1.2/" +
"print/geoext/capabilities.json",
listeners: {
ready: onPrintProviderReady
/** ready( provider, eOpts )
* Fires after the PrintCapability store is loaded.
* PrintCapability ストアがロードされた後、起動します。
* （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",
items: [
mapPanel,
description
]
});
}
});
