Popup für WMS Dienst (Hilfe für Hausarbeit)

  • 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> &copy; 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



  • Hallo Nicopoll,


    Ich hatte Probleme mit dem GeoServer. Sie können die Fehler hier sehen - Ich habe die Bilder in der Esri-Community hochgeladen:

    https://community.esri.com/thr…ervice-popups-not-working