Example サイト
http://www.geoext.org/examples.html
「Print Preview Window」リンクをクリックすると Using a Preview Window が表示されます。
print-preview.js. を参考にします。
説明を意訳すると、GeoExt.data.PrintProvider と GeoExt.data.PrintPage で印刷可能な PDF を作成する方法を示します。
var mapPanel, printDialog;
Ext.onReady(function() {
// The PrintProvider that connects us to the print service
var printProvider = new GeoExt.data.PrintProvider({
method: "GET", // "POST" recommended for production use
capabilities: printCapabilities, // provide url instead for lazy loading
customParams: {
mapTitle: "GeoExt Printing Demo",
comment: "This demo shows how to use GeoExt.PrintMapPanel"
}
});
// A MapPanel with a "Print..." button
// 東京都用マップ設定
var map = new OpenLayers.Map('map', {
controls: [
new OpenLayers.Control.PanZoom(),
new OpenLayers.Control.LayerSwitcher(),
new OpenLayers.Control.MousePosition(),
new OpenLayers.Control.ScaleLine()
],
projection: new OpenLayers.Projection("EPSG:2456"),
maxResolution: 'auto', //'367.1875', '183.594',
maxExtent: new OpenLayers.Bounds(-279000,1054000,-185000,1104000),
units: 'meters',
displayProjection: new OpenLayers.Projection("EPSG:4326")
});
mapPanel = new GeoExt.MapPanel({
renderTo: "content",
width: 500,
height: 350,
/*
map: {
maxExtent: new OpenLayers.Bounds(
143.835, -43.648,
148.479, -39.574
),
maxResolution: 0.018140625,
projection: "EPSG:4326",
units: 'degrees'
},
*/
map: map,
/*
layers: [new OpenLayers.Layer.WMS("Tasmania State Boundaries",
"http://demo.opengeo.org/geoserver/wms",
{layers: "topp:tasmania_state_boundaries"},
{singleTile: true, numZoomLevels: 8})],
*/
layers: [
// 東京都レイヤ
new OpenLayers.Layer.WMS( "Tokyo Height WMS",
"http://192.168.1.6/cgi-bin/mapserv?",
{
map: '/home/user/mapfile/tokyo_bmi_pgis_img2.map',
layers: 'height',
format: 'image/png'
}, {
singleTile: true
}),
new OpenLayers.Layer.WMS( "Tokyo Kukaku Sen WMS",
"http://192.168.1.6/cgi-bin/mapserv?",
{
map: '/home/user/mapfile/tokyo_bmi_pgis_img2.map',
layers: 'kukaku',
transparent: true,
format: 'image/png'
}, {
singleTile: true
})
],
// center: [146.56, -41.56],
// zoom: 0,
bbar: [{
text: "Print...",
handler: function(){
// A window with the PrintMapPanel, which we can use to adjust
// the print extent before creating the pdf.
printDialog = new Ext.Window({
title: "Print Preview",
layout: "fit",
width: 350,
autoHeight: true,
items: [{
xtype: "gx_printmappanel",
sourceMap: mapPanel,
printProvider: printProvider
}],
bbar: [{
text: "Create PDF",
handler: function(){ printDialog.items.get(0).print(); }
}]
});
printDialog.show();
}
}]
});
});
HTML ファイルを新規作成します。
「openlayersTokyoproj」 を右クリックして 新規 -> HTML ファイル をクリック。
「HTML ファイル」ウィンドウの「ファイル名（任意：geoext25_print-preview.html）」に入力して「完了」ボタンをクリック。
「charset」を「utf-8」にします。
以下のように HTML を作成します。
geoext24_print-page.html をコピーし、外部 JavaScript 読み込みファイルを修正しプリントモジュールを設定し body タグ内にターゲット id を設定します。
---
<title>GeoExt25 Print Preview Window</title>
---
<!-- print-preview.js 追加 -->
<script type="text/javascript" src="./print-preview.js"></script>
<!-- The script below will load the capabilities of the print service
and save them into the global printCapabilities variable. Instead
of this, the PrintProvider can be configured with a url and take
care of fetching the capabilities. -->
<!--
<script type="text/javascript" src="http://demo.opengeo.org/geoserver/pdf/info.json?var=printCapabilities"></script>
-->
<script type="text/javascript" src="http://192.168.1.6:8080/geoserver/pdf/info.json?var=printCapabilities"></script>
</head>
<body>
<h1 id="title">GeoExt 25 - Print Preview Window</h1>
<p id="shortdesc">
Using a Preview Window
</p>
<p>This example shows the how to create a printable PDF with
GeoExt.data.PrintProvider and GeoExt.data.PrintPage,
using the MapFish or GeoServer print module.</p>
<p>この例では、MapFish または GeoServer 印刷モジュールを使用して、
GeoExt.data.PrintProvider と GeoExt.data.PrintPage で印刷可能な PDF を
作成する方法を示します。</p>
<div id="content"></div>
</body>
</html>
0 件のコメント:
コメントを投稿