Tag Archives: geoext

GeoExt1.1で印刷してみる。応用編[Chapter 13]

GeoExt1.1で印刷してみる。応用編[Chapter 13]

いよいよ印刷に関して最後の章となりました。応用編とはいいながら、なんとなく実践編と変わらないんですけどね。
それでは、GeoExt1.1で印刷してみる。実践編[Chapter 12] に引き続き、印刷機能を追加していきます。

[Chapter 11] でGeoExtでprintを行うために、GeoServerをInstallして、print moduleを追加して、GeoServerがserviceを開始した状態で作業を進めます。

今回はPDFへ出力、印刷範囲の選択、OpenStreetMapの印刷を作成します。

JavaScriptの構成

私のAptana のフォルダー構成は、
blog.godo-tys.jp_wp-content_gallery_geoext_12_image04.jpg

な感じです。

ここで、lib folderは、SimplePrint/libを利用しました。また、resources folderはPrintPreview/resourcesを利用しました。

その他は、GeoExt Tutorialで利用するExtJS-3.4.1,GeoExt1.1,OpenLayers-2.12を利用します。

Print Extent

まずは、Browserに表示したmapに印刷範囲を表示してみましょう。
htmlとjsに分けて記述していきます。
まずは、htmlファイルです。
ファイ名は、print-extent.html

[html]
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>GeoExt PrintExtent Example</title>

<script type="text/javascript" src="ext-3.4.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.4.1/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="ext-3.4.1/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="ext-3.4.1/examples/shared/examples.css" />
<script src="OpenLayers/OpenLayers.js"></script>
<script type="text/javascript" src="GeoExt/lib/GeoExt.js"></script>

<script type="text/javascript" src="print-extent.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://localhost:8080/geoserver/pdf/info.json?var=printCapabilities"></script>

</head>
<body>
<h1>Setting the Print Extent on the Map Interactively</h1>
<p>
This example shows how to set the bounds of a printable PDF
interactively with a dynamic print extent rectangle.
<br>
It requires the <a href="http://trac.mapfish.org/trac/mapfish/wiki/PrintModuleInstallation">MapFish</a>
or <a href="http://docs.geoserver.org/stable/en/user/community/printing/">GeoServer</a>
print module.
</p>
<p>
Drag one of the handles to control the scale.
<br>
Grab one of the corner handles at its edge to rotate the extent.
<br>
Hold the SHIFT key to rotate in 45° increments only.
<br>
Drag the extent rectangle to change the center.
</p>
<p>
The js is not minified so it is readable.
<br>
See <a href="print-extent.js">print-extent.js</a>.
</p>
<div id="content"></div>
</body>
</html>
[/html]

このHTMLの

<script type="text/javascript" src="http://localhost:8080/geoserver/pdf/info.json?var=printCapabilities"></script>

で、localhostにinstallしたGeoServerのpdfを使うようにします。これは、印刷を行うための必須項目です。

次に、print-extent.jsです。
表示するMap dataはMapServerのWMSを利用します。

[javascript]
var mapPanel, printProvider;
var prefLayer, regionLayer, roadLayers;

Ext.onReady(function() {
// The printProvider that connects us to the print service
printProvider = new GeoExt.data.PrintProvider({
method : "GET", // "POST" recommended for production use
capabilities : printCapabilities, // from the info.json script
// in the html
customParams : {
mapTitle : "Printing Demo",
comment : "This is a map printed from GeoExt."
}
});

var printExtent = new GeoExt.plugins.PrintExtent({
printProvider : printProvider
});

// mapの作成
var map = new OpenLayers.Map({});

// Base Layer
prefLayer = new OpenLayers.Layer.WMS("神奈川県",
"http://localhost/cgi-bin/mapserv.exe", {
map : "c:/ms4w/Apache/htdocs/mapserver/example/kanagawa_wms.map",
layers : "kanagawa",
format : "image/png",
transparent : true
}, {
buffer : 0,
isBaseLayer : true,
// exclude this layer from layer container nodes
displayInLayerSwitcher : false
});

//
regionLayer = new OpenLayers.Layer.WMS("市区町村界",
"http://localhost/cgi-bin/mapserv.exe", {
map : "c:/ms4w/Apache/htdocs/mapserver/example/kanagawa_wms.map",
layers : "region",
format : "image/png",
transparent : true
}, {
buffer : 0,
isBaseLayer : false
// true
});

roadLayer = new OpenLayers.Layer.WMS("主要道路",
"http://localhost/cgi-bin/mapserv.exe", {
map : "c:/ms4w/Apache/htdocs/mapserver/example/kanagawa_wms.map",
layers : "road",
format : "image/png",
transparent : true
}, {
buffer : 0,
isBaseLayer : false
});

// layerの追加
map.addLayers([prefLayer, regionLayer, roadLayer]);

// map center
var lonlat = new OpenLayers.LonLat(139.35, 35.40);
map.setCenter(lonlat, 10);

// controlの追加
map.addControl(new OpenLayers.Control.ScaleLine());
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.MousePosition());

// The map we want to print, with the PrintExtent added as item.
mapPanel = new GeoExt.MapPanel({
renderTo : "content",
width : 600,
height : 480,
layers : [prefLayer, regionLayer, roadLayer],
center : [139.5, 35.5],
zoom : 8,
map : map,
plugins : [printExtent],
bbar : [{
text : "Create PDF",
handler : function() {
// the PrintExtent plugin is the mapPanel's 1st
// plugin
mapPanel.plugins[0].print();
}
}]
});
printExtent.addPage();
});
[/javascript]

