0

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

layer with table When I open this layer manually from GeoServer, it shows the attribute table of the place/polygon, while clicking on the vector layer,

But I want to show it on web page, for doing so, I am using OpenLayers 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 just 1st row of the table just 1 row of table on web page instead of whole table

Where I am doing it wrong?

This is my HTML script for the web page,

    <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>
    <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>
</html>  

This is my JavaScript for OpenLayers,

    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' : '';
      });


    // layer group
    
     baseLayerGroup = new ol.layer.Group({
        layers: [ 
            indialayer
        ]
    })
    
    map.addLayer(baseLayerGroup);

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

    })
}
6
  • We don't need to see the HTML you are using, but we do need to see the request being sent to GeoServer in the two cases. – Ian Turton Dec 15 '20 at 8:30
  • If you want all the data, you'll need a WFS GetFeature request – nmtoken Dec 15 '20 at 13:22
  • @nmtoken wms getmap requests support a few vector formats too, containing all the desired attributes – JGH Dec 15 '20 at 14:02
  • @JGH, You are right I was forgetting vector tiles which give a generalized view of the data, but even with vector tiles a GetFeatureInfo request won't return all attributes. You'd need to access somehow from the GetMap response. – nmtoken Dec 15 '20 at 14:25
  • Thanks for the suggestions @JGH, – Abhilash Singh Chauhan Dec 15 '20 at 14:34
4

A GetFeatureInfo request will return only one feature unless you specify FEATURE_COUNT as a parameter. For example to allow a maximum of 10 features use

    var url = indialayersource.getFeatureInfoUrl(
      evt.coordinate,
      myviewResolution,
      'EPSG:3857',
      {'INFO_FORMAT': 'text/html',
       'FEATURE_COUNT': '10'}
    )

Note too, that even if you set a high feature_count value, you still don't get all the features in the underlying dataset. The returned features are still those around the clicked location (pixel coordinate) in the returned GetMap image.

1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.