Issuing GetFeatureInfo requests with a WMS tiled source
This example shows how to trigger WMS GetFeatureInfo requests on click for a WMS tile layer. Additionally layer.getData(pixel)
is used to change the mouse pointer when hovering a non-transparent pixel on the map.
import Map from 'ol/Map.js';
import TileLayer from 'ol/layer/Tile.js';
import TileWMS from 'ol/source/TileWMS.js';
import View from 'ol/View.js';
const wmsSource = new TileWMS({
url: 'https://ahocevar.com/geoserver/wms',
params: {'LAYERS': 'ne:ne', 'TILED': true},
serverType: 'geoserver',
crossOrigin: 'anonymous',
});
const wmsLayer = new TileLayer({
source: wmsSource,
});
const view = new View({
center: [0, 0],
zoom: 1,
});
const map = new Map({
layers: [wmsLayer],
target: 'map',
view: view,
});
map.on('singleclick', function (evt) {
document.getElementById('info').innerHTML = '';
const viewResolution = /** @type {number} */ (view.getResolution());
const url = wmsSource.getFeatureInfoUrl(
evt.coordinate,
viewResolution,
'EPSG:3857',
{'INFO_FORMAT': 'text/html'},
);
if (url) {
fetch(url)
.then((response) => response.text())
.then((html) => {
document.getElementById('info').innerHTML = html;
});
}
});
map.on('pointermove', function (evt) {
if (evt.dragging) {
return;
}
const data = wmsLayer.getData(evt.pixel);
const hit = data && data[3] > 0; // transparent pixels have zero for data[3]
map.getTargetElement().style.cursor = hit ? 'pointer' : '';
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WMS GetFeatureInfo (Tile Layer)</title>
<link rel="stylesheet" href="node_modules/ol/ol.css">
<style>
.map {
width: 100%;
height: 400px;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<div id="info"> </div>
<script type="module" src="main.js"></script>
</body>
</html>
{
"name": "getfeatureinfo-tile",
"dependencies": {
"ol": "10.3.1"
},
"devDependencies": {
"vite": "^3.2.3"
},
"scripts": {
"start": "vite",
"build": "vite build"
}
}