このjs codeは簡単な説明を

  • printProviderの作成 info.jsonからcapabilities : printCapabilitiesを取得
  • printProviderからprintPageを作成
  • GeoExt.plugins.PrintExtentでprintExtentを作成
  • mapを作成して、Layerを定義(神奈川県の市町村界と道路)
  • mapPanelを作成
  • toolbar bottomにCreate PDFメニューを作成
  • print button click時のhandler : function(){…}を作成
  • mapPanelをbrowserに表示

Ext.onReady(function(){….}はExtJSのお約束です。
このExtJSについては、各人でお勉強しといてくださいね。

FireFoxで実行しすると、
blog.godo-tys.jp_wp-content_gallery_geoext_13_image01.jpg

な感じで神奈川県全域と印刷範囲(print extent)が表示されます。

次に、印刷範囲(print extent)をdrag and dropすると、
blog.godo-tys.jp_wp-content_gallery_geoext_13_image02.jpg

な感じで、印刷範囲を変更することができます。

Create PDFで出力確認のDialogが表示されます。

PDFを保存後、PDF Viewで見ると
blog.godo-tys.jp_wp-content_gallery_geoext_13_image05.jpg

な感じで設定した印刷範囲で印刷ができています。

とりあえずは、PDF Fileへの出力は確認できました。

OpenStreetMap PrintPreview

次に、OpenStreetMapのPreview windowを表示してみましょう。
htmlとjsに分けて記述していきます。
まずは、htmlファイルです。
ファイ名は、print-preview-osm.html

[html]
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>GeoExt PrintMapPanel Example</title>

<script type="text/javascript" src="ext-3.4.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.4.1/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="ext-3.4.1/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="ext-3.4.1/examples/shared/examples.css" />
<script src="OpenLayers/OpenLayers.js"></script>
<script type="text/javascript" src="GeoExt/lib/GeoExt.js"></script>

<script type="text/javascript" src="print-preview-osm.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://localhost:8080/geoserver/pdf/info.json?var=printCapabilities"></script>

</head>
<body>
<h1>Using a Print Preview</h1>
<p>
This example shows the how to use GeoExt.PrintMapPanel, to create
a printable OSM map. It requires the
<a href="http://trac.mapfish.org/trac/mapfish/wiki/PrintModuleInstallation">MapFish</a>
or <a href="http://docs.geoserver.org/stable/en/user/community/printing/">GeoServer</a>
print module.
</p>
<p>
The js is not minified so it is readable. See <a href="print-preview-osm.js">print-preview-osm.js</a>.
</p>
<div id="content"></div>
</body>
</html>
[/html]

このHTMLの

<script type="text/javascript" src="http://localhost:8080/geoserver/pdf/info.json?var=printCapabilities"></script>

で、localhostにinstallしたGeoServerのpdfを使うようにします。これは、印刷を行うための必須項目です。

次に、print-preview-osm.jsを見てみると、

[javascript]
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 with OSM"
}
});

// A MapPanel with a "Print…" button
mapPanel = new GeoExt.MapPanel({
renderTo : "content",
width : 500,
height : 350,
map : {
maxExtent : new OpenLayers.Bounds(-128 * 156543.0339, -128
* 156543.0339, 128 * 156543.0339, 128 * 156543.0339),
maxResolution : 156543.0339,
units : "m",
projection : "EPSG:3857"
},
layers : [new OpenLayers.Layer.OSM()],
/*
* layers: [new OpenLayers.Layer.WMS("Tasmania State Boundaries",
* "http://demo.opengeo.org/geoserver/wms", {layers:
* "topp:tasmania_state_boundaries"}, {singleTile: true})],
*/
center : [16314984.568391, -5095295.7603428],
zoom : 6,
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",
width : 350,
autoHeight : true,
items : [{
xtype : "gx_printmappanel",
// use only a PanPanel control
map : {
controls : [new OpenLayers.Control.PanPanel()]
},
sourceMap : mapPanel,
printProvider : printProvider
}],
bbar : [{
text : "Create PDF",
handler : function() {
printDialog.items.get(0).print();
}
}]
});
printDialog.show();
}
}]
});

});
[/javascript]

このjs codeは簡単な説明を

  • mapを作成して、Layerを定義(神奈川県の市町村界と道路)
  • mapPanelを作成
  • toolbar bottomにprintメニューを作成
  • print button click時のhandler : function(){…}を作成
  • Ext.WindowからprintDialogを作成
  • div = 'content'にmapPanelをrender

mapPanel内のhandler : function() {…}でprint buttonがclickされた時にprintDialogして、previewを表示します。

FireFoxで実行しすると、
blog.godo-tys.jp_wp-content_gallery_geoext_13_image03.jpg

な感じでOpenStreetMapが表示されます。

次に、toolbar bottomのprint buttonをclickすると、
blog.godo-tys.jp_wp-content_gallery_geoext_13_image04.jpg

な感じで、printDialog windowが開いてOpenStreetMapの印刷画面が表示されます。Create PDF buttonをclickするとPDF Fileに出力されます。

今回のまとめ

GeoExtのprint機能の基本+応用を利用しました。
今回のOpenStreetMapはGeoExtのsampleとしてdefaultでタスマニアを表示していますが、いままでのTutorialを参考に自分の好きな地点が表示のdefaultになるようにtryしてください。また、あわせて電子国土の印刷を追加もtryしてください。

まだまだGeoExtについては多くの機能があるのですが、とりあえずはTutorialはここまでとします。
以降は、GeoExt APIについて学んでいきます。

GeoExt1.1 Tutorialの目次に戻る。

1 / 2012345...1020...最後 »

Social Widgets powered by AB-WebLog.com.