今回は、GeoExtのVector FeatureのPopup表示をやってみます。

basemapとして表示する地図は、OpenStreetMapと電子国土を使います。
Popupさせるだけなので、basemapはいらないと言えばいらないのですが。。。

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

Vector dataは、いままで何回も登場している神奈川県の行政界データを使います。
shapfileからGeoJSONやKML、GMLに変換するには、QGISがおすすめです。これ一本あれば、ほかのGISソフトはいらないくらいです。　先人に感謝します。

GeoExtのfeature popupのサンプルを参考に作成します。

tree nodeはtreePanelを使って作成します。

 
var mapPanel, popup;
 
Ext.onReady(function() {
 
// 座標系の設定
var epsg4326 = new OpenLayers.Projection("EPSG:4326");
var epsg3857 = new OpenLayers.Projection("EPSG:3857");
 
var map = new OpenLayers.Map({});
 
// 電子国土layerの作成
var webtisLayer = new webtis.Layer.BaseMap("電子国土");
map.addLayers([webtisLayer]);
map.displayProjection = epsg4326;
 
// openstreetmapの作成
var osmlayer = new OpenLayers.Layer.OSM("OpenStreetMap")
map.addLayers([osmlayer]);
 
// 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.Navigation());
 
// 初期状態でoverviewmapを開く
var overview1 = new OpenLayers.Control.OverviewMap({
maximized : true
});
map.addControl(overview1);
 
// 初期状態でlayerswticherを開く
var switcher1 = new OpenLayers.Control.LayerSwitcher();
map.addControl(switcher1);
switcher1.maximizeControl();
 
// 初期表示の緯度経度
map.setCenter(new OpenLayers.LonLat(139.5, 35.5).transform(
epsg4326, epsg3857), 15);
 
var extents = 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()
})
});
 
// create select feature control
var selectCtrl = new OpenLayers.Control.SelectFeature(prefLayer);
 
// define "createPopup" function
function createPopup(feature) {
var bogusMarkup = '<table>';
bogusMarkup += '<p>属性値</p>';
for (var attr in feature.attributes) {
bogusMarkup += '<tr><td>' + attr + ' : ' + '</td><td>'
+ feature.attributes[attr] + '</td></tr>';
}
bogusMarkup += '</table>';
 
popup = new GeoExt.Popup({
title : 'My Popup',
location : feature,
width : 200,
html : bogusMarkup,
maximizable : true,
collapsible : true
});
// unselect feature when the popup
// is closed
popup.on({
close : function() {
if (OpenLayers.Util.indexOf(
prefLayer.selectedFeatures,
this.feature) > -1) {
selectCtrl.unselect(this.feature);
}
}
});
popup.show();
};
 
// create popup on "featureselected"
prefLayer.events.on({
featureselected : function(e) {
createPopup(e.feature);
}
});
 
// 表示するwindowの作成
var mapwin = new Ext.Window({
title : "GeoExt Popup Window",
height : 480,
width : 600,
layout : "fit",
map : map,
items : [{
xtype : "gx_mappanel",
id : "mappanel",
map : map,
layers : [osmlayer, webtisLayer, prefLayer],
extent : extents
}]
});
 
// mapwinの表示
mapwin.show();
 
mapPanel = mapwin.items.get(0);
mapPanel.map.addControl(selectCtrl);
selectCtrl.activate();
 
// マウス座標の緯度経度変換
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) + ')';
}
 
});

機能的には、

• mapの作成
• 神奈川県の行政界と主要道路GeoJSONデータ読み込み
• popup windowとeventの作成
• mapに表示
• featureをclickでpopup windowの表示
• EPSG:4326に統一

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

FireFoxで実行しすると、

な感じです。

神奈川県の行政界のfeatureをclickすると、

な感じで、popup windowsが表示されます。

また、popup windowは表示したままの状態することもできます。

な感じで、popup windowsを表示したままの状態です。

ここで、注意点ですが、本来はviewportに表示するため、window表示させると、popup windowsを表示した場合、完全に閉じないと、windowが残ってしまいます。

な感じです。

まぁ、サンプルなので問題ないっちゃないですけど。

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

OverviewMapとLayerSwitcherのiconがなぜか表示されません。
この非表示の問題の解決ができないので、初期表示状態にOverviewMapとLayerSwitcherをon状態いにしました。
そのcodeは、

// 初期状態でoverviewmapを開く
var overview1 = new OpenLayers.Control.OverviewMap({
		maximized : true
	});
map.addControl(overview1);
 
// 初期状態でlayerswticherを開く
var switcher1 = new OpenLayers.Control.LayerSwitcher();
map.addControl(switcher1);
switcher1.maximizeControl();

これで、表示状態になります。

最終的には、LayerSwitcherは使わないのですが、OverviewMapについては、「west south」の別の場所に表示するようにします。

vector dataのfeature popupの表示をしてみました。

次回は、layerのopacitysとzoomsliderをtryしてみます。

GeoExt1.1 Tutorialの目次に戻る。