8 - Popup Example
「Popup（gx-popup.html)」（「Examples」の「Popup」）を参考に地図を表示してみます。
説明に次のようにあります。
This example shows a simple popup showing the position that was hovered.
To achieve this effect, the GeoExt.component.Map is instantiated with pointerRest: true, so that the events pointerrest and pointerout become available. Whenever pointerrest is fired, an instance of GeoExt.panel.Popup is positioned and its HTML updated.
この例では、ホバーした位置を示す簡単なポップアップが表示されます。
この効果を達成するために、GeoExt.component.Map は pointerRest：true でインスタンス化され、それによって イベント pointerrest と pointerout は利用可能になります。pointerrest が起動されるたびに、 GeoExt.panel.Popup のインスタンスが配置され、そのHTMLが更新されます。
8-1 HTML ファイルの作成
2 「プロジェクト」ペインでツリーを geoext3proj -> サイト・ルート -> js -> libs -> geoext3-master -> examples -> popup とクリックして展開し gx-popup.html をダブルクリックして開きます。gx-popup.js もダブルクリックして開きます。
3 「新規ファイル」ボタンをクリックします。
6 「gx-popup.html」の内容をコピーして「8-geoext3.html」に貼り付け、修正します。
7 同じように、「新規ファイル」ボタンをクリックし、ステップ「1.ファイル・タイプを選択」の「カテゴリ」で「HTML5」、「ファイルタイプ」で「JavaScriptファイル」をクリックして選択し「次>」ボタンをクリック。「ファイル名」を「8-geoext3」と入力して「終了」ボタンをクリック。「gx-popup.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> </body> </html>
「8-geoext3.html」
<!DOCTYPE HTML> <html> <head> <meta charset=utf-8" /> <title>Popup 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" /> <!-- <link rel="stylesheet" type="text/css" href="../../resources/css/gx-popup.css" /> --> <link rel="stylesheet" type="text/css" href="./js/libs/geoext3-master/resources/css/gx-popup.css" />
<style>
.gx-popup p {
padding: 5px 5px 0 5px;
border-radius: 7px;
background-color: rgba(255,255,255,0.85);
border: 3px solid white;
margin: 0;
text-align: center;
}
</style>
</head> <body>
<div id='description'>
<p>This example shows a simple popup showing the position
that was hovered.</p>
<p>To achieve this effect, the
<code>GeoExt.component.Map</code> is instantiated with
<code>pointerRest: true</code>, so that the events
<code>pointerrest</code> and <code>pointerout</code>
become available. Whenever <code>pointerrest</code>
is fired, an instance of <code>GeoExt.panel.Popup</code>
is positioned and its HTML updated.</p>
<p>Have a look at
<!-- <a href="gx-popup.js">gx-popup.js</a> -->
<a href="8-geoext3.js">8-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="gx-popup.js"></script> --> <script src="8-geoext3.js"></script>
</body> </html>
0 件のコメント:
コメントを投稿