I have a vector layer in my GeoServer, which I want to publish on the web page.
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
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"> </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);
})
}