2008年10月27日月曜日

Aptana1.2のデータベースを使ってみる

Aptana が 1.2 にバージョンアップされました。
データベースが扱えるようになったので試してみます。

Aptana
Database Explorer
http://aptana.com/docs/index.php/Database_Explorer

を参考にしました。

1 データベース・エクスプローラーのパースペクティブを開く
Eclipse 右上の「パースペクティブを開く」ボタンをクリックして、リストの「その他」をクリックします。
「パースペクティブを開く」ウィンドウで「データベース・エクスプローラー」をクリックして選択し、「OK」ボタンをクリックします。




2 データベースの追加
Step1

「DB ツリー・ビューワー」の「登録(追加)」ボタンをクリックして、「データベース定義の登録」ウィザードを開きます。

Step2

「データベース定義名」を入力し「次へ」ボタンをクリックします。

Step3

「接続情報の設定」で次のように設定します。(以前設定した、SQL Explorer の内容と同じです。)
JDBC Driver:
「追加」ボタンをクリックします。
「データベース定義名」に「PostgrsQL Driver」と入力します。
「JDBC ドライバー」の「ファイルの追加」ボタンをクリックします。
ポップアップウィンドウで /usr/share/java/postgresql-jdbc3-8.2.jar を選んで OK ボタンをクリックします。
接続文字列:jdbc:postgresql://localhost:5432/tokyo
接続ユーザ:user
接続パスワード:password
「接続テスト」ボタンをクリックすると右上に「接続に成功しました」と表示されます。
「次へ」ボタンをクリックします。

Step4

「接続オプションを設定することができます」は今回変更せずに「終了」ボタンをクリックします。


3 データベースの表示

「DB ツリー・ビュー」の「kamakura」をダブルクリックします。
kamakura->public->TABLE の順にツリーを開きます。
「gyoseikai」をダブルクリックするとデータベースが表示されます。

4 SQL文の実行
「SQL 実行・ビュー」にSQL文を実行すると次のエラーが表示されます。
ERROR: syntax error at or near "use"
これはバグなのか、設定で直るのか調査中です。
SQL文の実行が直れば使えそうです。

2008年10月18日土曜日

OpenLayers 15k Map Control についてやり残したことについてやり残したこと

次のことをやり残しています。
すぐには解決できそうもないので、分かったらそのときにメモします。

1 OpenLayers.Control.PanPanel と OpenLayers.Control.ZoomPanel で表示できませんでした。

パンとズームを別々に表示できませんでした。
OpenLayers.Control.PanZoomPanel ならOK。


2 OpenLayers.Control.PanZoomBar と OpenLayers.Control.Overview が 地図を units を 'meters' で表示すると一緒に使えませんでした。

OpenLayers.Map のオプションで "control: []" を使うと Overview(オーバービュー)の属性にもこれが含まれるため、表示できません。(エラーになります。)


3 OpenLayers.Control.ScaleLine でスケールの値が "NaN" になります。

units が 'meters' だから?(未確認)

2008年10月16日木曜日

OpenLayers 15j 操作を 戻る・進む ボタン

Map Navigation History Example(navigation-history.html) を参考に、直前の操作に戻る、進むボタンを追加してみます。
地図の表示スクリプト部分に OpenLayers.Control.NavigationHistory を次のように追加します。

---
map.addLayers([layer1, layer3, layer4, layer5, layer6, layer7, layer8]);
var panel = new OpenLayers.Control.NavToolbar({'div':OpenLayers.Util.getElement('paneldiv')});
map.addControl(panel);
map.zoomToMaxExtent();
map.setOptions({restrictedExtent: extent});
var click = new OpenLayers.Control.Click();
map.addControl(click);
click.activate();
map.events.register("moveend", null, displayZoom);
map.fractionalZoom = input.checked;
map.zoomTo(Math.round(map.zoom));
nav = new OpenLayers.Control.Navigation({'zoomWheelEnabled': false});
map.addControl(nav);
map.addControl(new OpenLayers.Control.LayerSwitcher());
var controlOptions = {
mapOptions: mapOptions
};
var overview = new OpenLayers.Control.OverviewMap(controlOptions);
map.addControl(overview);
overview.maximizeControl();
var mouseposition = new OpenLayers.Control.MousePosition();
map.addControl(mouseposition);
map.events.register("mousemove", map, function(e) {
var position = this.events.getMousePosition(e);
OpenLayers.Util.getElement("coords").innerHTML = position;
});
var keyboard = new OpenLayers.Control.KeyboardDefaults();
map.addControl(keyboard);

//ここから追加
var nav = new OpenLayers.Control.NavigationHistory();
map.addControl(nav);
var panel = new OpenLayers.Control.Panel({div: document.getElementById("panel")});
panel.addControls([nav.next, nav.previous]);
map.addControl(panel);
//ここまで
}
function displayZoom() {
document.getElementById("zoom").innerHTML = map.zoom.toFixed(4);
}
</script>
---

<body> タグ内に次のように <div> タグを追加し、キー操作の説明とアクセスキー操作の設定をします。

---
<div id="map"></div>
<div id="paneldiv" class="olControlNavToolbar"></div>
<div id="panel" style="margin-left:50px;"></div>
<div id="coords" style="margin-left:50px;"></div>
---

スタイルシートを次のように追加します。

---
<style type="text/css">
#map {
width: 512px;
height: 512px;
border: 1px solid black;
}
a {
text-decoration: none;
font-size: 1.2em;
}
a em {
font-style: normal;
font-weight: normal;
text-decoration: underline;
}
a:hover {
text-decoration: underline;
}
a.api {
font-size:1em;
text-decoration:underline;
}
/* ここから追加 */
#panel {
right: 0px;
height: 30px;
width: 200px;
}
#panel div {
float: left;
margin: 5px;
}
/* ここまで */
</style>
---

OpenLayers 15i キーボードでパンとズーム操作

Accessible Example(accssible.html) を参考に、キーボードでパンとズーム操作をしてみます。
地図の表示スクリプト部分に OpenLayers.Control.KeyboardDefaults を次のように追加します。

---
map.addLayers([layer1, layer3, layer4, layer5, layer6, layer7, layer8]);
var panel = new OpenLayers.Control.NavToolbar({'div':OpenLayers.Util.getElement('paneldiv')});
map.addControl(panel);
map.zoomToMaxExtent();
map.setOptions({restrictedExtent: extent});
var click = new OpenLayers.Control.Click();
map.addControl(click);
click.activate();
map.events.register("moveend", null, displayZoom);
map.fractionalZoom = input.checked;
map.zoomTo(Math.round(map.zoom));
nav = new OpenLayers.Control.Navigation({'zoomWheelEnabled': false});
map.addControl(nav);
map.addControl(new OpenLayers.Control.LayerSwitcher());
var controlOptions = {
mapOptions: mapOptions
};
var overview = new OpenLayers.Control.OverviewMap(controlOptions);
map.addControl(overview);
overview.maximizeControl();
var mouseposition = new OpenLayers.Control.MousePosition();
map.addControl(mouseposition);
map.events.register("mousemove", map, function(e) {
var position = this.events.getMousePosition(e);
OpenLayers.Util.getElement("coords").innerHTML = position;
});

