Daily Archives: 05/12/2013

GeoExt1.1でOpenStreetMapと電子国土を表示してみる。 [Chapter 2]

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>&copy;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については、各人でお勉強しといてくださいね。

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

な感じです。

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>&copy;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でその処理を書きます。

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

な感じです。

また、中心緯度経度ボタンをクリックすると
blog.godo-tys.jp_wp-content_gallery_geoext_01_image07.jpg

で中心緯度経度がalertに表示されます。

LayerSwitcherとOverviewMapのiconがなぜか表示されません。
mouseをicon近くに持って行くとmouse cursorが変わるので、クリックすると表示されます。
なぜだろう?

今回のまとめ

サンプルをクリックすると今回の地図が表示されます。

とりあえず、OpenStreetMapと電子国土を表示しました。
次回は、tree.htmlを参考にして、OpenStreetMapと電子国土とGeoJSONデータの表示のtryします。

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

GeoExt1.1 Tutorialの目次に戻る。

1 / 11

Social Widgets powered by AB-WebLog.com.