7 - GeoExt.data.MapfishPrintProvider Example
「GeoExt.data.MapfishPrintProvider Example (basic-mapfish.html)」（「Examples」の「Mapfish Print」）を参考に地図を表示してみます。
説明に次のようにあります。
This example shows how to use the GeoExt.data.MapfishPrintProvider class to talk to a Mapfish Print Server (v3.x).
Afterwards we have all information to create a valid POST to the servlet. The printed extent is highlighte as vector layer. If you move around or change the zoom, the extent will adjust accordingly.
Click the button labelled 'Print' to actually create a PDF for the displayed extent.
この例では、Mapfishプリントサーバー（バージョン3.x）と通信するためにGeoExt.data.MapfishPrintProviderクラスを使用する方法を示しています。
以降、我々は、サーブレットへの有効なPOSTを作成するためのすべての情報を持っています。印刷範囲は、ベクトルレイヤとして強調表示されます。あなたの周りに移動したり、ズームを変更すると、範囲はそれに応じて調整されます。
実際に表示された範囲のPDFを作成するには「Print」と書かれたボタンをクリックします。
7-1 HTML ファイルの作成
2 「プロジェクト」ペインでツリーを geoext3proj -> サイト・ルート -> js -> libs -> geoext3-master -> examples -> print とクリックして展開し basic-mapfish.html をダブルクリックして開きます。basic-mapfish.js もダブルクリックして開きます。
3 「新規ファイル」ボタンをクリックします。
6 「basic-mapfish.html」の内容をコピーして「7-geoext3.html」に貼り付け、修正します。
7 同じように、「新規ファイル」ボタンをクリックし、ステップ「1.ファイル・タイプを選択」の「カテゴリ」で「HTML5」、「ファイルタイプ」で「JavaScriptファイル」をクリックして選択し「次>」ボタンをクリック。「ファイル名」を「7-geoext3」と入力して「終了」ボタンをクリック。「basic-mapfish.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> </body> </html>
「7-geoext3.html」
<!DOCTYPE HTML> <html> <head> <meta charset=utf-8" /> <title>GeoExt.data.MapfishPrintProvider 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.data.MapfishPrintProvider</code> class to
talk to a Mapfish Print Server (v3.x).</p>
<p>Afterwards we have all information to create a valid
POST to the servlet. The printed extent is highlighte as
vector layer. If you move around or change the zoom, the
extent will adjust accordingly.</p>
<p>Click the button labelled 'Print' to actually create a
PDF for the displayed extent.</p>
<p>Have a look at
<!-- <a href="basic-mapfish.js">basic-mapfish.js</a> -->
<a href="7-geoext3.js">7-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="basic-mapfish.js"></script> --> <script src="7-geoext3.js"></script>
</body> </html>
0 件のコメント:
コメントを投稿