//ここから追加
var keyboard = new OpenLayers.Control.KeyboardDefaults();
map.addControl(keyboard);
//ここまで
}
function displayZoom() {
document.getElementById("zoom").innerHTML = map.zoom.toFixed(4);
}
</script>
---

<body> タグ内に次のように <div> タグを追加し、キー操作の説明とアクセスキー操作の設定をします。

---
<div id="map"></div>
<div id="paneldiv" class="olControlNavToolbar"></div>
<div id="coords" style="margin-left:50px;"></div>
<div style="margin-left:50px;">Moving your mouse to the upper left corner of this map should return 'x=0,y=0'</div>
<div style="margin-left:50px;">zoom: <span id="zoom"></span></div>
<div style="margin-left:50px;"><a href="#" onclick="nav.enableZoomWheel();return false">Turn on Wheel Zoom</a> | <a href="#" onclick="nav.disableZoomWheel(); return false;">Turn off Wheel Zoom</a></div>

<!-- ここを追加 キーとアクセスキー操作の表示-->
<div style="margin-left:50px;">
<a href="javascript: void map.zoomIn();"
accesskey="i">
zoom <em>i</em>n
</a>|
<a href="javascript: void map.zoomOut();"
accesskey="o">
zoom <em>o</em>ut
</a>|
<a href="javascript: void map.pan(0, -map.getSize().h / 4);"
accesskey="n">
pan <em>n</em>orth
</a>|
<a href="javascript: void map.pan(-map.getSize().w / 4, 0);"
accesskey="w">
pan <em>w</em>est
</a>|
<a href="javascript: void map.pan(map.getSize().w / 4, 0);"
accesskey="e">
pan <em>e</em>ast
</a>|
<a href="javascript: void map.pan(0, map.getSize().h / 4);"
accesskey="s">
pan <em>s</em>outh
</a>
<div id="docs" style="margin-left:50px;">
<p>Navigate the map in one of three ways:
<ul>
<li>Click on the named links to zoom and pan</li>
<li>Use following keys to pan and zoom:
<ul>
<li>+ (zoom in)</li>
<li>- (zoom out)</li>
<li>up-arrow (pan north)</li>
<li>down-arrow (pan south)</li>
<li>left-arrow (pan east)</li>
<li>right-arrow (pan west)</li>
</ul>
</li>
<li>If access keys work for links in your browser, use:
<ul>
<li>i (zoom in)</li>
<li>o (zoom out)</li>
<li>n (pan north)</li>
<li>w (pan west)</li>
<li>e (pan east)</li>
<li>s (pan south)</li>
</ul>
</li>
</ul>
</p>
This is an example of using alternate methods to control panning and zooming. This approach uses map.pan() and map.zoom(). You'll note that to pan, additional math is necessary along with map.size() in order to set the distance to pan.
</div>
---

スタイルシートを次のように追加します。

---
<style type="text/css">
#map {
width: 512px;
height: 512px;
border: 1px solid black;
}
/* ここから追加 */
a {
text-decoration: none;
font-size: 1.2em;
}
a em {
font-style: normal;
font-weight: normal;
text-decoration: underline;
}
a:hover {
text-decoration: underline;
}
a.api {
font-size:1em;
text-decoration:underline;
}
/* ここまで */
</style>
---

OpenLayers 15h マウス位置の座標表示

MousePosition Control(mouse-position.html) を参考に、マウスの位置の座標を表示してみます。
地図の表示スクリプト部分に OpenLayers.Control.MousePosition を次のように追加します。

---
map.addLayers([layer1, layer3, layer4, layer5, layer6, layer7, layer8]);
var panel = new OpenLayers.Control.NavToolbar({'div':OpenLayers.Util.getElement('paneldiv')});
map.addControl(panel);
map.zoomToMaxExtent();
map.setOptions({restrictedExtent: extent});
var click = new OpenLayers.Control.Click();
map.addControl(click);
click.activate();
map.events.register("moveend", null, displayZoom);
map.fractionalZoom = input.checked;
map.zoomTo(Math.round(map.zoom));
nav = new OpenLayers.Control.Navigation({'zoomWheelEnabled': false});
map.addControl(nav);
map.addControl(new OpenLayers.Control.LayerSwitcher());
var controlOptions = {
mapOptions: mapOptions
};
var overview = new OpenLayers.Control.OverviewMap(controlOptions);
map.addControl(overview);
overview.maximizeControl();

//ここから追加
var mouseposition = new OpenLayers.Control.MousePosition();
map.addControl(mouseposition);
map.events.register("mousemove", map, function(e) {
var position = this.events.getMousePosition(e);
OpenLayers.Util.getElement("coords").innerHTML = position;
});
//ここまで
}
function displayZoom() {
document.getElementById("zoom").innerHTML = map.zoom.toFixed(4);
}
</script>
---

<body> タグ内に次のように <div> タグを追加し、画像内の位置をピクセル単位で表示します。

---
<div id="map"></div>
<div id="paneldiv" class="olControlNavToolbar"></div>

<!-- ここを追加 X, Yの表示-->
<div id="coords" style="margin-left:50px;"></div>
<div style="margin-left:50px;">Moving your mouse to the upper left corner of this map should return 'x=0,y=0'</div>

<div style="margin-left:50px;">zoom: <span id="zoom"></span></div>
<div style="margin-left:50px;"><a href="#" onclick="nav.enableZoomWheel();return false">Turn on Wheel Zoom</a> | <a href="#" onclick="nav.disableZoomWheel(); return false;">Turn off Wheel Zoom</a></div>
---

OpenLayers 15g Overview(オーバービュー、リファレンス)

Overview Map(overviewmap.html)を参考に、リファレンス(参照)地図を表示します。
OpenLayers.Map のオプションを次のように修正します。
このとき、OpenLayers.Control.PanZoomBar を削除します。
map.addControl で Overview を設定するとエラーになるためです。

---
function init(){
OpenLayers.ProxyHost="/cgi-bin/proxy.cgi?url=";
var mapOptions = {
// controls: [new OpenLayers.Control.PanZoomBar()],
numZoomLevels: 10,
maxResolution: 'auto',
units: 'meters',
maxExtent: extent
};
map = new OpenLayers.Map('map', mapOptions);
---

地図の表示部分のスクリプトに OpenLayers.Control.OverviewMap を次のように追加します。

---
map.addLayers([layer1, layer3, layer4, layer5, layer6, layer7, layer8]);
var panel = new OpenLayers.Control.NavToolbar({'div':OpenLayers.Util.getElement('paneldiv')});
map.addControl(panel);
map.zoomToMaxExtent();
map.setOptions({restrictedExtent: extent});
var click = new OpenLayers.Control.Click();
map.addControl(click);
click.activate();
map.events.register("moveend", null, displayZoom);
map.fractionalZoom = input.checked;
map.zoomTo(Math.round(map.zoom));
nav = new OpenLayers.Control.Navigation({'zoomWheelEnabled': false});
map.addControl(nav);
map.addControl(new OpenLayers.Control.LayerSwitcher());

//ここから追加
var controlOptions = {
mapOptions: mapOptions
};
var overview = new OpenLayers.Control.OverviewMap(controlOptions);
map.addControl(overview);
overview.maximizeControl();
//ここまで
}
function displayZoom() {
document.getElementById("zoom").innerHTML = map.zoom.toFixed(4);
}
</script>
---

