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