GeoExt1.1を使ってみる。[Chapter 2]
今回は、ExtJSのviewportを使って地図を表示してみます。
表示する地図は、OpenStreetMapと電子国土です。
セットアップと入手については、GeoExt1.1 [Chapter 1] を参考にしてください。
今回使うviewportについては、ExtJSの記事が大変参考になります。
OpenStreetMapの表示
まずは、GeoExt Tutorialのサンプルwindow-viewportを参考にして、地図を描画してみます。
htmlとjsに分けて記述していきます。
まずは、htmlファイルです。
ファイ名は、mappanel-osmview.html
<!DOCTYPE HTML> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>GeoExt MapPanel in an Ext Viewport OpenStreetMap</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 type="text/javascript" src="../OpenLayers/OpenLayers.js" charset="UTF-8"></script> <script type="text/javascript" src="../GeoExt/script/GeoExt.js"></script> <script type="text/javascript" src="mappanel-osmview.js"></script> <style type="text/css"> .olControlAttribution a, .olControlAttribution a:link, .olControlAttribution a:visited, .olControlAttribution a:hover, .olControlAttribution a:active { color: #fff; } .olControlAttribution { font-size: 13px !important; color: #ffffff; text-shadow: 0 0 0.3em #8877FF, 0 0 0.3em #8877FF, 0 0 0.3em #8877FF; bottom: 2px !important; right: 2px !important; } .olControlMousePosition { background-color: white; font-size: 9pt; height: 15px; position: absolute; right: 10px; top: 0; } .olControlScaleLine { background: white; padding: 10px; } </style> </head> <body> <div id="title"> <h1>GeoExt.MapPanel in an Ext.Viewport OpenStreetMap</h1> </div> <div id="description"> <p>This example shows how to place a MapPanel as a region in a container using a border layout, the container is a Viewport in this example.</p> <p>The js is not minified so it is readable. See <a href="mappanel-viewport.js">mappanel-viewport.js</a>.</p> </div> </body> </html>
mousepositionとscalelineについて、cssを付け加えています。
次に、mappanel-osmview.js
機能的には、
-
viewportにmap表示
-
神奈川県のGeoJSONデータを表示
-
toolbarを追加して、menu作成
-
中心緯度経度を表示function作成
-
mousepositionの緯度経度を度分秒で表示
-
EPSG:4326に統一
var mapPanel; Ext.onReady(function() { // 座標系の設定 var epsg4326 = new OpenLayers.Projection("EPSG:4326"); var epsg3857 = new OpenLayers.Projection("EPSG:3857"); // OpenLayers.Mapのインスタンス作成 var map = new OpenLayers.Map({}); // openstreetmapの作成 var osmlayer = new OpenLayers.Layer.OSM("OSM") map.addLayers([osmlayer]); // mapの表示座標系 map.displayProjection = epsg4326; // controlの設定 map.addControl( new OpenLayers.Control.MousePosition( {id: "ll_mouse", formatOutput: formatLonlats} ) ); map.addControl(new OpenLayers.Control.ScaleLine()); map.addControl(new OpenLayers.Control.LayerSwitcher()); map.addControl(new OpenLayers.Control.MousePosition()); map.addControl(new OpenLayers.Control.OverviewMap()); // 初期表示の緯度経度 map.setCenter( new OpenLayers.LonLat(139.5, 35.5). transform(epsg4326, epsg3857), 15 ); // 初期表示範囲 var extent = new OpenLayers.Bounds(138.7,35.06,140,35.73). transform(epsg4326, epsg3857); var lonlat = new OpenLayers.LonLat(139.5, 35.5); lonlat.transform(map.displayProjection, map.baseLayer.projection); // 神奈川県の市区町村行政界 var vectorLayer = new OpenLayers.Layer.Vector("神奈川県市区町村", { strategies : [new OpenLayers.Strategy.Fixed()], protocol : new OpenLayers.Protocol.HTTP({ url : "../data/c14_region.json", format : new OpenLayers.Format.GeoJSON() }) }); map.addLayers([osmlayer, vectorLayer]); new Ext.Viewport({ layout: "border", items: [{ region: "north", contentEl: "title", height: 50 }, { region: "center", id: "mappanel", title: "OpenStreetMap", xtype: "gx_mappanel", map: map, //layers: [vectorLayer], layers: [osmlayer, vectorLayer], extent: extent, split: true, tbar : [ {xtype : 'tbbutton', text: '地図の中心緯度経度', handler: function(){ var c = mapPanel.map.getCenter(). transform(epsg3857, epsg4326); var long = c.lon; var ns = OpenLayers.Util.getFormattedLonLat(c.lat); var ew = OpenLayers.Util.getFormattedLonLat(c.lon,'lon'); Ext.Msg.alert(this.getText(), ns + " , " + ew); } }, {xtype : 'tbbutton', text : 'Event...', handler : aboutViewer }, {xtype: 'tbseparator' }, {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 } ] } ] }, { region: "east", title: "Description", contentEl: "description", width: 200, split: true }] }); mapPanel = Ext.getCmp("mappanel"); // message表示関数 function aboutViewer(){ Ext.Msg.alert('Event handler', 'ここにクリックイベントを記述します。<br>©2013 TYS.'); } // マウス座標の緯度経度変換関数 function formatLonlats(lonLat) { var lat = lonLat.lat; var long = lonLat.lon; var ns = OpenLayers.Util.getFormattedLonLat(lat); var ew = OpenLayers.Util.getFormattedLonLat(long,'lon'); return ns + ', ' + ew + ' (' + (Math.round(lat * 100000) / 100000) + ', ' + (Math.round(long * 100000) / 100000) + ')'; } // message表示関数 function menuProc(obj){ Ext.Msg.alert('メニュー番号', '選択した' + obj.selectType +'番です。' ); } });
Ext.onReady(function(){….}はExtJSのお約束です。
このExtJSについては、各人でお勉強しといてくださいね。
な感じです。
LayerSwitcherとOverviewMapのiconがなぜか表示されません。
mouseをicon近くに持って行くとmouse cursorが変わるので、クリックすると表示されます。
なぜだろう?
電子国土の表示
電子国土をOpenLayersで利用するためには、
<script type="text/javascript" src="../v4/webtis/webtis_v4.js" charset="UTF-8"></script> <link rel="stylesheet" href="../v4/css/webtis.css" type="text/css">
の2行が必要になります。忘れないように
<!DOCTYPE html> <html lan ='ja'> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <title>GeoExt MapPanel in an Ext Viewport 電子国土</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 type="text/javascript" src="../OpenLayers/OpenLayers.js" charset="UTF-8"></script> <script type="text/javascript" src="../v4/webtis/webtis_v4.js" charset="UTF-8"></script> <link rel="stylesheet" href="../v4/css/webtis.css" type="text/css"> <script type="text/javascript" src="../GeoExt/script/GeoExt.js"></script> <script type="text/javascript" src="mappanel-cj4view.js"></script> <style type="text/css"> .olControlMousePosition { background-color: white; font-size: 12pt; height: 15px; position: absolute; right: 10px; top: 0; } .olControlScaleLine { background: white; padding: 10px; } </style> </head> <body> <div id="title"> <h1>GeoExt.MapPanel in an Ext.Viewport 電子国土</h1> </div> <div id="description"> <p>This example shows how to place a MapPanel as a region in a container using a border layout, the container is a Viewport in this example.</p> <p>The js is not minified so it is readable. See <a href="mappanel-cj4view.js">mappanel-cj4view.js</a>.</p> </div> </body> </html>
次に、mappanel-cj4view.js
機能的には、
-
viewportにmap表示
-
basemapで電子国土Layer object作成
-
神奈川県行政界と主要道路のGeoJSONデータを表示
-
toolbarを追加して、menu作成
-
中心緯度経度を表示function作成
-
mousepositionの緯度経度を度分秒で表示
-
EPSG:4326に統一
var mapPanel; Ext.onReady(function() { // 座標系の設定 var epsg4326 = new OpenLayers.Projection("EPSG:4326"); var epsg3857 = new OpenLayers.Projection("EPSG:3857"); // mapの作成 var map = new OpenLayers.Map({}); // 電子国土の作成 var webtisLayer = new webtis.Layer.BaseMap("電子国土"); map.addLayers([webtisLayer]); // openstreetmapの作成 var osmlayer = new OpenLayers.Layer.OSM("OpenStreetMap") map.addLayers([osmlayer]); map.displayProjection = epsg4326; // controlの設定 map.addControl( new OpenLayers.Control.MousePosition( {id: "ll_mouse", formatOutput: formatLonlats} ) ); map.addControl(new OpenLayers.Control.ScaleLine()); map.addControl(new OpenLayers.Control.LayerSwitcher()); map.addControl(new OpenLayers.Control.MousePosition()); map.addControl(new OpenLayers.Control.OverviewMap()); // 初期表示の緯度経度 var zoomlevel = 15; var initLon = 139.5; var initLat = 35.5 map.setCenter( new OpenLayers.LonLat(initLon, initLat). transform(epsg4326, epsg3857), zoomlevel ); // 初期表示範囲の設定 var extent = new OpenLayers.Bounds(138.7,35.06,140,35.73). transform(epsg4326, epsg3857); // マウスの緯度経度 var lonlat = new OpenLayers.LonLat(139.5, 35.5); lonlat.transform(map.displayProjection, map.baseLayer.projection); // 神奈川県の市区町村行政界 var prefLayer = new OpenLayers.Layer.Vector("神奈川県市区町村界", { strategies : [new OpenLayers.Strategy.Fixed()], protocol : new OpenLayers.Protocol.HTTP({ url : "../data/c14_region.json", format : new OpenLayers.Format.GeoJSON() }) }); map.addLayers([prefLayer]); // 神奈川県の主要道路 var roadLayer = new OpenLayers.Layer.Vector("主要道路", { strategies : [new OpenLayers.Strategy.Fixed()], protocol : new OpenLayers.Protocol.HTTP({ url : "../data/c14_road.json", format : new OpenLayers.Format.GeoJSON() }) }); map.addLayers([roadLayer]); new Ext.Viewport({ layout: "border", items: [{ region: "north", contentEl: "title", height: 50 }, { region: "center", id: "mappanel", title: "OpenStreetMap", xtype: "gx_mappanel", map: map, layers: [osmlayer, webtisLayer, prefLayer, roadLayer], extent: extent, split: true, tbar : [ {xtype : 'tbbutton', text: '地図の中心緯度経度', handler: function(){ var c = mapPanel.map.getCenter(). transform(epsg3857, epsg4326); var long = c.lon; var ns = OpenLayers.Util.getFormattedLonLat(c.lat); var ew = OpenLayers.Util.getFormattedLonLat(c.lon,'lon'); Ext.Msg.alert(this.getText(), ns + " , " + ew); } }, {xtype : 'tbbutton', text : 'Event...', handler : aboutViewer }, {xtype: 'tbseparator' }, {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 } ] } ] }, { region: "east", title: "Description", contentEl: "description", width: 200, split: true }] }); mapPanel = Ext.getCmp("mappanel"); // function aboutViewer(){ Ext.Msg.alert('Event handler', 'ここにクリックイベントを記述します。<br>©2013 TYS.'); } // マウス座標の緯度経度変換 function formatLonlats(lonLat) { var lat = lonLat.lat; var long = lonLat.lon; var ns = OpenLayers.Util.getFormattedLonLat(lat); var ew = OpenLayers.Util.getFormattedLonLat(long,'lon'); return ns + ', ' + ew + ' (' + (Math.round(lat * 100000) / 100000) + ', ' + (Math.round(long * 100000) / 100000) + ')'; } function menuProc(obj){ Ext.Msg.alert('メニュー番号', '選択した' + obj.selectType +'番です。' ); } });
tbar:[…]がtoolbarの定義です。
toolbarのbutton形式は、xtype : 'tbbutton'で定義して、プルダウンで4つのメニューを表示します。
そして、選択後のeventを handler : menuProcで定義して、menuProcでその処理を書きます。
な感じです。
で中心緯度経度がalertに表示されます。
LayerSwitcherとOverviewMapのiconがなぜか表示されません。
mouseをicon近くに持って行くとmouse cursorが変わるので、クリックすると表示されます。
なぜだろう?
今回のまとめ
サンプルをクリックすると今回の地図が表示されます。
とりあえず、OpenStreetMapと電子国土を表示しました。
次回は、tree.htmlを参考にして、OpenStreetMapと電子国土とGeoJSONデータの表示のtryします。
viewportのregionを追加したり、toolbarをbottomに配置したり、tabを使ったりと、このサンプルでいろいろと試してみると良いと思います。
最近のコメント