Hallo liebe Forumsmitgleider,
ich wende mich verzweifelt an euch, denn ich schaffe es einfach nicht meine WMS Features mittels Popup abzurufen.
Wenn ich den Dienst einfach einbinde und mit den Beschriebenen Popup abrufe funktionierts. Aber sobald ich layercontroll und checkbox mit nutzen will kommt die Popupbox im Seitenbereich und ich kann die Informationen nicht mehr abrufen.
Vielleich könnte mir einer von euch eine kleine Hilfestellung geben?
Hier mein Quellcode:
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<title>Meine Karte mit den Sehenswürdigkeiten von Magdeburg</title>
<link rel="stylesheet" href="CSS/ol.css" type="text/css"/>
</head>
<body>
<header>
<link rel="stylesheet" href="ol.css" type="text/css" />
<h1> Übersicht der 5 beliebtesten Sehenswürdigkeiten von Magdeburg </h1>
<h2> Dies ist eine Informationsseite!! </h2>
</header>
<section> <!-- Inhaltsbereich für texte und Artikel und Bilder -->
<article>
<h3> Einführung </h3>
<p>
Hallo liebe Besucher dieser schönen Seite, zur einstimmung nenne ich Ihnen die Sehenswürdigkeiten: <br>
- Faunbrunnen <br>
- Kloster unser Lieben Frauen <br>
- Hundertwasserhaus <br>
- Kiek in de Köken <br>
- Dom zu Magdeburg <br>
So das soll es schon gewesen sein mit der Einführung. Aber dennoch gibt es gleich noch ein paar Links zu unseren Sehenswürdigkeiten.
</p>
</article>
<nav> <!-- Navigationsliste, die # ist platzhalter für Link "li" = Linktext -->
<ul>
<a href="https://de.wikipedia.org/wiki/Faunbrunnen_(Magdeburg)"><li>Faunbrunnen </li></a>
<a href="https://de.wikipedia.org/wiki/Kloster_Unser_Lieben_Frauen"><li>Kloster unser Lieben Frauen </li></a>
<a href="https://de.wikipedia.org/wiki/Gr%C3%BCne_Zitadelle_von_Magdeburg"><li>Hundertwasserhaus </li></a>
<a href="https://de.wikipedia.org/wiki/Kiek_in_de_K%C3%B6ken"><li>Kiek in de Köken </li></a>
<a href="https://de.wikipedia.org/wiki/Magdeburger_Dom"><li>Dom zu Magdeburg</li></a>
</ul>
</nav>
<div id="map" class="map"></div>
<div id="popup" class="ol-popup">
<a href="#" id="popup-closer" class="ol-popup-closer"></a>
<div id="popup-content"></div>
</div>
<script src="jquery-3.1.1.min.js"></script>
<script src="ol.js"></script>
<div class="layercontrol">
<button onclick="goHome();">Home</button>
<br/>Basis-Layer:
<select id="layercontrol">
<option value="osm" selected>Open Street Map</option>
<option value="wms" >IKONS Sat-Bild 1m</option>
<option value="wms" >Web-Atlas DE</option>
<option value="wms" >DOM</option>
</select>
<br/>Weitere Layer<br/>
<input id="idTourismus" type="checkbox" onclick="changeLayerVisibility(this,wmsTourismus);">Sehenswuerdigkeiten<br/>
</div>
<script>
// Anlegen verschiedener Baselayer
var osmLayer = new ol.layer.Tile({
source: new ol.source.OSM()
});
var wmsIkonos =new ol.layer.Image({
source: new ol.source.ImageWMS({
url:'http://gis2.afg.hs-anhalt.de/geoserver/tis/wms?service=WMS',
params:{
'Layers':'tis:Ikonos1m'
}
})
});
var wmsWebAtlas =new ol.layer.Image({
source: new ol.source.ImageWMS({
url:'http://sg.geodatenzentrum.de/wms_webatlasde.light?',
params:{
'Layers':'webatlasde.light'
}
})
});
var wmsDOM =new ol.layer.Image({
source: new ol.source.ImageWMS({
url:'https://www.geodatenportal.sachsen-anhalt.de/wss/service/ST_LVermGeo_DOP_guest/guest',
params:{
'Layers':'lsa_lvermgeo_dop100'
}
})
});
// nur OSM-Layer wird anfangs angezeigt, andere Baselayer aus
wmsIkonos.setVisible(false);
wmsWebAtlas.setVisible(false);
wmsDOM.setVisible(false);
var baseLayers=[osmLayer, wmsIkonos, wmsWebAtlas, wmsDOM];
// weitere Layer, die als Overlays eingesetzt werden
var wmsTourismus =new ol.layer.Image({source: new ol.source.ImageWMS({
url:'http://localhost:8080/geoserver/Abschlussarbeit/wms?service=WMS',
params:{
'Layers':'Abschlussarbeit:Tourismus'
}
})
});
wmsTourismus.setVisible(false);
var overlayLayer=[wmsTourismus];
// Ausgangspunkt
var zoom=14;
var campus = ol.proj.transform([11.635, 52.126], 'EPSG:4326', 'EPSG:3857');
var view = new ol.View({
center: campus,
zoom: zoom,
minZoom: 5
});
// alle Layer in ein Array
var allLayer=baseLayers.concat(overlayLayer);
// Karte mit allen Elementen erzeugen
var map = new ol.Map({
target: 'map',
layers: allLayer,
overlays: [overlayPopup],
view: view
});
// Umschalten der Baselayer
document.getElementById("layercontrol").onclick = function(){
// erst alle ausschalten
for (i=0; i<baseLayers.length; i++){
baseLayers[i].setVisible(false);
}
// dann gewählten einschalten
var selIndex=document.getElementById("layercontrol").selectedIndex;
baseLayers[selIndex].setVisible(true);
}
// Ein-Aus-Schalten der OverLay-Layer
function changeLayerVisibility(ev, layer){
var ele=document.getElementById(ev.id);
if (ele.checked==true) {
layer.setVisible(true);
}
else {
layer.setVisible(false);
}
}
// Zoom und Mittelpunkt, wie am Anfang
function goHome() {
map.getView().setZoom(zoom);
map.getView().setCenter(campus);
}
var containerPopup = document.getElementById('popup');
var contentPopup = document.getElementById('popup-content');
var closerPopup = document.getElementById('popup-closer');
// Popup-Fenster als Overlay
var overlayPopup = new ol.Overlay(/** @type {olx.OverlayOptions} */ ({
element: containerPopup,
autoPan: true,
autoPanAnimation: {
duration: 250
}
}));
// schließt ein Popup bei Klick auf x
closerPopup.onclick = function() {
overlayPopup.setPosition(undefined);
closerPopup.blur();
return false;
};
map.on('singleclick', function(evt) {
var viewResolution = view.getResolution();
var coord=evt.coordinate;
var url = wmsTourismus.getGetFeatureInfoUrl(
coord, viewResolution, 'EPSG:3857',
{
'INFO_FORMAT': 'application/json',
'QUERY_LAYERS': 'Abschlussarbeit:Tourismus'
});
if (url) {
$.getJSON(url, function(result){
if (result.features[0]) {
var Sehenswuerdigkeit=result.features[0].properties.Name;
var X=result.features[0].properties.X;
var Y=result.features[0].properties.Y;
var Bild=result.features[0].properties.Bild;
contentPopup.innerHTML = '<p><b>Name der Sehenswuerdigkeit </b>'+ '<br>' + Sehenswuerdigkeit +
'<br>' + '<img src="IMG/'+Bild+'.jpg" alt="'+Sehenswuerdigkeit+'" style="width:95%;height:100%"/>' +
'<br>' + 'X-Koordinate: ' + X + '<br>' + 'Y-Koordinate: '+ Y + '</p>';
overlayPopup.setPosition(coord);
}
else {
overlayPopup.setPosition(undefined);
closerPopup.blur();
}
});
}
});
</script>
</section>
<aside>
<h3> Ein paar Bilder </h3>
<span>
<img src="IMG/Frauenbrunnen.jpg" alt="Faunbrunnen" style="width:95%;height:100%;"/>
<img src="IMG/Kloster.jpg" alt="Kloster" style="width:95%;height:100%;"/>
<img src="IMG/Hundertwasser.jpg" alt="Hundertwasser" style="width:95%;height:100%;"/>
<img src="IMG/Kiek.jpg" alt="Kiek" style="width:95%;height:100%;"/>
<img src="IMG/Dom.jpg" alt="Dom" style="width:95%;height:100%;"/>
</span>
</article>
</aside>
<footer> <!-- Fußzeile der Seite -->
<p> © Nicopoll</p>
</footer>
</body>
</html>
<!-- <img src="IMG/'+B1+'.jpg" alt="'+Sehenswuerdigkeit+'" style="width:95%;height:100%"/> -->
<!-- Definition des GetFeatureInfo -->
<!-- map.on('singleclick', function(evt) {
var coordinate = evt.coordinate;
var viewResolution = /** @type {number} */ (view.getResolution());
var url = wmsSourceNSF.getGetFeatureInfoUrl( <!-- wenn mehrere abzufragende WMS eingebunden werden, muss das hier anders! -->
<!-- evt.coordinate, viewResolution, 'EPSG:3857',
{'INFO_FORMAT': 'text/html'});
content.innerHTML = '<iframe seamless src="' + url + '"></iframe>';
overlay.setPosition(coordinate);
});-->
beste Grüße N
Nicopoll