Daily Archives: 05/11/2013

GeoExt1.1を使ってみる。 [Chapter 1]

GeoExt1.1を使ってみる。[Chapter 1]

それでは、GeoExt1.1のexampleに手を加えながら、tutorialを進めてきます。

そもそもGeoExtとは?
OpenLayersとGUIを構築するJavaScrit LibraryのExtJSでデスクトップスタイルのWEB GISアプリケーションを構築する、JavaScript Libraryです。

セットアップと入手については、GeoExtからdownloadしてください。また、Debianでka-Mapメモのblogが非常に参考になります。
残念ながら、更新が止まっています。

JavaScriptの構成

GeoExt1.1でも使うため、ExtJS3からversion3.4.1.1をdownloadして、適当なunzipします。 とりあえずDesktopでも大丈夫です。
くれぐれもExtJS4をdownloadしないように。

また、ExtJSの使い方は、

などなどを参考にしてくださいね。

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

な感じです。

OpenLayer-2.10やOpenLayer-2.11などは、特に必要ありません。
また、作成するhtmlやjs fileは、test folderに保存していきます。
data folderはGeoJSONやサンプルで使うデータ類を入れることにします。

v4 folderは電子国土のJavascriptとcssを入れています。
電子国土の詳しい情報は、技術情報・構築ツールを参考にしてください。ここでは、電子国土WebシステムVer.4(オープンソース版)ソースコードを利用します。

GeoExt.MapPanelに表示

まずは、GeoExt Tutorialのサンプルを参考にして、GeoExt.MapPanelに地図を描画してみます。
htmlとjsに分けて記述していきます。
まずは、htmlファイルです。
ファイ名は、mappanel-window.html

<!DOCTYPE  html>
<html lang="ja">
	<head>
	<meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>GeoExt MapPanel in an Ext Window</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/script/GeoExt.js"></script>
 
        <script type="text/javascript" src="mappanel-window.js"></script>
 
    </head>
    <body>
        <h1>GeoExt.MapPanel in an Ext.Window</h1>
        <p>This example shows the how to place a MapPanel in another Ext container
        without creating a map first.  <br>
        See <a href="mappanel-div.html">mappanel-div.html</a>
        for an example that creates the map before creating the map panel.<p>
        <p>The js is not minified so it is readable. See <a href="mappanel-window.js">mappanel-window.js</a>.</p>
    </body>
</html>

次に、mappanel-window.js

// mappanel-window.js
 
var mapPanel;
 
Ext.onReady(function() {
 
	// Layerの作成
	var wmslayer = new OpenLayers.Layer.WMS(
		"Global Imagery",
        "http://maps.opengeo.org/geowebcache/service/wms",
        {layers: "bluemarble"}
    );
 
    // 表示するwindowの作成
    var mapwin = new Ext.Window({
        title: "GeoExt MapPanel Window sample_1",
        height: 400,
        width: 600,
        layout: "fit",
        items: [{
            xtype: "gx_mappanel",
            id: "mappanel",
            layers: [wmslayer],
            extent: "100,10,150,50"
        }]
    });
 
    // mapwinの表示
    mapwin.show();
 
    mapPanel = Ext.getCmp("mappanel");
});

このjs codeは簡単な説明を

  • layerの作成で、「wmslayer」Layerのインスタンスを作成
  • 「Ext.Window」のインスタンスを作成 → mapwin
  • mapwinに「gx_mappanel」にwmslayerを追加
  • mapwin.show()で表示
  • 作成したmapwinをmapPanelでbrowserに表示

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

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

な感じです。browser画面上でドラッグして位置を変更することができます。

これだけでは何なので、

Toolbarを追加してみる

mappanel-window.jsにtoolbarを追加してみましょ。
ここでは、jsだけのcodeです。 htmlはmappanel-window.htmlを参考にしてください。

var mapPanel;
 
Ext.onReady(function() {
 
	// Layerの作成
	var wmslayer = new OpenLayers.Layer.WMS(
		"Global Imagery",
        "http://maps.opengeo.org/geowebcache/service/wms",
        {layers: "bluemarble"}
    );
 
    // 表示するwindowの作成
    var mapwin = new Ext.Window({
        title: "GeoExt MapPanel Window sample_2",
        height: 400,
        width: 600,
        layout: "fit",
        items: [{
            xtype: "gx_mappanel",
            id: "mappanel",
            layers: [wmslayer],
            extent: "100,10,150,50",
           	tbar : [
         		{ xtype : 'tbbutton',
            		text : 'メニュー...',
            		menu : [
                    	{ text : 'メニュー1', selectType: 1,  handler : menuProc },
                    	{ text : 'メニュー2', selectType: 2,  handler : menuProc },
                    	{ text : 'メニュー3', selectType: 3,  handler : menuProc },
                    	{ text : 'メニュー4', selectType: 4,  handler : menuProc }
            		]
        		}
			]
        }]
    });
 
    // mapwinの表示
    mapwin.show();
 
    mapPanel = Ext.getCmp("mappanel");
});
 
function menuProc(obj){
    Ext.Msg.alert('メニュー番号', '選択した' + obj.selectType +'番です。' );
    //gmap.setMapTypeId(obj.mapType);
}

tbar:[…]がtoolbarの定義です。
toolbarのbutton形式は、xtype : 'tbbutton'で定義して、プルダウンで4つのメニューを表示します。
そして、選択後のeventを handler : menuProcで定義して、menuProcでその処理を書きます。

いかがですか? json形式で書いていくのでわかりやすいと思うのですが。。。

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

な感じです。

今回のまとめ

とりあえず、GeoExtのpanelを使って地図を描画してみました。
次回は、OpenStreetMapと電子国土を表示してみます。

toolbarをbottomに配置したり、tabを使ったりと、このサンプルでいろいろと試してみると良いと思います。

GeoExt1.1 Tutorialの目次に戻る。

1 / 11

Social Widgets powered by AB-WebLog.com.