GetFeatureInfo - Popup (Openlayersapplikation med HTML)
Hej,
Är väldigt ny inom detta område och jag håller på att göra en Openlayersapplikation med en HTML page.
Jag använder mig utan geoserver för att hantera och hämta olika lager med byggnader, vägkonturer med mera. Sedan använder jag mig av visual studio 2010 med visual basic för att skriva koden i en HTML-Page.
Mitt problem i denna uppgift är att få in bilder på byggnader i en "getfeatureinfo-popup".
Så här lyder den exakta meningen från uppgiften: " Använd BID-numret och ta ut text och/eller bild från inventeringen baserat på Bid-numret i popupen.
Texten och bilderna finns i labfoldern. "
En specifik byggnad ska alltså få en specifik bild.
Koden jag har använt mig av finns nedanför.
Tack på förhand!
Mvh
Alexander
Min kod:********************************************
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Gammelstad, Kyrkbyn</title>
<script src="http://www.openlayers.org/api/OpenLayers.js" type="text/javascript"></script>
<script src="http://maps.google.com/maps/api/js?v=3&sensor=false" type="text/javascript"></script>
<style type="text/css">
#mapContainer
{
position:absolute; /*Elementets position i förhållande till andra element*/
padding: 10px; /*Elementets avstånd från andra element (10 px åt alla håll)*/
width: 600px; /*Elementets brdd*/
height: 500px; /*Elementets höjd*/
border: 1px solid black; /*Ram runt elementet*/
}
</style>
<script type="text/javascript">
OpenLayers.ProxyHost = "/Proxy/proxy.aspx?url=";
/*
OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
defaultHandlerOptions: {
'single': true,
'double': false,
'pixelTolerance': 0,
'stopSingle': false,
'stopDouble': false
},
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.trigger
}, this.handlerOptions
);
},
trigger: function (e) {
var lonlat = map.getLonLatFromPixel(e.xy);
alert("You clicked near " + lonlat.lat + " N, " +
+lonlat.lon + " E");
}
});
var map;
var info;
*/
function initMap() {
map = new OpenLayers.Map("mapContainer");
var gmap = new OpenLayers.Layer.Google("Google Map");
var osm = new OpenLayers.Layer.OSM();
map.addLayer(osm);
map.addLayer(gmap);
addWMSservice();
addAdditionalMapControls();
map.setCenter(new OpenLayers.LonLat(2452163.81898, 9780548.08282), 10);
/* GetFeatureInfo-pop upen*/
info = new OpenLayers.Control.WMSGetFeatureInfo({
url: 'http://localhost:8115/geoserver/wms',
title: 'Identify features by clicking',
queryVisible: true,
eventListeners: {
getfeatureinfo: function (event) {
map.addPopup(new OpenLayers.Popup.FramedCloud(
"chicken",
map.getLonLatFromPixel(event.xy),
null,
event.text,
null,
true
));
}
}
});
map.addControl(info);
info.activate();
var click = new OpenLayers.Control.Click();
map.addControl(click);
click.activate();
}
function addAdditionalMapControls() {
map.addControl(new OpenLayers.Control.MousePosition());
map.addControl(new OpenLayers.Control.LayerSwitcher());
var drawLayer = new OpenLayers.Layer.Vector("Ritade objekt");
map.addLayer(drawLayer);
map.addControl(new OpenLayers.Control.EditingToolbar(drawLayer))
}
function addWMSservice() {
var universitet = new OpenLayers.Layer.WMS(
"Byggnader i Kyrkbyn", "http://localhost:8115/geoserver/wms",
{
layers: 'Gstad:Byggnader_kyrkbyn',
format: "image/png",
tiled: 'true',
transparent: true
},
{
buffer: 0,
displayOutsideMaxExtent: true
}
);
var universitet1 = new OpenLayers.Layer.WMS(
"Fastighetsgränser", "http://localhost:8115/geoserver/wms",
{
layers: 'Gstad:Fastighetsgranser',
format: "image/png",
tiled: 'true',
transparent: true
},
{
buffer: 0,
displayOutsideMaxExtent: true
}
);
var universitet2 = new OpenLayers.Layer.WMS(
"Vägkonturer", "http://localhost:8115/geoserver/wms",
{
layers: 'Gstad:vagkontur',
format: "image/png",
tiled: 'true',
transparent: true
},
{
buffer: 0,
displayOutsideMaxExtent: true
}
);
map.addLayer(universitet);
map.addLayer(universitet1);
map.addLayer(universitet2);
}
</script>
</head>
<body onload="initMap();">
<div id="mapContainer"></div>
</body>
</html>
*****************************************************************
