Adding a WMTSGetFeatureInfo control for querying WMTS layers. r=ahocevar (closes #2678)
git-svn-id: http://svn.openlayers.org/trunk/openlayers@10656 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
Tim Schaub
@@ -0,0 +1,69 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>OpenLayers WMTS GetFeatureInfo Example</title>
|
||||
<link rel="stylesheet" href="../theme/default/style.css" type="text/css"/>
|
||||
<link rel="stylesheet" href="style.css" type="text/css" />
|
||||
<script src="../lib/Firebug/firebug.js"></script>
|
||||
<script src="../lib/OpenLayers.js"></script>
|
||||
<script src="wmts-getfeatureinfo.js"></script>
|
||||
<style>
|
||||
.olControlAttribution {
|
||||
bottom: 5px;
|
||||
}
|
||||
|
||||
table.featureInfo, table.featureInfo td, table.featureInfo th {
|
||||
border: 1px solid #ddd;
|
||||
border-collapse: collapse;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 80%;
|
||||
padding: .1em .1em;
|
||||
}
|
||||
table.featureInfo th {
|
||||
padding: .2em .2em;
|
||||
font-weight: bold;
|
||||
background: #eee;
|
||||
}
|
||||
table.featureInfo td {
|
||||
background: #fff;
|
||||
}
|
||||
table.featureInfo tr.odd td {
|
||||
background: #eee;
|
||||
}
|
||||
table.featureInfo caption {
|
||||
text-align: left;
|
||||
font-size: 100%;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
padding: .1em .2em;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body onload="init();">
|
||||
<h1 id="title">WMTS GetFeatureInfo Control</h1>
|
||||
|
||||
<p id="shortdesc">
|
||||
The WMTSGetFeatureInfo control allows retrieval of information about
|
||||
features displayed in a WMTS layer.
|
||||
</p>
|
||||
|
||||
<div id="map" class="smallmap"></div>
|
||||
<input id="drill" type="checkbox" checked="checked">
|
||||
<label for="drill">drill down</label>
|
||||
<div id="docs">
|
||||
<p>
|
||||
This example uses an OpenLayers.Control.WMTSGetFeatureInfo
|
||||
control layer to access information from WMTS layers. The
|
||||
control is activated and configured to request feature
|
||||
information when you click on the map. If the control's
|
||||
drillDown property is set to true, multiple layers can be
|
||||
queried.
|
||||
</p><p>
|
||||
See the <a href="wmts-getfeatureinfo.js" target="_blank">
|
||||
wmts-getfeatureinfo.js source</a> to see how this is done.
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,99 @@
|
||||
OpenLayers.ProxyHost = "/proxy/?url=";
|
||||
var map, control, popups = {};
|
||||
|
||||
function init() {
|
||||
|
||||
map = new OpenLayers.Map({
|
||||
div: "map",
|
||||
projection: "EPSG:900913",
|
||||
units: "m",
|
||||
maxExtent: new OpenLayers.Bounds(
|
||||
-20037508.34, -20037508.34, 20037508.34, 20037508.34
|
||||
),
|
||||
maxResolution: 156543.0339
|
||||
});
|
||||
|
||||
var osm = new OpenLayers.Layer.OSM();
|
||||
|
||||
// If tile matrix identifiers differ from zoom levels (0, 1, 2, ...)
|
||||
// then they must be explicitly provided.
|
||||
var matrixIds = new Array(26);
|
||||
for (var i=0; i<26; ++i) {
|
||||
matrixIds[i] = "EPSG:900913:" + i;
|
||||
}
|
||||
|
||||
var zoning = new OpenLayers.Layer.WMTS({
|
||||
name: "zoning",
|
||||
url: "http://v2.suite.opengeo.org/geoserver/gwc/service/wmts/",
|
||||
layer: "medford:zoning",
|
||||
matrixSet: "EPSG:900913",
|
||||
matrixIds: matrixIds,
|
||||
format: "image/png",
|
||||
style: "_null",
|
||||
opacity: 0.7,
|
||||
isBaseLayer: false
|
||||
});
|
||||
var buildings = new OpenLayers.Layer.WMTS({
|
||||
name: "building",
|
||||
url: "http://v2.suite.opengeo.org/geoserver/gwc/service/wmts/",
|
||||
layer: "medford:buildings",
|
||||
matrixSet: "EPSG:900913",
|
||||
matrixIds: matrixIds,
|
||||
format: "image/png",
|
||||
style: "_null",
|
||||
isBaseLayer: false
|
||||
});
|
||||
|
||||
map.addLayers([osm, zoning, buildings]);
|
||||
|
||||
// create WMTS GetFeatureInfo control
|
||||
control = new OpenLayers.Control.WMTSGetFeatureInfo({
|
||||
drillDown: true,
|
||||
queryVisible: true,
|
||||
eventListeners: {
|
||||
getfeatureinfo: function(evt) {
|
||||
var text;
|
||||
var match = evt.text.match(/<body[^>]*>([\s\S]*)<\/body>/);
|
||||
if (match && !match[1].match(/^\s*$/)) {
|
||||
text = match[1];
|
||||
} else {
|
||||
text = "No " + evt.layer.name + " features in that area.<br>";
|
||||
}
|
||||
var popupId = evt.xy.x + "," + evt.xy.y;
|
||||
var popup = popups[popupId];
|
||||
if (!popup || !popup.map) {
|
||||
popup = new OpenLayers.Popup.FramedCloud(
|
||||
popupId,
|
||||
map.getLonLatFromPixel(evt.xy),
|
||||
null,
|
||||
" ",
|
||||
null,
|
||||
true,
|
||||
function(evt) {
|
||||
delete popups[this.id];
|
||||
this.hide();
|
||||
OpenLayers.Event.stop(evt);
|
||||
}
|
||||
);
|
||||
popups[popupId] = popup;
|
||||
map.addPopup(popup, true);
|
||||
}
|
||||
popup.setContentHTML(popup.contentHTML + text);
|
||||
popup.show();
|
||||
}
|
||||
}
|
||||
});
|
||||
map.addControl(control);
|
||||
control.activate();
|
||||
|
||||
map.addControl(new OpenLayers.Control.LayerSwitcher());
|
||||
map.setCenter(new OpenLayers.LonLat(-13678519, 5212803), 15);
|
||||
|
||||
var drill = document.getElementById("drill");
|
||||
drill.checked = true;
|
||||
drill.onchange = function() {
|
||||
control.drillDown = drill.checked;
|
||||
};
|
||||
}
|
||||
|
||||
OpenLayers.Popup.FramedCloud.prototype.maxSize = new OpenLayers.Size(350, 200);
|
||||
Reference in New Issue
Block a user