9 - Feature Grid Example
「Feature Grid Example（grid.html)」（「Examples」の「Feature Grid」）を参考に地図を表示してみます。
説明に次のようにあります。
This example shows how to display features in grids.
The grid on the left side is created by passing an OpenLayers collection (ol.Collection) with feature objects (ol.Feature)
The grid on the right side is created from an existing vector layer and also highlights the selected feature in the grid on the map.
この例では、グリッドのフィーチャを表示する方法を示しています。
左側のグリッドがフィーチャオブジェクト（ol.Feature）と共に OpenLayers コレクション（ol.Collection）を渡すことによって作成されます。
右側のグリッドは、既存のベクトルレイヤから作成され、また、マップ上のグリッド内の選択したフィーチャを強調しています。
9-1 HTML ファイルの作成
2 「プロジェクト」ペインでツリーを geoext3proj -> サイト・ルート -> js -> libs -> geoext3-master -> examples -> features とクリックして展開し grid.html をダブルクリックして開きます。grid.js もダブルクリックして開きます。
3 「新規ファイル」ボタンをクリックします。
6 「grid.html」の内容をコピーして「9-geoext3.html」に貼り付け、修正します。
7 同じように、「新規ファイル」ボタンをクリックし、ステップ「1.ファイル・タイプを選択」の「カテゴリ」で「HTML5」、「ファイルタイプ」で「JavaScriptファイル」をクリックして選択し「次>」ボタンをクリック。「ファイル名」を「9-geoext3」と入力して「終了」ボタンをクリック。「grid.js」の内容をコピーして貼り付け、修正します。
「index.html」
<html> <head> <title>TODO supply a title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head>
<body> <div>TODO write content</div> <div><a href="./3-geoext3.html">3-geoext3.html</a></div> <div><a href="./4-geoext3.html">4-geoext3.html</a></div> <div><a href="./5-geoext3.html">5-geoext3.html</a></div> <div><a href="./6-geoext3.html">6-geoext3.html</a></div> <div><a href="./7-geoext3.html">7-geoext3.html</a></div> <div><a href="./8-geoext3.html">8-geoext3.html</a></div> <div><a href="./9-geoext3.html">9-geoext3.html</a></div> </body> </html>
「9-geoext3.html」
<!DOCTYPE HTML> <html> <head> <meta charset=utf-8" /> <title>Feature Grid Example</title>
<link rel="stylesheet" type="text/css" href="http://openlayers.org/en/master/css/ol.css" /> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-crisp/resources/theme-crisp-all.css" />
</head> <body>
<div id='description'>
<p>This example shows how to display features in grids.
<br><br>
The grid on the left side is created by passing an
OpenLayers collection (ol.Collection) with feature
objects (ol.Feature)<br>
The grid on the right side is created from an existing
vector layer and also highlights the selected feature
in the grid on the map. </p>
<p>Have a look at
<!-- <a href="grid.js">grid.js</a> -->
<a href="9-geoext3.js">9-geoext3.js</a>
to see how this is done.</p>
</div>
<script src="http://openlayers.org/en/master/build/ol.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
<script>
Ext.Loader.setConfig({
/** ExtLoader
* This class provides dynamic loading support for
* JavaScript classes. Application code does not
* typically need to call Ext.Loader except perhaps
* to configure path mappings when not using Sencha
* Cmd.
* このクラスは、JavaScript クラスの動的ローディン
* グサポートを提供します。アプリケーションコードは、
* Sencha Cmd を使用しないでパスマッピングを設定する
* 大方の場合以外 通常、Ext.Loader を呼び出す必要は
* ありません。
* （GeoExt doc[w/ext]）
*/
/** setConfig(config)
* Set the configuration for the loader. This should
* be called right after ext-(debug).js is included
* in the page, and before Ext.onReady. i.e:
* ローダの設定を設定します。これは、ext-(debug).js
* がページに読み込まれる後と Ext.onReady の前に正し
* く呼び出さなければなりません。
* （GeoExt doc[w/ext]）
*/
enabled: true,
/** nabled : Boolean
* Whether or not to enable the dynamic dependency
* loading feature. Defaults to: true.
* 動的依存関係のロード機能の有効または無効。
* デフォルト: true
* （GeoExt doc[w/ext]）
*/
paths: {
/** paths : Object
* The mapping from namespaces to file paths.
* Note that all relative paths are relative to the
* current HTML document. If not being specified,
* for example, Other.awesome.Class will simply be
* loaded from "./Other/awesome/Class.js".
* 名前空間からファイルパスへのマッピング。すべて
* の相対パスは、現在のHTMLドキュメントに対して相
* 対的であることに注意してください。指定されてい
* ない場合には、例えば、Other.awesome.Class は単
* に「./Other/awesome/Class.js」からロードされま
* す。
* （GeoExt doc[w/ext]）
*/
// 'GeoExt': '../../src/'
'GeoExt': './js/libs/geoext3-master/src/'
}
});
</script>
<!-- <script src="gridp.js"></script> --> <script src="9-geoext3.js"></script>
</body> </html>
0 件のコメント:
コメントを投稿