import ImageLayer from 'ol/layer/Image';
import ImageWMS from 'ol/source/ImageWMS';
import Map from 'ol/Map';
import View from 'ol/View';
const wmsSource = new ImageWMS({
url: 'https://ahocevar.com/geoserver/wms',
params: {'LAYERS': 'ne:ne'},
serverType: 'geoserver',
crossOrigin: 'anonymous',
});
const wmsLayer = new ImageLayer({
source: wmsSource,
});
const view = new View({
center: [0, 0],
zoom: 1,
});
const map = new Map({
layers: [wmsLayer],
target: 'map',
view: view,
});
//map单击事件响应函数。异步读取getfeatureinfo url获取数据
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鼠标移动事件响应函数。当鼠标指向的像素值不为0
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' : '';
});
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WMS GetFeatureInfo (Image 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>
<!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
<script src="https://unpkg.com/elm-pep@1.0.6/dist/elm-pep.js"></script>
<script type="module" src="main.js"></script>
</body>
</html>