4 - GeoExt.component.OverviewMap Example
「GeoExt.component.OverviewMap Example (overviewMap.html)」（「Examples」の「Overview Map」）を参考に地図を表示してみます。
説明に次のようにあります。
The overviewmap will visualize the extent of the main map with a rectangle. The main map can be rotated (using SHIFT & drag), and the overviewmap will adjust the rotation of the rectangle. The top-left corner is visualized with a circle in the overviewmap.
overviewmap は長方形で、メインマップの範囲を視覚化します。メインマップは（SHIFT ＆ ドラッグを使用して）回転させることができ、overviewmap は、長方形の回転を調整します。左上隅は overviewmap 内の円で視覚化されます。
4-1 HTML ファイルの作成
2 「プロジェクト」ペインでツリーを geoext3proj -> サイト・ルート -> js -> libs -> geoext3-master -> examples -> component とクリックして展開し overviewMap.html をダブルクリックして開きます。overviewMap.js もダブルクリックして開きます。
3 「新規ファイル」ボタンをクリックします。
6 「overviewMap.html」の内容をコピーして「4-geoext3.html」に貼り付け、修正します。
7 同じように、「新規ファイル」ボタンをクリックし、ステップ「1.ファイル・タイプを選択」の「カテゴリ」で「HTML5」、「ファイルタイプ」で「JavaScriptファイル」をクリックして選択し「次>」ボタンをクリック。「ファイル名」を「4-geoext3」と入力して「終了」ボタンをクリック。「overviewMap.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> </body> </html>
「4-geoext3.html」
<!DOCTYPE HTML> <html> <head> <meta charset=utf-8" /> <title>GeoExt.component.OverviewMap 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 use the
<code>GeoExt.component.OverviewMap</code> class.</p>
<p>The overviewmap will visualize the extent of the main
map with a rectangle. The main map can be rotated (using
<code>SHIFT</code> & drag), and the overviewmap will
adjust the rotation of the rectangle. The top-left
corner is visualized with a circle in the overviewmap.
</p>
<p>Have a look at
<!-- <a href="overviewMap.js">overviewMap.js</a> -->
<a href="4-geoext3.js">4-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="overviewMap.js"></script> --> <script src="4-geoext3.js"></script>
</body> </html>
0 件のコメント:
コメントを投稿