0

I have a vector layer in my geoserver, which I want to publish on the webpage.

geo-server local

When I open this layer manually from geoserver, it shows the attributes of the place, while clicking on the vector layer,

attributes in the vector layer

But I want to show it on webpage,

For doing so, I am using Open layers 6 v6.4.3 I have followed the instructions from following link

Example - WMS GetFeatureInfo (Tile Layer)

but the developer console on chrome is showing the error,

Console Error

But as soon as I hit this link (cursor placed on it) in the error shown by console, It shows the required attributes on the next page.

attributes of wms layer

What am doing wrong?

also, here in the source link given above, I did not get the meaning of highlighted line in the script. What is its significance?

highlighted line

This is my HTML script for the webpage

<html lang="en">  <!-- HTML opening tag -->

<!-- Head tag Starts Here -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title> Test AGRO DSS page - WMS GetFeatureInfo (Tile Layer) </title>
    
    <!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
    <script src="https://unpkg.com/elm-pep"></script>

    <style>
        .map {
          width: 100%;
          height:600px;
        }
    </style>

     <!-- Import OpenLayers -->
    <link rel="stylesheet" href="http://localhost:8080/agrodss_test/styles.css">
    <link rel="stylesheet" href="http://localhost:8080/agrodss_test/libs/v6.4.3-dist/ol.css">

<!-- Head tag ends Here -->
</head>
    <h1> GFS District Forecast </h1>
    <hr>
    <!-- to add javascript  -->
    <div id= 'js-map' class='map' ></div>
    <div id="info">&nbsp;</div>
    <script src="http://localhost:8080/agrodss_test/get_map_info.js"></script> 
    <script src="http://localhost:8080/agrodss_test/libs/v6.4.3-dist/ol.js"></script>

    
<!-- Body tag ends Here -->
</body>

</html>   <!-- HTML closing tag -->

This is my JavaScript for open-layers

window.onload = init;

function init(){

    //Geoserver layer 
    // wmsSource = indialayersource

    var indialayersource = new ol.source.TileWMS({
        url: "http://localhost:8080/geoserver/agrodss/wms",
        params: {"LAYERS":"agrodss:GFS_Forecast_Agromet_DSS_2020-12-02", "tiled": true},
        serverType: "geoserver"
    })

    // wmsLayer = indialayer

    var indialayer = new ol.layer.Tile({
        source: indialayersource, 
        visible:true,
        title: "ForAgrodss"
    })

    // view = myview

    var myview = new ol.View({
        center: ol.proj.fromLonLat([80, 22]),
            zoom: 4.5, 
            maxZoom: 8,
            minZoom: 4,
      });

      var map = new ol.Map({
        layers: [indialayer],
        target: 'js-map',
        view: myview,
      });


      map.on('singleclick', function (evt) {
        document.getElementById('info').innerHTML = '';
        var myviewResolution = /** @type {number} */ (myview.getResolution());
        var url = indialayersource.getFeatureInfoUrl(
          evt.coordinate,
          myviewResolution,
          'EPSG:3857',
          {'INFO_FORMAT': 'text/html'}
        );
        if (url) {
          fetch(url)
            .then(function (response) { return response.text(); })
            .then(function (html) {
              document.getElementById('info').innerHTML = html;
            });
        }
      });
    
      map.on('pointermove', function (evt) {
        if (evt.dragging) {
          return;
        }
        var pixel = map.getEventPixel(evt.originalEvent);
        var hit = map.forEachLayerAtPixel(pixel, function () {
          return true;
        });
        map.getTargetElement().style.cursor = hit ? 'pointer' : '';
      });


    map.on('click', function(e){
        console.log(e.coordinate);
        console.log(evt.pixel);

    })
}
Abhilash Singh Chauhan
  • 291
  • 3
  • 16
  • https://docs.geoserver.org/latest/en/user/production/container.html – Ian Turton Dec 14 '20 at 08:24
  • Hiii @IanTurton, i have already tried doing the same after going through the link you mentioned above, which lead me to this problem. https://gis.stackexchange.com/questions/381896/geoserver-not-opening-openlayer-6-get-feature-after-enabling-cors-filter-in-the?noredirect=1#comment624778_381896 – Abhilash Singh Chauhan Dec 14 '20 at 08:27
  • Does this answer your question? [CORS - Tomcat - Geoserver](https://stackoverflow.com/questions/22363192/cors-tomcat-geoserver) – Ian Turton Dec 14 '20 at 08:33
  • hi @IanTurton, Thanks for the suggestions, The CORS error isn,t showing anymore in console. https://gis.stackexchange.com/questions/381896/geoserver-not-opening-openlayer-6-get-feature-after-enabling-cors-filter-in-the/381933#381933. after i followed steps suggested by Leon Powałka. Basically, i want to show the data of geoserver wms laver, by clicking on the specific polygon of the vector layer in the webpage, how should i do to that? I followed the steps of WMS GetFeatureInfo (Tile Layer) example from official website, but that's not working, Now the console is just empty as i click. – Abhilash Singh Chauhan Dec 14 '20 at 09:36
  • These are the attributes which i want to show while hovering the mouse cursor over the vector layer, (either as popup, or in the same kind of table which it returns, when we open the layer normally from geoserver), https://i.stack.imgur.com/AaNxL.png , Kindly suggest if you have any idea? @IanTurton – Abhilash Singh Chauhan Dec 14 '20 at 09:42

0 Answers0