東京都の公共施設のレイヤ（tokyo_pf）の WFS レイヤの属性をポップアップ表示させる機能を追加します。
Geographic Information Systems の
How to collect data via WFS and Popup
http://gis.stackexchange.com/questions/34390/how-to-collect-data-via-wfs-and-popup
を参考に、WFS レイヤの属性をポップアップ表示します。
b 「ファイルを開く」ウィンドウで、「OpenLayers-2.13.1」->「ol007-nippon_bmi_akiruno_pgis.html」をクリックして選択し、「OK」ボタンをクリックします。
f 「ol007-nippon_bmi_akiruno_pgis.html」の内容をコピーして「ol008-nippon_bmi_akiruno_pgis.html」ファイルに貼り付けます。
g javascript の一部を次のように修正します。
---
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.MousePosition());
map.zoomToMaxExtent();
// ここから追加
var select = new OpenLayers.Control.SelectFeature(layer4);
map.addControl(select);
select.activate();
function onPopupClose(evt) {
selectControl.unselect(selectedFeature);
}
layer4.events.on({
featureselected: function(event) {
var feature = event.feature;
var content = '<h1>' + feature.attributes.p02_004 + '</h1>'
+ '<hr>'
+ feature.attributes.p02_001 + '<br />'
+ feature.attributes.p02_002 + '<br />'
+ feature.attributes.p02_003 + '<br />'
+ feature.attributes.p02_005 + '<br />'
+ feature.attributes.p02_006 + '<br />'
+ feature.attributes.p02_007;
feature.popup = new OpenLayers.Popup.FramedCloud(
"pop",
feature.geometry.getBounds().getCenterLonLat(),
null,
content,
null,
true
);
map.addPopup(feature.popup);
},
featureunselected: function(event) {
var feature = event.feature;
map.removePopup(feature.popup);
feature.popup.destroy();
feature.popup = null;
}
});
}
</script>
</head>
<body onload="init()">
---
ブラウザのアドレスバーに
http://192.168.1.200/mapsite/openlayersTokyoproj/ol008-nippon_bmi_akiruno_pgis.html
と入力して Enter キーを押します。
表示しない倍率で表示させてみました。文字化けしてしまいました。
MapServer の WFS のエンコードが、ISO-8859-1 なのが理由です。
Javascript で文字化けを修正できなかった（私のスキルの問題）ので、MapServer の WFS サーバにエンコード「UTF-8」を設定しました。
nob61@debian7-vmw:~/mapfile$ vim nippon_nlni_tokyo_pgis.map
---
WEB
IMAGEPATH "/home/user/mapsite/ms_tmp/"
IMAGEURL "/mapsite/ms_tmp/"
METADATA
"wms_title" "Nioopn NLNI Tokyo Map WMS Server" # WMS サーバ設定
"wms_onlineresource" "http://192.168.1.200/cgi-bin/mapserv?map=/home/user/mapfile/nippon_nlni_tokyo_pgis.map&"
"wms_srs" "EPSG 2451 EPSG:4326"
"wms_enable_request" "*"
"wfs_title" "Nippon NLNI Tokyo Map WFS Server" # WFS サーバ設定
"wfs_onlineresource" "http://192.168.1.200/cgi-bin/mapserv?map=/home/user/mapfile/nippon_nlni_tokyo_pgis.map&"
"wfs_srs" "EPSG:4326"
"wfs_enable_request" "*"
"wfs_encoding" "UTF-8" # 追加
END
---
ブラウザのアドレスバーに
http://192.168.1.200/mapsite/openlayersTokyoproj/ol008-nippon_bmi_akiruno_pgis.html
と入力して Enter キーを押します。
GeoServer の WFS のエンコードは、UTF-8 なので日本語が表示されます。
0 件のコメント:
コメントを投稿