OpenLayers 15f Layer Switcher(レイヤ スイッチャー)

Layer Switcher Example(layerswitcher.html)を参考に、Layer Switcher を地図の外に配置します。
地図の表示部分のスクリプトに OpenLayers.Control.LayerSwitcher() を次のように追加します。

---
map.addLayers([layer1, layer3, layer4, layer5, layer6, layer7, layer8]);
var panel = new OpenLayers.Control.NavToolbar({'div':OpenLayers.Util.getElement('paneldiv')});
map.addControl(panel);
map.zoomToMaxExtent();
map.setOptions({restrictedExtent: extent});
var click = new OpenLayers.Control.Click();
map.addControl(click);
click.activate();
map.events.register("moveend", null, displayZoom);
map.fractionalZoom = input.checked;
map.zoomTo(Math.round(map.zoom));
nav = new OpenLayers.Control.Navigation({'zoomWheelEnabled': false});
map.addControl(nav);

map.addControl(new OpenLayers.Control.LayerSwitcher()); //追加

}
function displayZoom() {
document.getElementById("zoom").innerHTML = map.zoom.toFixed(4);
}
</script>
---



Layer Switcher を地図の外には位置するには、new OpenLayers.Control.LayerSwitcher() を次のように修正して、<body> タグ内に Layer Switcher 用に次のように <div> タグを追加します。

---
map.addControl(new OpenLayers.Control.LayerSwitcher({'div':OpenLayers.Util.getElement('layerswitcher')})); //修正
---

---
<!-- ここを追加 Layer Switcher の表示-->
<div id="layerswitcher"></div>
<div id="map"></div>
<div id="paneldiv" class="olControlNavToolbar"></div>
<div style="margin-left:50px;">zoom: <span id="zoom"></span></div>
<div style="margin-left:50px;"><a href="#" onclick="nav.enableZoomWheel();return false">Turn on Wheel Zoom</a> | <a href="#" onclick="nav.disableZoomWheel(); return false;">Turn off Wheel Zoom</a></div>
---



Layer Switcher が地図の下に配置されるので注意してください。
地図内に配置される用に元に戻しておきます。

OpenLayers 15e スクロールボタンでズーム

Navigation Control(navigation-control.html)を参考に、マウスのスクロールボタンでズーム操作ができるようにします。
地図表示部分に、zoomWheelEnabled を次のように追加します。

---
map.addLayers([layer1, layer3, layer4, layer5, layer6, layer7, layer8]);
var panel = new OpenLayers.Control.NavToolbar({'div':OpenLayers.Util.getElement('paneldiv')});
map.addControl(panel);
map.zoomToMaxExtent();
map.setOptions({restrictedExtent: extent});
var click = new OpenLayers.Control.Click();
map.addControl(click);
click.activate();
map.events.register("moveend", null, displayZoom);
map.fractionalZoom = input.checked;
map.zoomTo(Math.round(map.zoom));

nav = new OpenLayers.Control.Navigation({'zoomWheelEnabled': false}); //追加
map.addControl(nav); //追加

}
function displayZoom() {
document.getElementById("zoom").innerHTML = map.zoom.toFixed(4);
}
</script>
---

<body> タグ内に次のように <div> タグを追加し、機能の on, off を追加します。

---
<div id="map"></div>
<div id="paneldiv" class="olControlNavToolbar"></div>
<div style="margin-left:50px;">zoom: <span id="zoom"></span></div>
<!-- ここを追加 on, offの表示-->
<div style="margin-left:50px;"><a href="#" onclick="nav.enableZoomWheel();return false">Turn on Wheel Zoom</a> | <a href="#" onclick="nav.disableZoomWheel(); return false;">Turn off Wheel Zoom</a></div>
---

OpenLayers 15d 任意のズームレベルで表示

Fractional Zoom Example(fractional-zoom.html)を参考に、任意のズームレベルで表示できるようにします。
OpenLayers.Control.PanZoom() を OpenLayers.Control.PanZoomBar() にします。

---
<script type="text/javascript">
var map = null;
var layer1, layer3, layer4, layer5, layer6, layer7, layer8;
var extent = new OpenLayers.Bounds(-31337.715508,-77650.134635,-21796.513842,-70055.061952);
function init(){
OpenLayers.ProxyHost="/cgi-bin/proxy.cgi?url=";
map = new OpenLayers.Map('map', {
controls: [new OpenLayers.Control.PanZoomBar()], //修正
numZoomLevels: 10, //追加 ズーム間隔
maxResolution: 'auto',
units: 'meters',
maxExtent: extent
}
---

地図の表示部分のスクリプトに map.events.register と function displayZoom() を次のように追加します。

---
map.addLayers([layer1, layer3, layer4, layer5, layer6, layer7, layer8]);
var panel = new OpenLayers.Control.NavToolbar({'div':OpenLayers.Util.getElement('paneldiv')});
map.addControl(panel);
map.zoomToMaxExtent();
map.setOptions({restrictedExtent: extent});
var click = new OpenLayers.Control.Click();
map.addControl(click);
click.activate();

map.events.register("moveend", null, displayZoom); //追加 倍率の表示
}

//ここから追加 倍率の表示
function displayZoom() {
document.getElementById("zoom").innerHTML = map.zoom.toFixed(4);
}
//ここまで
</script>
---

<body> タグ内に次のように <div> タグを追加します。

---
<div id="map"></div>
<div id="paneldiv" class="olControlNavToolbar"></div>
<!-- ここを追加 倍率の表示-->
<div style="margin-left:50px;">zoom: <span id="zoom"></span></div>
---

スライダの間につまみを持っていっても、自動的に区切りに合うようになっています。



地図の表示部分のスクリプトに map.fractionalZoom と map.zoomTo を次のように追加します。

---
map.addLayers([layer1, layer3, layer4, layer5, layer6, layer7, layer8]);
var panel = new OpenLayers.Control.NavToolbar({'div':OpenLayers.Util.getElement('paneldiv')});
map.addControl(panel);
map.zoomToMaxExtent();
map.setOptions({restrictedExtent: extent});
var click = new OpenLayers.Control.Click();
map.addControl(click);
click.activate();
map.events.register("moveend", null, displayZoom);

map.fractionalZoom = input.checked; //追加
map.zoomTo(Math.round(map.zoom)); //追加

}
function displayZoom() {
document.getElementById("zoom").innerHTML = map.zoom.toFixed(4);
}
</script>
---

スライダの間につまみを持っていくと、区切りに関係なく任意の倍率になっています。

OpenLayers 15c アニメーションでパン

map.panT Exsample(animated_panning.html)を参考にクリックした位置が中央になるように、地図がアニメーションして移動するようにします。
この動作のためのスクリプトを追加します。

---
<script type="text/javascript">
var map = null;
var layer1, layer3, layer4, layer5, layer6, layer7, layer8;

var running = false; //追加

var extent = new OpenLayers.Bounds(-31337.715508,-77650.134635,-21796.513842,-70055.061952);
//ここから追加
OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
defaultHandlerOptions: {
'single': true,
'delay': 200
},

