File "index.html"
Full path: /www/map/mapserver-extensions/OpenLayers-2.10/index.html
File size: 6.42 KiB (6570 bytes)
MIME-type: text/xml
Charset: utf-8
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>OpenLayers Example</title>
<meta http-equiv="imagetoolbar" content="no"> <!--ie image gizmo OFF!-->
<style type="text/css">
#map {
width: 752px;
height: 552px;
border: 1px solid black;
}
h1 {
font-family: Utopia,Arial, Helvetica, sans-serif;
font-size: 28px;
line-height: 32px;
color: #005599;
}
#features {
margin-top: 5px;
font-size: small;
}
table, table td, table th {
border: 1px solid #DDD;
border-collapse: collapse;
margin: 0;
text-align: center;
padding: 1px 3px;
}
table th {
background-color: #EEE;
font-weight: bold;
}
</style>
<script src="./OpenLayers.js"></script>
<script type="text/javascript">
<!--
function init(){
var options = {
'projection':"EPSG:4326",
scales : [3000,100000,50000,25000,12500],
'controls':[],
'minZoomLevel': 1,
'numZoomLevels':5
};
var map = new OpenLayers.Map('map',options);
var landsat = new OpenLayers.Layer.WMS(
"OnEarth",
"http://hyperquad.telascience.org/cgi-bin/onearth", {
layers: "OnEarth"
}, {
isBaseLayer: true,
buffer: 0,
visibility: false,
tileSize: new OpenLayers.Size(512, 512),
opacity: 1.0
}
);
//map.addLayer(landsat);
var host = location.protocol + "//" + location.hostname;
if (location.port != "") {
host += ":" + location.port;
}
var msLayer = new OpenLayers.Layer.WMS(
"WMSレイヤー",
host + "/cgi-bin/mapserv-i18n?map=/www/map/mapserver-extensions/mapfiles/wms.map&",
{layers: ['road'],transparent: true, format: 'image/gif'} ,
{isBaseLayer: true, singleTile: true, opacity:0.7}
);
// document.write(host+ "/cgi-bin/mapserv-i18n?map=../html/mapserver-extensions/mapfiles/wms.map&");
map.addLayer(msLayer);
var styles = new OpenLayers.StyleMap({
"default": new OpenLayers.Style({
strokeColor: "#FF0000",
strokeWidth: 4,
strokeOpacity: 0.5
})
});
highlightLayer = new OpenLayers.Layer.Vector("選択道路", { styleMap: styles });
map.addLayer(highlightLayer);
control = new OpenLayers.Control.GetFeature({
protocol: OpenLayers.Protocol.WFS.fromWMSLayer(msLayer, {
featurePrefix: "ms",
maxFeatures: 3,
formatOptions: {
xy: false
}
}),
single: false
});
control.events.register("featuresselected", this, function(evt){
highlightLayer.destroyFeatures();
showInfo(evt.features);
if (evt.features && evt.features.length > 0) {
highlightLayer.addFeatures(evt.features);
highlightLayer.redraw();
}
});
control.events.register("clickout", this, function(evt){
highlightLayer.destroyFeatures();
showInfo(null);
});
map.addControl(control);
control.activate();
//139.926 36.882 139.999 36.922
//139.727 35.678 139.779 35.708
map.setCenter(new OpenLayers.LonLat(139.727,35.678),2);
map.addControl(new OpenLayers.Control.PanZoomBar());
map.addControl(new OpenLayers.Control.MouseDefaults());
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.MousePosition());
}
var attributes = ["gid", "id", "namae", "joutai", "yuryo", "syubetsu", "kokubango", "fukuin", "hashi", "tonneru", "yukiooi"];
function showInfo(features) {
if (features == null || features.length == 0) {
document.getElementById("attributes").style.display = "none";
document.getElementById("message").style.display = "block";
return;
}
document.getElementById("attributes").style.display = "block";
document.getElementById("message").style.display = "none";
var table = document.getElementById("attributes");
while (table.childNodes.length > 2) {
table.removeChild(table.lastChild);
}
for (var i = 0, len = features.length; i < len; i++) {
var tr = document.createElement("tr");
for (var k = 0; k < attributes.length; k++) {
var td = document.createElement("td");
td.innerHTML = features[i].attributes[attributes[k]];
tr.appendChild(td);
}
table.appendChild(tr);
}
}
// -->
</script>
</head>
<body onload="init()">
<h1>OpenLayers Example</h1>
<center>
<div id="map"></div>
<div id="features">
<p id="message" style="display:none">表示するデータがありません。</p>
<table>
<tbody id="attributes" style="display:none">
<tr>
<th>gid</th>
<th>id</th>
<th>名前</th>
<th>状態</th>
<th>有料</th>
<th>種別</th>
<th>国道番号</th>
<th>幅員</th>
<th>橋</th>
<th>トンネル</th>
<th>雪覆い</th>
</tr>
</tbody>
</table>
</div>
</center>
</body>
</html>