MapServer OpenLayers Example.

on
The following is a simple example of using OpenLayers with a MapServer WMS.

It is based on the OpenLayers examples.

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="ol.css" type="text/css">
    <style>
      .map {
        height: 600px;
        width: 100%;
      }
    </style>
    <script src="ol.js" type="text/javascript"></script>
    <title>OpenLayers (4.3.2) MapServer WMS - Wales Imagery Example</title>
  </head>
  <body>
    <h2>OpenLayers (4.3.2) MapServer WMS - Wales Imagery Example</h2>
    <div id="map" class="map"></div>
<div id="mouse-position"></div>
    <form>
      <label>Projection </label>
      <select id="projection">
        <option value="EPSG:4326">EPSG:4326</option>
      </select>
      <label>Precision </label>
      <input id="precision" type="number" min="0" max="12" value="4"/>
    </form>
    <script type="text/javascript">
      var mousePositionControl = new ol.control.MousePosition({
        coordinateFormat: ol.coordinate.createStringXY(4),
        projection: 'EPSG:4326',
        // comment the following two lines to have the mouse position
        // be placed within the map.
        className: 'custom-mouse-position',
        target: document.getElementById('mouse-position'),
        undefinedHTML: '&nbsp;'
      });
  
      var map = new ol.Map({
    controls: ol.control.defaults({
          attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
               collapsible: false
          })
        }).extend([mousePositionControl]),
        layers: [
  new ol.layer.Tile({
            source: new ol.source.TileWMS({
      // MapServer URL this must be the same as the one declared in the
                      // MapServer .map file.
                          url : 'http://mapserver:8080/cgi-bin/mapserv.exe?map=wales_imagery.map',
  params : {
                                 // This must be the layer name as defined in the capabilities document
         'LAYERS' : 'wales_imagery',  
  'TILED': true,
'FORMAT': 'image/png',
'TRANSPARENT': 'true',
serverType: 'mapserver',
crossOrigin: 'anonymous'
  },
  projection : 'EPSG:4326',
  wrapX : false
}),
//opacity: 0.5
          })
        ],
        target: 'map',
        view: new ol.View({
          center: ol.proj.fromLonLat([-4.0, 51.7]),   // initial view position
          zoom: 9  // larger more zoomed in
        })
      });
  
      var projectionSelect = document.getElementById('projection');
      projectionSelect.addEventListener('change', function(event) {
        mousePositionControl.setProjection(event.target.value);
      });

       var precisionInput = document.getElementById('precision');
      precisionInput.addEventListener('change', function(event) {
        var format = ol.coordinate.createStringXY(event.target.valueAsNumber);
        mousePositionControl.setCoordinateFormat(format);
      });  
    </script>
  </body>
</html>


The bits in bold are what need to be configured correctly.

You can find out what layers are supported by a WMS Server using the GetCapabilities command:

http://127.0.0.1:8080/cgi-bin/mapserv.exe?map=wales_imagery.map&SERVICE=WMS&REQUEST=GetCapabilities

Make sure the ip address and port are correct.

What you are looking for is:

<Layer>
<Name>wales_imagery</Name>
<Title>WMS Server</Title>
<Abstract>This server was setup by damian.dixon at gmail.com</Abstract>
<CRS>EPSG:4326</CRS>

I was the Team Leader for MapLink Pro. Neil Tippett wrote a large part of the MapLink WMS Server. I ported the WMS server to Solaris and Linux and implemented the Xlib rendering and fine tuned it to run on multiple threads.

Comments

Post a Comment