HTML ファイルを新規作成します。
「openlayersTokyoproj」 を右クリックして 新規 -> HTML ファイル をクリック。
「HTML ファイル」ウィンドウの「ファイル名（任意：featureserver_example.html）」に入力して「完了」ボタンをクリック。
「openlayers20_georss_f.html」の内容をコピーして新規作成したファイルに貼り付けます。
次の様にコードを修正します。
<title> などは任意に修正してください。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>FeatureServer Example in OpenLayers</title>
<link rel="stylesheet" href="./theme/default/style.css" type="text/css" />
<link rel="stylesheet" href="./examples/style.css" type="text/css" />
<script src="./lib/OpenLayers.js"></script>
<script type="text/javascript" src="./lib/proj4js/lib/proj4js-compressed.js"></script>
<script type="text/javascript" src="./lib/proj4js/lib/projCode/tmerc.js"></script>
<script type="text/javascript" src="./lib/proj4js/lib/defs/EPSG2456.js"></script>
// map ベースレイヤ部分
<script type="text/javascript">
var map, baselayer, postgislayer1, postgislayer2, osmlayer, flickrlayer;
function init(){
OpenLayers.ProxyHost="/cgi-bin/proxy.cgi?url=";
map = new OpenLayers.Map('map', {
projection: new OpenLayers.Projection("EPSG:2456"),
displayProjection: new OpenLayers.Projection("EPSG:4326"),
maxResolution: 'auto',
units: 'meters',
maxExtent: new OpenLayers.Bounds(-279000,1054000,-185000,1104000)
});
baselayer = new OpenLayers.Layer.WMS( "Tokyo Height WMS",
"http://localhost/cgi-bin/mapserv?",
{
map: '/home/nob61/mapfile/tokyo_bmi_pgis_img.map',
layers: 'height',
format: 'image/png'
});
// PostGIS 部分
postgislayer1 = new OpenLayers.Layer.WFS( "Tokyo Kukaku Sen WFS",
"featureserver-1.12/featureserver.cgi/gyoseisen?format=WFS",
{
maxfeatures: '5' //すべて描画すると時間がかかるので５個まで表示
},{
extractAttributes: true,
displayInLayerSwitcher: true,
visibility: false //すべて描画すると時間がかかるので初めは非表示
});
postgislayer1.style = {
fillColor:'#FF0000',
fillOpacity: 0.2,
strokeColor: "#FF0000",
strokeOpacity: 1,
strokeWidth: 1
};
postgislayer2 = new OpenLayers.Layer.WFS( "Tokyo Gyosei-Kai WFS",
"featureserver-1.12/featureserver.cgi/gyoseikai?format=WFS",
{
maxfeatures: '1'
},{
extractAttributes: true,
displayInLayerSwitcher: true,
visibility: false,
projection: new OpenLayers.Projection('EPSG:4326')
//projection を指定すると描画される
});
postgislayer2.style = {
fillColor:'#FF00cc',
fillOpacity: 0.2,
strokeColor: "#FF00cc",
strokeOpacity: 1,
strokeWidth: 1
};
// Open Street Map 部分
osmlayer = new OpenLayers.Layer.WFS( "Tokyo OSM WFS",
"featureserver-1.12/featureserver.cgi/osm?format=WFS",
{
maxfeatures: '10'
},{
extractAttributes: true,
displayInLayerSwitcher: true,
projection: new OpenLayers.Projection('EPSG:4326')
});
// Flickr 部分
flickrlayer = new OpenLayers.Layer.WFS( "Tokyo Flickr WFS",
"featureserver-1.12/featureserver.cgi/flickr?format=WFS",
{
maxfeatures: '10'
},{
extractAttributes: true,
displayInLayerSwitcher: true,
projection: new OpenLayers.Projection('EPSG:4326')
});
// Map 表示と <body> 部分
map.addLayers([baselayer, postgislayer1, postgislayer2, osmlayer, flickrlayer]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.MousePosition());
map.addControl(new OpenLayers.Control.ScaleLine());
if (!map.getCenter()) {
map.zoomToMaxExtent()
};
}
</script>
</head>
<body onload="init()">
<h1 id="title">FeatureServer Example in OpenLayers</h1>
<div id="map" class="smallmap"></div>
</body>
</html>
postgislayer1 だけ表示されました。
Proj4js で再投影するためか、表示に時間がかかりました。
「警告：応答の内スクリプト」ウィンドウが表示されるので、「処理を続行」ボタンをクリックしてください。
レイヤが表示されないときは、Firebug で出力されるメッセージを参考にしました。
postgislayer2 は、空の WFS ツリーが出力されました。
map と投影（projection）が違うので指定してみました。
projection: new OpenLayers.Projection('EPSG:4326')
0 件のコメント:
コメントを投稿