initialize: function(options) {
this.handlerOptions = OpenLayers.Util.extend(
{}, this.defaultHandlerOptions
);
OpenLayers.Control.prototype.initialize.apply(
this, arguments
);
this.handler = new OpenLayers.Handler.Click(
this, {
'click': this.onClick
}, this.handlerOptions
);
},

onClick: function(evt) {
map.panTo(map.getLonLatFromPixel(evt.xy));
}

});
//ここまで
---

地図の表示部分のスクリプトに次のように追加します。

---
map.addLayers([layer1, layer3, layer4, layer5, layer6, layer7, layer8]);
var panel = new OpenLayers.Control.NavToolbar({'div':OpenLayers.Util.getElement('paneldiv')});
map.addControl(panel);
map.zoomToMaxExtent();
map.setOptions({restrictedExtent: extent});

var click = new OpenLayers.Control.Click(); //追加
map.addControl(click); //追加
click.activate(); //追加
}
</script>
---


*map.setOptions({restrictedExtent: extent});で地図が範囲外に移動しないので、地図を拡大して試してください。
*Overview はうまく表示しなかったので、map.addControl(new OpenLayers.Control.OverviewMap());は削除しました。



OpenLayers 15b パンしたときに範囲を外れない

OpenLayers Restricted Extent Example(restricted-extent.html)を参考に地図をパンしたときに範囲を外れないようにしてみます。
次のように extent を定義して、関連するスクリプトを修正します。

---
<script type="text/javascript">
var map = null;
var layer1, layer3, layer4, layer5, layer6, layer7, layer8;
var extent = new OpenLayers.Bounds(-31337.715508,-77650.134635,-21796.513842,-70055.061952); //追加
function init(){
OpenLayers.ProxyHost="/cgi-bin/proxy.cgi?url=";
map = new OpenLayers.Map('map', {
controls: [new OpenLayers.Control.PanZoom()],
maxResolution: 'auto',
units: 'meters',
maxExtent: extent //修正
}
---

地図の表示部分のスクリプトに次のように追加します。

---
map.addLayers([layer1, layer3, layer4, layer5, layer6, layer7, layer8]);
var panel = new OpenLayers.Control.NavToolbar({'div':OpenLayers.Util.getElement('paneldiv')});
map.addControl(panel);
map.zoomToMaxExtent();
map.setOptions({restrictedExtent: extent}); //追加
}
</script>
---

*チェックボックスで動作を on,off させるスクリプトがうまく動かなかったので、この方法に替えました。
*map.setOptions({restrictedExtent: extent});で地図が範囲外に移動しないので、地図を拡大して試してください。

OpenLayers 15a パンとズームパネルのカスタマイズ

NavToolbar Demo(navtoolbar.html) を参考にしてパンとズームパネルの表示をします。
OpenLayers14 に続いて次のように追加します。

---
map.addLayers([layer1, layer3, layer4, layer5, layer6, layer7, layer8]);
var panel = new OpenLayers.Control.NavToolbar(); //追加
map.addControl(panel); //追加
map.zoomToMaxExtent();
}
</script>
---

地図上にパンとズームパネルが表示されます。
それぞれをクリックした後にポインタを地図上に持っていくと、ポインタの形が変わってパンやズームの操作ができます。



Navigation Toolbar: Outside the Map(navtoolbar-outsidemap.html)を参考にしてパネルを地図の外に配置します。
OpenLayers14 に続いて "var panel = ..." の OpenLayers.Control.NavToolbar の引数を次のように修正します。

---
var panel = new OpenLayers.Control.NavToolbar({'div':OpenLayers.Util.getElement('paneldiv')});
---

<body> タグ内に次のように <div> タグを追加します。

---
<div id="map"></div>
<!-- ここを追加 -->
<div id="paneldiv" class="olControlNavToolbar"></div>
---

地図の外ににパンとズームパネルが表示されます。



パネルが地図から離れたところに表示されます。
theme/default/style.css の設定で .olControlNavToolbar の top: 300px; を top: 10px; にするとパネルが近づきます。

---
.olControlNavToolbar div {
display:block;
width: 28px;
height: 28px;
top: 10px; /* 修正 */
left: 6px;
position: relative;
}
---


OpenLayers 14 マップコントロール(Map Control)

パンやズームなどを操作するアイコンをマップコントロール(Map Control)というみたいです。

featur_style_unique.html の map.addControl をコメントアウトしてみます。

---
map.addLayers([layer1, layer3, layer4, layer5, layer6, layer7, layer8]);
// map.addControl(new OpenLayers.Control.LayerSwitcher());
map.zoomToMaxExtent();
}
⁢/script>
---

地図を表示すると、レイヤスイッチャー(Layer Switcher)が消えて、パン(Pan)とズーム(Zoom)が表示されています。



初期設定(デフォルト)では、パン(Pan)とズーム(Zoom)のみが表示されるようになっているようです。

map に "control: []" を次のように追加します。

