223 lines
7.2 KiB
HTML
223 lines
7.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<title>OpenLayers WMS Feature Info Example (GeoServer)</title>
|
|
<script src="../lib/OpenLayers.js"></script>
|
|
<link rel="stylesheet" href="../theme/default/style.css" type="text/css">
|
|
<link rel="stylesheet" href="style.css" type="text/css">
|
|
<style type="text/css">
|
|
ul, li {
|
|
padding-left: 0px;
|
|
margin-left: 0px;
|
|
list-style: none;
|
|
}
|
|
#info {
|
|
position: absolute;
|
|
top: 6em;
|
|
left: 550px;
|
|
}
|
|
#info table td {
|
|
border:1px solid #ddd;
|
|
border-collapse: collapse;
|
|
margin: 0;
|
|
padding: 0;
|
|
font-size: 90%;
|
|
padding: .2em .1em;
|
|
background:#fff;
|
|
}
|
|
#info table th{
|
|
padding:.2em .2em;
|
|
text-transform: uppercase;
|
|
font-weight: bold;
|
|
background: #eee;
|
|
}
|
|
tr.odd td {
|
|
background:#eee;
|
|
}
|
|
table.featureInfo caption {
|
|
text-align:left;
|
|
font-size:100%;
|
|
font-weight:bold;
|
|
padding:.2em .2em;
|
|
}
|
|
|
|
|
|
</style>
|
|
<script defer="defer" type="text/javascript">
|
|
OpenLayers.ProxyHost = "proxy.cgi?url=";
|
|
|
|
var map, infocontrols, water, highlightlayer;
|
|
|
|
function load() {
|
|
map = new OpenLayers.Map('map', {
|
|
maxExtent: new OpenLayers.Bounds(143.834,-43.648,148.479,-39.573)
|
|
});
|
|
|
|
var political = new OpenLayers.Layer.WMS("State Boundaries",
|
|
"http://demo.opengeo.org/geoserver/wms",
|
|
{'layers': 'topp:tasmania_state_boundaries', transparent: true, format: 'image/gif'},
|
|
{isBaseLayer: true}
|
|
);
|
|
|
|
var roads = new OpenLayers.Layer.WMS("Roads",
|
|
"http://demo.opengeo.org/geoserver/wms",
|
|
{'layers': 'topp:tasmania_roads', transparent: true, format: 'image/gif'},
|
|
{isBaseLayer: false}
|
|
);
|
|
|
|
var cities = new OpenLayers.Layer.WMS("Cities",
|
|
"http://demo.opengeo.org/geoserver/wms",
|
|
{'layers': 'topp:tasmania_cities', transparent: true, format: 'image/gif'},
|
|
{isBaseLayer: false}
|
|
);
|
|
|
|
water = new OpenLayers.Layer.WMS("Bodies of Water",
|
|
"http://demo.opengeo.org/geoserver/wms",
|
|
{'layers': 'topp:tasmania_water_bodies', transparent: true, format: 'image/gif'},
|
|
{isBaseLayer: false}
|
|
);
|
|
|
|
highlightLayer = new OpenLayers.Layer.Vector("Highlighted Features", {
|
|
displayInLayerSwitcher: false,
|
|
isBaseLayer: false
|
|
}
|
|
);
|
|
|
|
infoControls = {
|
|
click: new OpenLayers.Control.WMSGetFeatureInfo({
|
|
url: 'http://demo.opengeo.org/geoserver/wms',
|
|
title: 'Identify features by clicking',
|
|
layers: [water],
|
|
queryVisible: true
|
|
}),
|
|
hover: new OpenLayers.Control.WMSGetFeatureInfo({
|
|
url: 'http://demo.opengeo.org/geoserver/wms',
|
|
title: 'Identify features by clicking',
|
|
layers: [water],
|
|
hover: true,
|
|
// defining a custom format options here
|
|
formatOptions: {
|
|
typeName: 'water_bodies',
|
|
featureNS: 'http://www.openplans.org/topp'
|
|
},
|
|
queryVisible: true
|
|
})
|
|
};
|
|
|
|
map.addLayers([political, roads, cities, water, highlightLayer]);
|
|
for (var i in infoControls) {
|
|
infoControls[i].events.register("getfeatureinfo", this, showInfo);
|
|
map.addControl(infoControls[i]);
|
|
}
|
|
|
|
map.addControl(new OpenLayers.Control.LayerSwitcher());
|
|
|
|
infoControls.click.activate();
|
|
map.zoomToMaxExtent();
|
|
}
|
|
|
|
function showInfo(evt) {
|
|
if (evt.features && evt.features.length) {
|
|
highlightLayer.destroyFeatures();
|
|
highlightLayer.addFeatures(evt.features);
|
|
highlightLayer.redraw();
|
|
} else {
|
|
$('responseText').innerHTML = evt.text;
|
|
}
|
|
}
|
|
|
|
function toggleControl(element) {
|
|
for (var key in infoControls) {
|
|
var control = infoControls[key];
|
|
if (element.value == key && element.checked) {
|
|
control.activate();
|
|
} else {
|
|
control.deactivate();
|
|
}
|
|
}
|
|
}
|
|
|
|
function toggleFormat(element) {
|
|
for (var key in infoControls) {
|
|
var control = infoControls[key];
|
|
control.infoFormat = element.value;
|
|
}
|
|
}
|
|
|
|
function toggleLayers(element) {
|
|
for (var key in infoControls) {
|
|
var control = infoControls[key];
|
|
if (element.value == 'Specified') {
|
|
control.layers = [water];
|
|
} else {
|
|
control.layers = null;
|
|
}
|
|
}
|
|
}
|
|
|
|
// function toggle(key
|
|
</script>
|
|
</head>
|
|
<body onload="load()">
|
|
<h1 id="title">Feature Info Example</h1>
|
|
|
|
<div id="tags">
|
|
WMS, GetFeatureInfo
|
|
</div>
|
|
|
|
<p id="shortdesc">
|
|
Demonstrates the WMSGetFeatureInfo control for fetching information about a position from WMS (via GetFeatureInfo request).
|
|
</p>
|
|
|
|
<div id="info">
|
|
<h1>Tasmania</h1>
|
|
<p>Click on the map to get feature info.</p>
|
|
<div id="responseText">
|
|
</div>
|
|
</div>
|
|
<div id="map" class="smallmap"></div>
|
|
|
|
<div id="docs">
|
|
</div>
|
|
<ul id="control">
|
|
<li>
|
|
<input type="radio" name="controlType" value="click" id="click"
|
|
onclick="toggleControl(this);" checked="checked" />
|
|
<label for="click">Click</label>
|
|
</li>
|
|
<li>
|
|
<input type="radio" name="controlType" value="hover" id="hover"
|
|
onclick="toggleControl(this);" />
|
|
<label for="hover">Hover</label>
|
|
</li>
|
|
</ul>
|
|
<ul id="format">
|
|
<li>
|
|
<input type="radio" name="formatType" value="text/html" id="html"
|
|
onclick="toggleFormat(this);" checked="checked" />
|
|
<label for="html">Show HTML Description</label>
|
|
</li>
|
|
<li>
|
|
<input type="radio" name="formatType" value="application/vnd.ogc.gml" id="highlight"
|
|
onclick="toggleFormat(this);" />
|
|
<label for="highlight">Highlight Feature on Map</label>
|
|
</li>
|
|
</ul>
|
|
<ul id="layers">
|
|
<li>
|
|
<input type="radio" name="layerSelection" value="Specified" id="Specified"
|
|
onclick="toggleLayers(this);" checked="checked" />
|
|
<label for="Specified">Get water body info</label>
|
|
</li>
|
|
<li>
|
|
<input type="radio" name="layerSelection" value="Auto" id="Auto"
|
|
onclick="toggleLayers(this);" />
|
|
<label for="Auto">Get info for visible layers</label>
|
|
</li>
|
|
</ul>
|
|
</body>
|
|
</html>
|