MapServer WMS GetFeatureInfo (local MS4W layer)

Edit

MapServer WMS GetFeatureInfo (local MS4W layer)

Using an image WMS source with GetFeatureInfo requests

This example shows how to trigger WMS GetFeatureInfo requests on click for a MapServer WMS layer. The local mapfile used is /ms4w/apps/openlayers/examples/map/wms-server.map (data is in Spatialite format). Additionally map.forEachLayerAtPixel is used to change the mouse pointer when hovering a non-transparent pixel on the map.

Copy

index.html<!DOCTYPE html>
<html lang="en">
  <head>
    <title>MapServer WMS GetFeatureInfo (local MS4W layer)</title>
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <style>
      .map {
        width: 100%;
        height:400px;
      }
    </style>
  </head>
  <body>
    <div id="map" class="map"></div>
    <div id="info">&nbsp;</div>
    <script src="index.js"></script>
  </body>
</html>

Copy

index.jsimport 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import ImageLayer from 'ol/layer/Image';
import ImageWMS from 'ol/source/ImageWMS';


var wmsSource = new ImageWMS({
  url: 'https://ms4w.dev/cgi-bin/mapserv.exe?MAP=/ms4w/apps/openlayers-6.6.1/examples/map/wms-server.map',
  params: {'LAYERS': 'countries'},
  serverType: 'mapserver',
  crossOrigin: 'anonymous'
});

var wmsLayer = new ImageLayer({
  source: wmsSource
});

var view = new View({
  center: [0, 0],
  zoom: 1
});

var map = new Map({
  layers: [wmsLayer],
  target: 'map',
  view: view
});

map.on('singleclick', function(evt) {
  document.getElementById('info').innerHTML = '';
  var viewResolution = /** @type {number} */ (view.getResolution());
  var url = wmsSource.getFeatureInfoUrl(
    evt.coordinate, viewResolution, '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' : '';
});

Copy

package.json{
  "name": "getfeatureinfo-image",
  "dependencies": {
    "ol": "6.6.1"
  },
  "devDependencies": {
    "parcel": "1.11.0"
  },
  "scripts": {
    "start": "parcel index.html",
    "build": "parcel build --experimental-scope-hoisting --public-url . index.html"
  }
}