Daily Archives: 05/13/2013

GeoExt1.1で属性データを表示してみる。[Chapter 3]

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

GeoExtのLayerのtree表示を行う前に、gridpanelに属性値を表示する方法をやってみます。

Extjsのgridpanelについては、Ext.grid.GridPanelクラスなどをみてください。
ようするに、テーブルを表示するイメージでしょうか?

表示する地図は、OpenStreetMapを使ってみます。
BaseLayerに電子国土も追加することができます。

セットアップと入手については、GeoExt1.1 [Chapter 1] を参考にしてください。

今回使うgridpanelについては、ExtJS入門17 グリッド・パネル 基本編が大変参考になります。

OpenStreetmapとGridの表示

まずは、Grid with featuresのサンプルを参考にして、mapとgridの連携を行います。
htmlとjsに分けて記述していきます。
まずは、htmlファイルです。
ファイ名は、feature-grid.html

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>GeoExt FeatureStore in an Ext Grid</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="feature-grid.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>
<h1>Grid Panel configured with a GeoExt.data.FeatureStore</h1>
 
<p>
This example shows an Ext grid loaded with features read from a
GeoJSON document (../data/c14_region.json).
</p>
 
<p>
Because the layer and the store are bound to each other, the
features loaded into the store are automatically added to the layer. <br>
A GeoExt feature selection model is also used so that selecting rows in
the grid selects features in the layer, and vice-versa.
</p>
 
<p>
See <a href=feature-grid.js>feature-grid.js</a>.
</p>
 
<div id="mainpanel"></div>
</body>
</html>

mousepositionとscalelineについて、cssを付け加えています。

次に、feature-grid.js

機能的には、

  • mapの作成
  • 神奈川県のGeoJSONデータ読み込み
  • gridに表示
  • mapに表示
  • mousepositionの緯度経度を度分秒で表示
  • EPSG:4326に統一

girdの作成は

  1. dataの用意(GeoJSON形式)今回は神奈川県の行政界を使います。
  2. storeの作成(datastore)
  3. gridの定義
  4. gridの表示

となります。

var mapPanel, datastore, gridPanel, mainPanel;
 
Ext.onReady(function() {
 
// 座標系の設定
var epsg4326 = new OpenLayers.Projection("EPSG:4326");
var epsg3857 = new OpenLayers.Projection("EPSG:3857");
 
var map = new OpenLayers.Map();
 
// openstreetmapの作成
var osmLayer = new OpenLayers.Layer.OSM("OSM");
 
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());
 
// create vector layer
var context = {
getColor : function(feature) {
var index;
if (feature.attributes.name.indexOf("横浜") > -1) {
return 'green';
} else if (feature.attributes.name.indexOf("川崎") > -1) {
return 'orange';
} else if (feature.attributes.name.indexOf("相模原") > -1) {
return 'yellow';
} else {
return 'red';
}
}
};
 
// polygon template
var template = {
fillOpacity : 0.5,
fillColor : "${getColor}",
strokeWidth : 1,
strokeOpacity : 1,
strokeColor : "${getColor}"
};
 
var style = new OpenLayers.Style(template, {
context : context
});
 
// 神奈川県の市区町村行政界
var vecLayer = new OpenLayers.Layer.Vector("行政界", {
strategies : [new OpenLayers.Strategy.Fixed()],
styleMap : new OpenLayers.StyleMap({
'default' : style
}),
protocol : new OpenLayers.Protocol.HTTP({
url : "../data/c14_region.json",
format : new OpenLayers.Format.GeoJSON()
})
 
});
 
// layerの追加
map.addLayers([osmLayer, vecLayer]);
 
map.setCenter(new OpenLayers.LonLat(139.4, 35.4).transform(
epsg4326, epsg3857), 9);
 
// create map panel
mapPanel = new GeoExt.MapPanel({
title : "Map OpenStreetMapとGeoJSONデータ",
region : "center",
height : 400,
width : 500,
map : map,
// center: new OpenLayers.LonLat(139.4, 35.4),
zoom : 9
});
 
// create feature store, binding it to the vector layer
datastore = new GeoExt.data.FeatureStore({
layer : vecLayer,
fields : [{
name : 'name',
type : 'string'
}, {
name : 'code',
type : 'integer'
}],
autoLoad : true
});
 
// create grid panel configured with feature store
gridPanel = new Ext.grid.GridPanel({
title : "Feature Grid",
region : "east",
store : datastore,
width : 270,
columns : [{
header : "市区町村名",
width : 150,
dataIndex : "name",
sortable: true
}, {
header : "行政コード",
width : 100,
dataIndex : "code",
sortable: true
}],
sm : new GeoExt.grid.FeatureSelectionModel()
});
 
// create a panel and add the map panel and grid panel
// inside it
mainPanel = new Ext.Panel({
renderTo : "mainpanel",
layout : "border",
height : 400,
width : 770,
items : [mapPanel, gridPanel]
});
 
// マウス座標の緯度経度変換
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) + ')';
}
 
});

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

OpenStreetMapを表示するサンプルに、gridが付け加わったようになっていますし、columnの設定などもsourceから理解できると思います。

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

な感じです。

属性値をクリックするとそれに対応したfeatureが選択状態となり、逆にmap上にfeatureをクリックするとgridのデータに移動します。
これは、なかなか良いですね。

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

LayerSwitcherとOverviewMapのiconがなぜか表示されません。
mouseをicon近くに持って行くとmouse cursorが変わるので、クリックすると表示されます。
なぜだろう?
この現象は、OpenLayers-2.11では、iconのlink先がおかしいのか「四角い枠」だけ表示されます。

今回のまとめ

属性値をgridpanelに表示してみました。
これを使えば、いろいろなデータを重ね合わせて、属性値を表示するとができます。

次回は、viewportのlayoutを変更して、zoomsliderを付け加えてみます。 その後にtree.htmlを参考にして、OpenStreetMapと電子国土とGeoJSONデータの表示のtryします。

GeoExt1.1 Tutorialの目次に戻る。

1 / 11

Social Widgets powered by AB-WebLog.com.