---
⁢script type="text/javascript"gt;
var map, layer1, layer3, layer4, layer5, layer6, layer7, layer8;
function init(){
OpenLayers.ProxyHost="/cgi-bin/proxy.cgi?url=";
map = new OpenLayers.Map('map', {
controls: [], //追加
maxResolution: 'auto',
---
map.addLayers([layer1, layer3, layer4, layer5, layer6, layer7, layer8]);
// map.addControl(new OpenLayers.Control.LayerSwitcher());
map.zoomToMaxExtent();
}
⁢/scriptgt;
---

パン(Pan)とズーム(Zoom)が消えます。



map の "control: []" を"controls: [new OpenLayers.Control.PanZoom()]"のように修正するとパン(Pan)とズーム(Zoom)が表示されます。

---
⁢script type="text/javascript"gt;
var map, layer1, layer3, layer4, layer5, layer6, layer7, layer8;
function init(){
OpenLayers.ProxyHost="/cgi-bin/proxy.cgi?url=";
map = new OpenLayers.Map('map', {
controls: [new OpenLayers.Control.PanZoom()], //修正
maxResolution: 'auto',
---

マップコントロールの表示にはこのように2つの方法があるようです。
(OpenLayers.Map で設定する方法と map.addControl で設定する方法)

2008年10月6日月曜日

OpenLayers 13 Feature Style 地図記号を表示

無料で使えるEPSフリー素材集【EPSフリー素材.jp】
http://freesozai.jp/

から学校関係の地図記号をmapsignという名前のフォルダを作ってそこにダウンロードしました。
mkg_013から017の低解像度を選びました。

Eclipseで地図記号を次のようにインポートします。
0 プロジェクトウィンドウのOpenLayersprojを右クリックして「新規」-「フォルダ」をクリックします。
「フォルダー」画面で「フォルダー名」を「mapsign」と入力し「終了」ボタンをクリックします。
1 プロジェクトウィンドウのOpenLayersprojを右クリックしてインポートをクリックします。
2 「選択」画面で「一般」-「ファイル・システム」を選んで「次へ」ボタンをクリックします。
3 「ファイル・システム」画面の「次のディレクトリから」欄右側の「参照」ボタンをクリックします。
4 (私の場合は)デスクトップのmapsignフォルダを選んで「OK」ボタンをクリックします。
5 「すべて選択ボタン」をクリックします。
6 「宛て先フォルダー」欄右側の「参照」ボタンをクリックします。
7 「OpenLayersproj」-「mapsign」を選んで「OK」ボタンをクリックします。
8 「選択」画面で「終了」ボタンをクリックします。

feature_style_unique.html を参考に地図を作成します。
0 feature_style_unique.html をダブルクリックして開きます。
1 プロジェクトビューのOpenLayersprojフォルダを右クリックして、新規->HTMLファイルをクリックします。
2 HTMLファイルウィンドウでファイル名をfeature_style_mapsign.htmlと入力し、終了ボタンをクリックします。
3 エディタのタブをエディタビュー内の下へドラッグすると2段になってみやすくなります。
4 charsetをUTF-8にして、<title>をFeature Style Map Signにします。
5 feature_style_basic.htmlの内容をコピーしてfeature_style_mapsign.html ファイルに貼り付け修正します。

6 kanagawa_mlit_pgis_school.map の elementary_school レイヤように次のように修正します。

---
var style_markRed = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
style_markRed.graphicWidth = 15; //画像の幅
style_markRed.graphicHeight = 15; //画像の高さ
style_markRed.graphicOpacity = 1; //画像の透明度
style_markRed.graphicXOffset = -(style_markRed.graphicWidth/2);
//画像を横方向に画像幅の半分ずらす
style_markRed.graphicYOffset = -style_markRed.graphicHeight;
//画像を縦方向に画像高さ分のずらす
style_markRed.externalGraphic = "./mapsign/junior_school.png"; //画像のパス

7他のレイヤも同様に追加します。

LAYER NAME extarnalGraphic
juniorhigh_school ./mapsign/junior_school.png
high_school ./mapsign/high_school.png
technical_college ./mapsign/tec_college.png
college ./mapsign/2college.png
university ./mapsign/university.png

technical_college、college、universityは、画像の幅と高さを "25" にすると見やすくなります。

8 Webブラウザを起動して、アドレスバーに次のように入力します。

http://localhost/openlayers/OpenLayersproj/feature_style_mapsign.html

2008年10月1日水曜日

OpenLayers 12c Feature Style Markerで表示 HTMLファイル


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Feature Style Unique</title>
<link rel="stylesheet" href="theme/default/style.css" type="text/css" />
<style type="text/css">
#map {
width: 512px;
height: 512px;
border: 1px solid black;
}
</style>
<script src="lib/OpenLayers.js"></script>
<script type="text/javascript">
var map, layer1, layer3, layer4, layer5, layer6, layer7, layer8;
//layer2, layer9, layer10
function init(){
OpenLayers.ProxyHost="/cgi-bin/proxy.cgi?url=";
map = new OpenLayers.Map('map', {
maxResolution: 'auto',
// displayProjection: new OpenLayers.Projection("EPSG:2451"),
units: 'meters',
maxExtent: new OpenLayers.Bounds(-31337.715508,-77650.134635,-21796.513842,-70055.061952)
// maxExtent: new OpenLayers.Bounds(-83624.557161,-96269.254733,-3366.679476,-36305.074927)
}
);
layer1 = new OpenLayers.Layer.WMS( "Kamakura Chojikai Sen WMS",
"http://localhost/cgi-bin/mapserv?",
{
map: '/home/nob61/mapfile/kamakura_pgis.map',
layers: 'chojisen,kenchiku,doro,tetsudo',
// transparent: true,
format: 'image/png'
},
{
projection: 'EPSG:2451'
}
);

/* layer2 = new OpenLayers.Layer.WMS( "Kanagawa Gyosei Kukaku Sen WMS",
"http://localhost/cgi-bin/mapserv?",
{
map: '/home/nob61/mapfile/kanagawa_pgis.map',
layers: 'kukaku',
format: 'image/png'
},
{
projection: 'EPSG:2451'
}
);
*/
var style_markRed = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
//Markerのプロパティ
style_markRed.graphicWidth = 15; //画像の幅
style_markRed.graphicHeight = 15; //画像の高さ
style_markRed.graphicXOffset = -(style_markRed.graphicWidth/2); //画像を横方向に画像幅の半分ずらす
style_markRed.graphicYOffset = -style_markRed.graphicHeight; //画像を縦方向に画像高さ分のずらす
style_markRed.externalGraphic = "./img/marker.png"; //画像のパス
layer3 = new OpenLayers.Layer.WFS( "Kanagawa mlit WFS Elementary School",
"http://localhost/cgi-bin/mapserv?",
{
map: '/home/nob61/mapfile/kanagawa_mlit_pgis_school.map',
typename: 'elementary_school'
},
{
style: style_markRed,
visibility: false,
projection: 'EPSG:4612'
}
);

var style_markBlue = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
//Markerのプロパティ
style_markBlue.graphicWidth = 15;
style_markBlue.graphicHeight = 15;
style_markBlue.graphicXOffset = -(style_markBlue.graphicWidth/2);
style_markBlue.graphicYOffset = -style_markBlue.graphicHeight;
style_markBlue.externalGraphic = "./img/marker-blue.png";
layer4 = new OpenLayers.Layer.WFS( "Kanagawa mlit WFS Junior High School",
"http://localhost/cgi-bin/mapserv?",
{
map: '/home/nob61/mapfile/kanagawa_mlit_pgis_school.map',
typename: 'juniorhigh_school'
},
{
style: style_markBlue,
visibility: false,
projection: 'EPSG:4612'
}
);

var style_markGold = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
//Markerのプロパティ
style_markGold.graphicWidth = 15;
style_markGold.graphicHeight = 15;
style_markGold.graphicXOffset = -(style_markGold.graphicWidth/2);
style_markGold.graphicYOffset = -style_markGold.graphicHeight;
style_markGold.externalGraphic = "./img/marker-gold.png";
layer5 = new OpenLayers.Layer.WFS( "Kanagawa mlit WFS High School",
"http://localhost/cgi-bin/mapserv?",
{
map: '/home/nob61/mapfile/kanagawa_mlit_pgis_school.map',
typename: 'high_school'
},
{
style: style_markGold,
visibility: false,
projection: 'EPSG:4612'
}
);

var style_lightsyan = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
//Pointのプロパティ
style_lightsyan.fillColor = "#99ffff";
style_lightsyan.strokeColor = "#33ffff";
style_lightsyan.fillOpacity = 0.2;
style_lightsyan.graphicOpacity = 1;
style_lightsyan.pointRadius = 3;
layer6 = new OpenLayers.Layer.WFS( "Kanagawa mlit WFS Technical College",
"http://localhost/cgi-bin/mapserv?",
{
map: '/home/nob61/mapfile/kanagawa_mlit_pgis_school.map',
typename: 'technical_college'
},
{
style: style_lightsyan,
visibility: false,
projection: 'EPSG:4612'
}
);

var style_lightmagenta = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
//Pointのプロパティ
style_lightmagenta.fillColor = "#ff99ff";
style_lightmagenta.strokeColor = "#ff33ff";
style_lightmagenta.fillOpacity = 0.2;
style_lightmagenta.graphicOpacity = 1;
style_lightmagenta.pointRadius = 3;
layer7 = new OpenLayers.Layer.WFS( "Kanagawa mlit WFS College",
"http://localhost/cgi-bin/mapserv?",
{
map: '/home/nob61/mapfile/kanagawa_mlit_pgis_school.map',
typename: 'college'
},
{
style: style_lightmagenta,
visibility: false,
projection: 'EPSG:4612'
}
);

var style_markGreen = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
//Markerのプロパティ
style_markGreen.graphicWidth = 15;
style_markGreen.graphicHeight = 15;
style_markGreen.graphicXOffset = -(style_markGreen.graphicWidth/2);
style_markGreen.graphicYOffset = -style_markGreen.graphicHeight;
style_markGreen.externalGraphic = "./img/marker-green.png";
layer8 = new OpenLayers.Layer.WFS( "Kanagawa mlit WFS University",
"http://localhost/cgi-bin/mapserv?",
{
map: '/home/nob61/mapfile/kanagawa_mlit_pgis_school.map',
typename: 'university'
},
{
style: style_markGreen,
visibility: false,
projection: 'EPSG:4612'
}
);

map.addLayers([layer1, layer3, layer4, layer5, layer6, layer7, layer8]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.zoomToMaxExtent();
}
</script>
</head>
<body onload="init()">
<h1 id="title">Feature Style Unique</h1>

<div id="map"></div>
</body>
</html>

OpenLayers 12b Feature Style Markerで表示 マップファイル


MAP
NAME kanagawa_mlit_pgis_school_map
STATUS ON
SIZE 600 300
EXTENT 138.91 35.12 139.84 35.68
# EXTENT -83624.557161 -96269.254733 -3366.679476 -36305.074927
UNITS dd
IMAGECOLOR 255 255 255
IMAGETYPE png
FONTSET "fonts.txt"
PROJECTION
"init=epsg:4612"
# "init=epsg:2451"
END

WEB
IMAGEPATH "/home/user/ka-map/htdocs/tmp/kacache/"
IMAGEURL "/ka-map/tmp/kacache/"
METADATA
"wms_title" "Kamakura mlit School Map WMS Server"
"wms_srs" "EPSG:2451 EPSG:4612"
"wms_onlineresource" "http://localhost/cgi-bin/mapserv?map=/home/user/mapfile/kanagawa_mlit_pgis_school.map"
"wms_encoding" "utf-8"
"wms_feature_info_mime_type" "text/html"
"wfs_title" "Kamakura mlit School Map WFS Server"
"wfs_srs" "EPSG:2451 EPSG:4612"
"wfs_onlineresource" "http://localhost/cgi-bin/mapserv?map=/home/user/mapfile/kanagawa_mlit_pgis_school.map"
"wfs_encoding" "utf-8"
"wfs_feature_info_mime_type" "text/html"
END
END

LEGEND
TRANSPARENT TRUE
LABEL
TYPE TRUETYPE
FONT vl-gothic
COLOR 0 0 0
ENCODING UTF-8
SIZE 10
OFFSET 0 -4
END
END

SCALEBAR
TRANSPARENT TRUE
END

SYMBOL
NAME 'circle'
TYPE ELLIPSE
FILLED TRUE
POINTS
1 1
END
END


LAYER
NAME gyoseikai
GROUP gyoseikai
TYPE POLYGON
STATUS ON
DUMP TRUE
# DATA "../mapdata/kanagawa_mlit/N03-071001_14_EC01.shp"
CONNECTIONTYPE POSTGIS
CONNECTION "dbname=kanagawa_mlit host=localhost user=user password=password"
DATA "the_geom from gyoseikai"
# MINSCALE 1000
# MAXSCALE 1000000000
LABELITEM "cn2"
METADATA
"group_title" "行政界"
"wms_title" "Kanagawa mlit Map WMS Gyoseikai Layer"
# "layer_encoding" "SJIS"
"searchfield" "cn2"
"fields" "con:郡政令,cn2:市区町村"
END
CLASS
NAME "行政界"
# NAME "City Boundaries"
STYLE
OUTLINECOLOR 153 153 153
END
LABEL
MINFEATURESIZE 40
TYPE TRUETYPE
FONT vl-gothic
ENCODING UTF-8
SIZE 8
END
END
PROJECTION
"init=epsg:4612"
END
TEMPLATE temp_tokyo_shp.html
END

LAYER
NAME gun_seirei
GROUP gun_seirei
TYPE ANNOTATION
STATUS ON
# DATA "../mapdata/kanagawa_mlit/N03-071001_14_EC01.shp"
CONNECTIONTYPE POSTGIS
CONNECTION "dbname=kanagawa_mlit host=localhost user=user password=password"
DATA "the_geom from gyoseikai"
LABELITEM "con"
METADATA
"group_title" "郡政令"
# "layer_encoding" "SJIS"
"queryable" "true"
"searchfield" "con"
"fields" "con:郡政令,cn2:市区町村"
END
CLASS
NAME "郡政令"
LABEL
MINFEATURESIZE 40
TYPE TRUETYPE
FONT vl-gothic
ENCODING UTF-8
SIZE 8
POSITION uc
END
END
PROJECTION
"init=epsg:4612"
END
TEMPLATE temp_tokyo_shp.html
END

LAYER
NAME railroad
GROUP railroad
TYPE line
STATUS ON
DUMP TRUE
# DATA "../mapdata/railroad_mlit/N02-07_EB02.shp"
CONNECTIONTYPE POSTGIS
CONNECTION "dbname=kanagawa_mlit host=localhost user=user password=password"
DATA "the_geom from railroad1"
# MINSCALE 1000
# MAXSCALE 1000000000
LABELITEM "lin"
METADATA
"group_title" "鉄道"
"wms_title" "Railroad Map WMS Layer"
"wms_srs" "EPSG:4612"
"wfs_title" "Railroad Map WFS Layer"
"wfs_srs" "EPSG:4612"
# "layer_encoding" "SJIS"
"searchfield" "lin"
"fields" "lin:鉄道,opc:会社"
END
CLASS
NAME "鉄道"
STYLE
COLOR 102 204 204
END
LABEL
MINFEATURESIZE 40
TYPE TRUETYPE
FONT vl-gothic
ENCODING UTF-8
SIZE 8
POSITION uc
END
END
PROJECTION
"init=epsg:4612"
END
TEMPLATE temp_railroad.html
END

LAYER
NAME elementary_school
GROUP elementary_school
TYPE POINT
STATUS ON
DUMP TRUE
CONNECTIONTYPE POSTGIS
CONNECTION "dbname=kanagawa_mlit host=localhost user=user password=password"
DATA "the_geom from (select * from publicfacilities where pci = '16001' and aac = '14204') as kanagawaquery using unique gid using srid = -1"
# MINSCALE 1000
# MAXSCALE 1000000000
# MAXSCALEDENOM 100000
LABELITEM "na0"
METADATA
"group_title" "小学校"
"wfs_title" "PF Elementary School Kanagawa mlit WFS Layer"
"wfs_srs" "EPSG:4612"
"gml_featureid" "gid"
"gml_include_items" "all"
"gml_exclude_items" ""
"searchfield" "na0"
"fields" "na0:小学校,ads:住所"
END
CLASS
NAME "小学校"
STYLE
SYMBOL 'circle'
COLOR 153 255 153
SIZE 5
END
LABEL
MINFEATURESIZE 40
TYPE TRUETYPE
FONT vl-gothic
ENCODING UTF-8
SIZE 8
POSITION uc
END
END
PROJECTION
"init=epsg:4612"
END
TEMPLATE temp_facilities_pgis.html
END

LAYER
NAME juniorhigh_school
GROUP juniorhigh_school
TYPE POINT
STATUS ON
DUMP TRUE
CONNECTIONTYPE POSTGIS
CONNECTION "dbname=kanagawa_mlit host=localhost user=user password=password"
DATA "the_geom from (select * from publicfacilities where (pci = '16002' or pci = '16203') and aac = '14204') as kanagawaquery using unique gid using srid = -1"
# MINSCALE 1000
# MAXSCALE 1000000000
# MAXSCALEDENOM 100000
LABELITEM "na0"
METADATA
"group_title" "中学校"
"wfs_title" "PF Junior High School Kanagawa mlit WFS Layer"
"wfs_srs" "EPSG:4612"
"gml_featureid" "gid"
"gml_include_items" "all"
"gml_exclude_items" ""
"searchfield" "na0"
"fields" "na0:中学校,ads:住所"
END
CLASS
NAME "中学校"
STYLE
SYMBOL 'circle'
COLOR 153 153 255
SIZE 5
END
LABEL
MINFEATURESIZE 40
TYPE TRUETYPE
FONT vl-gothic
ENCODING UTF-8
SIZE 8
POSITION uc
END
END
PROJECTION
"init=epsg:4612"
END
TEMPLATE temp_facilities_pgis.html
END

LAYER
NAME high_school
GROUP high_school
TYPE POINT
STATUS ON
DUMP TRUE
CONNECTIONTYPE POSTGIS
CONNECTION "dbname=kanagawa_mlit host=localhost user=user password=password"
DATA "the_geom from (select * from publicfacilities where pci = '16004' and aac = '14204') as kanagawaquery using unique gid using srid = -1"
# MINSCALE 1000
# MAXSCALE 1000000000
# MAXSCALEDENOM 100000
LABELITEM "na0"
METADATA
"group_title" "高等学校"
"wfs_title" "PF High School Kanagawa mlit WFS Layer"
"wfs_srs" "EPSG:4612"
"gml_featureid" "gid"
"gml_include_items" "all"
"gml_exclude_items" ""
"searchfield" "na0"
"fields" "na0:高等学校,ads:住所"
END
CLASS
NAME "高等学校"
STYLE
SYMBOL 'circle'
COLOR 255 153 153
SIZE 5
END
LABEL
MINFEATURESIZE 40
TYPE TRUETYPE
FONT vl-gothic
ENCODING UTF-8
SIZE 8
POSITION uc
END
END
PROJECTION
"init=epsg:4612"
END
TEMPLATE temp_facilities_pgis.html
END

LAYER
NAME technical_college
GROUP technical_college
TYPE POINT
STATUS ON
DUMP TRUE
CONNECTIONTYPE POSTGIS
CONNECTION "dbname=kanagawa_mlit host=localhost user=user password=password"
DATA "the_geom from (select * from publicfacilities where pca = '16005' and aac = '14204') as kanagawaquery using unique gid using srid = -1"
# MINSCALE 1000
# MAXSCALE 1000000000
# MAXSCALEDENOM 100000
LABELITEM "na0"
METADATA
"group_title" "高等専門学校"
"wfs_title" "PF Technical College Kanagawa mlit WFS Layer"
"wfs_srs" "EPSG:4612"
"gml_featureid" "gid"
"gml_include_items" "all"
"gml_exclude_items" ""
"searchfield" "na0"
"fields" "na0:高等専門学校,ads:住所"
END
CLASS
NAME "高等専門学校"
STYLE
SYMBOL 'circle'
COLOR 151 255 255
SIZE 5
END
LABEL
MINFEATURESIZE 40
TYPE TRUETYPE
FONT vl-gothic
ENCODING UTF-8
SIZE 8
POSITION uc
END
END
PROJECTION
"init=epsg:4612"
END
TEMPLATE temp_facilities_pgis.html
END

LAYER
NAME college
GROUP college
TYPE POINT
STATUS ON
DUMP TRUE
CONNECTIONTYPE POSTGIS
CONNECTION "dbname=kanagawa_mlit host=localhost user=user password=password"
DATA "the_geom from (select * from publicfacilities where pci = '16006' and aac = '14204') as kanagawaquery using unique gid using srid = -1"
# MINSCALE 1000
# MAXSCALE 1000000000
# MAXSCALEDENOM 100000
LABELITEM "na0"
METADATA
"group_title" "短期大学"
"wfs_title" "PF College Kanagawa mlit WFS Layer"
"wfs_srs" "EPSG:4612"
"gml_featureid" "gid"
"gml_include_items" "all"
"gml_exclude_items" ""
# "layer_encoding" "SJIS"
"searchfield" "na0"
"fields" "na0:短期大学,ads:住所"
END
CLASS
NAME "短期大学"
STYLE
SYMBOL 'circle'
COLOR 255 153 255
SIZE 5
END
LABEL
MINFEATURESIZE 40
TYPE TRUETYPE
FONT vl-gothic
ENCODING UTF-8
SIZE 8
POSITION uc
END
END
PROJECTION
"init=epsg:4612"
END
TEMPLATE temp_facilities_pgis.html
END

LAYER
NAME university
GROUP university
TYPE POINT
STATUS ON
DUMP TRUE
CONNECTIONTYPE POSTGIS
CONNECTION "dbname=kanagawa_mlit host=localhost user=user password=password"
DATA "the_geom from (select * from publicfacilities where pci = '16007' and aac = '14204') as kanagawaquery using unique gid using srid = -1"
# MINSCALE 1000
# MAXSCALE 1000000000
# MAXSCALEDENOM 100000
LABELITEM "na0"
METADATA
"group_title" "大学"
"wfs_title" "PF University Kanagawa mlit WFS Layer"
"wfs_srs" "EPSG:4612"
"gml_featureid" "gid"
"gml_include_items" "na0,the_geom"
"gml_exclude_items" ""
"searchfield" "na0"
"fields" "na0:大学,ads:住所"
END
CLASS
NAME "大学"
STYLE
SYMBOL 'circle'
COLOR 51 255 51
SIZE 5
END
LABEL
MINFEATURESIZE 40
TYPE TRUETYPE
FONT vl-gothic
ENCODING UTF-8
SIZE 8
POSITION uc
END
END
PROJECTION
"init=epsg:4612"
END
TEMPLATE temp_facilities_pgis.html
END

END #MAP END

OpenLayers 12a Feature Style Markerで表示

公共施設のデータを使って、Point表示をMarkerに変更します。

国土数値情報の公共施設の説明から、小分類コードしたがって学校に関するデータをレイヤ別に表示します。

公共施設小分類コード 〈ファイル名称:PubFacMiclassCd〉
コード 対応する内容
16001 小学校
16002 中学校
16003 中等教育学校
16004 高等学校
16005 高等専門学校
16006 短期大学
16007 大学
16008 盲学校
16009 ろう学校
16010 養護学校
16011 幼稚園

kanagawa_mlit_pgis_pf.map の学校(school)レイヤを変更します。

1 kanagawa_mlit_pgis_pf.map をコピーしてファイル名を kanagawa_mlit_pgis_school.map にします。

user@debian:~/mapfile$ cp kanagawa_mlit_pgis_pf.map kanagawa_mlit_pgis_school.map

2 学校(school)レイヤを除いた次のレイヤを削除します。
building
national_office
local_office
police
fire_station
hospital
post

3 学校(school)レイヤを次のように変更します。

---
LAYER
NAME elementary_school
GROUP elementary_school
TYPE POINT
STATUS ON
DUMP TRUE
CONNECTIONTYPE POSTGIS
CONNECTION "dbname=kanagawa_mlit host=localhost user=user password=password"
DATA "the_geom from (select * from publicfacilities where pci = '16001' and aac = '14204') as kanagawaquery using unique gid using srid = -1" #1
# MINSCALE 1000
# MAXSCALE 1000000000
# MAXSCALEDENOM 100000
LABELITEM "na0"
METADATA
"wfs_title" "PF Elementary School Kanagawa mlit WFS Layer" #2
"wfs_srs" "EPSG:4612"
"gml_featureid" "gid"
"gml_include_items" "all"
"gml_exclude_items" ""
"group_title" "小学校"
"searchfield" "na0"
"fields" "na0:小学校,ads:住所"
END
CLASS
NAME "小学校"
---

#1 SQLクエリを使用して「鎌倉市」の「小学校」のデータを抽出します。

select * from publicfacilities where pci = '16001' and acc = '14204'
サブクエリで select文で publicfacilitiesテーブルのうち、pci列が16001でaac列が14204のデータの要素をすべて抽出します。

#2 WFS の設定。
"wfs_title" "PF Elementary School Kanagawa mlit WFS Layer"

各レイヤの相違部分
LAYER NAME GROUP pci wfs_title
erementary_school 16001 PF Elementary School Kanagawa mlit WFS Layer
juniorhigh_school 16002 PF Junior High School Kanagawa mlit WFS Layer
juniorhigh_school 16003 PF Junior High School Kanagawa mlit WFS Layer
where (pci = '16002' or pci = '16003') and aac = '14204'
high_school 16004 PF High School Kanagawa mlit WFS Layer
technical_college 16005 PF Technical College Kanagawa mlit WFS Layer
college 16006 PF College Kanagawa mlit WFS Layer
university 16007 PF University Kanagawa mlit WFS Layer


feature_style_basic.html を参考に地図を作成します。
0 feature_style_basic.html をダブルクリックして開きます。
1 プロジェクトビューのOpenLayersprojフォルダを右クリックして、新規->HTMLファイルをクリックします。
2 HTMLファイルウィンドウでファイル名をfeature_style_unique.htmlと入力し、終了ボタンをクリックします。
3 エディタのタブをエディタビュー内の下へドラッグすると2段になってみやすくなります。
4 charsetをUTF-8にして、<title>をFeature Style Uniqueにします。
5 feature_style_basic.htmlの内容をコピーしてfeature_style_unique.html ファイルに貼り付け修正します。
#1 表示レイヤの定義を修正します。
#2 範囲を鎌倉市に合わせて変更します。
#3 layer1 の鎌倉市の丁字界線はコメントアウトははずします。
#3 layer2 の神奈川県の行政区画線はコメントアウトします。

---
<title>Feature Style Unique</title>
<link rel="stylesheet" href="theme/default/style.css" type="text/css" />
<style type="text/css">
#map {
width: 512px;
height: 512px;
border: 1px solid black;
}
</style>
<script src="lib/OpenLayers.js"></script>
<script type="text/javascript">
// #1表示レイヤの定義を修正
var map, layer1, layer3, layer4, layer5, layer6, layer7, layer8;

function init(){
OpenLayers.ProxyHost="/cgi-bin/proxy.cgi?url=";
map = new OpenLayers.Map('map', {
maxResolution: 'auto',
units: 'meters',
// #2 範囲を鎌倉市に合わせて変更
maxExtent: new OpenLayers.Bounds(-31337.715508,-77650.134635,-21796.513842,-70055.061952)
}
);
// #3 layer1 の鎌倉市の丁字界線はコメントアウトははずします。
// layer2 の神奈川県の行政区画線はコメントアウトします。
layer1 = new OpenLayers.Layer.WMS( "Kamakura Chojikai Sen WMS",
"http://localhost/cgi-bin/mapserv?",
{
map: '/home/nob61/mapfile/kamakura_pgis.map',
layers: 'chojisen',
// transparent: true,
format: 'image/png'
},
{
projection: 'EPSG:2451'
}
);

/* layer2 = new OpenLayers.Layer.WMS( "Kanagawa Gyosei Kukaku Sen WMS",
"http://localhost/cgi-bin/mapserv?",
{
map: '/home/nob61/mapfile/kanagawa_pgis.map',
layers: 'kukaku',
format: 'image/png'
},
{
projection: 'EPSG:2451'
}
);
*/
---

6 kanagawa_mlit_pgis_school.map の elementary_school レイヤように次のように追加します。

---
var style_markRed = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
style_markRed.graphicWidth = 15; //画像の幅
style_markRed.graphicHeight = 15; //画像の高さ
style_markRed.graphicXOffset = -(style_markRed.graphicWidth/2);
//画像を横方向に画像幅の半分ずらす
style_markRed.graphicYOffset = -style_markRed.graphicHeight;
//画像を縦方向に画像高さ分のずらす
style_markRed.externalGraphic = "./img/marker.png"; //画像のパス
layer3 = new OpenLayers.Layer.WFS( "Kanagawa mlit WFS Elementary School",
"http://localhost/cgi-bin/mapserv?",
{
map: '/home/nob61/mapfile/kanagawa_mlit_pgis_school.map',
typename: 'elementary_school'
},
{
style: style_markRed,
visibility: false,
projection: 'EPSG:4612'
}
);
---

7他のレイヤも同様に追加します。

LAYER NAME style extarnalGraphic name
juniorhigh_school style_markRed ./img/marker.png Kanagawa mlit WFS Junior High School
high_school style_markBlue ./img/marker.png Kanagawa mlit WFS High School
university style_markGreen ./img/marker.png Kanagawa mlit WFS University

次のレイヤは円で表示しました。(鎌倉市にはデータがありませんでした。)

LAYER NAME style fillColor strokeColor name
technical_college style_lightsyan #99ffff #33ffff Kanagawa mlit WFS Technical College
college style_lightmagenta #ff99ff #ff33ff Kanagawa mlit WFS College

8 地図表示部分を次のようにします。

---
map.addLayers([layer1, layer3, layer4, layer5, layer6, layer7, layer8]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.zoomToMaxExtent();
}
</script>
</head>
<body onload="init()">
<h1 id="title">Feature Style Unique</h1>

<div id="map"></div>

</body>
</html>

9 Webブラウザを起動して、アドレスバーに次のように入力します。

http://localhost/openlayers/OpenLayersproj/feature_style_unique.html