MapServer – How to Add WMS to OpenLayers 3

mapserveropenlayers-2wms

I have a WMS server on localhost (using MapServer and Apache and Windows).

I want to add my WMS to Openlayers. but any example that i found use openlayers 2. How to add MapServer's WMS to OpenLayers 3 ?

my WMS Address is:

http://localhost/cgi-bin/mapserv.exe?map=C:\OSGeo4W\apache\htdocs\rasht\RashtMap.map&SERVICE=WMS&VERSION=1.3.0&REQUEST=GetMap&LAYERS=Base,Street&STYLES=&CRS=EPSG:32639&BBOX=373204.15,4128154.94,377063.25,4131409.17&WIDTH=800&HEIGHT=500&FORMAT=image/png

EDIT :

This is content of my mapfile:

MAP
#  FONTSET "[fontsetpath]"
  EXTENT 373188.4638 4128129.9076 377115.7502 4131413.2439
  IMAGETYPE "png"
  NAME "Rasht"
  SHAPEPATH "shp"
  SIZE 800 500
  STATUS ON
  UNITS METERS

  OUTPUTFORMAT
    NAME "png"
    MIMETYPE "image/png"
    DRIVER "AGG/PNG"
    EXTENSION "png"
    IMAGEMODE RGB
    TRANSPARENT TRUE
  END # OUTPUTFORMAT

  PROJECTION
    "init=epsg:32639"
  END # PROJECTION

  LEGEND
    KEYSIZE 20 10
    KEYSPACING 5 5
    LABEL
      SIZE MEDIUM
      OFFSET 0 0
      SHADOWSIZE 1 1
      TYPE BITMAP
    END # LABEL
    STATUS ON
    TEMPLATE "legend.html" ### HTML template file
  END # LEGEND

  QUERYMAP
    SIZE -1 -1
    STATUS OFF
    STYLE HILITE
  END # QUERYMAP

  SCALEBAR
    INTERVALS 3
    LABEL
      SIZE MEDIUM
      OFFSET 0 0
      SHADOWSIZE 1 1
      TYPE BITMAP
    END # LABEL
    STYLE 1
    SIZE 200 3
    STATUS ON
    UNITS METERS
  END # SCALEBAR

  WEB
    FOOTER ""
    HEADER ""
#    TEMPPATH ""
    METADATA
      "ows_onlineresource"  "http://localhost/cgi-bin/mapserv.exe?map=C:\OSGeo4W\apps\Rasht\RashtMap.map&"
      "ows_enable_request"  "*"
      "ows_srs" "EPSG:32639 EPSG:3857"
      "ows_title"   "Rasht"
    END # METADATA
    TEMPLATE "template2.html"
    IMAGEPATH "C:\\OSGeo4W\\apache\\htdocs\\rasht\\tmp\\"
    IMAGEURL "/rasht/tmp/"
  END # WEB

  LAYER
    DATA "Road_01"
    EXTENT 373188.4638 4128129.9076 377115.7502 4131413.2439
    METADATA
      "ows_title"   "Street"
      "ows_srs" "EPSG:32639 EPSG:3857"
    END # METADATA
    NAME "Street"
    PROJECTION
      "init=epsg:32639"
    END # PROJECTION
    STATUS ON
    TILEITEM "location"
    TYPE LINE
    UNITS METERS
    CLASS
      NAME "خیابان اصلی"
      STYLE
        COLOR 255 170 0
        WIDTH 1.26
      END # STYLE
    END # CLASS
  END # LAYER

  LAYER
    DATA "Parcel_01"
    EXTENT 373204.15 4128154.935 377063.249 4131409.167
    METADATA
      "ows_title"   "Base"
      "ows_srs" "EPSG:32639 EPSG:3857"
    END # METADATA
    NAME "Base"
    PROJECTION
      "init=epsg:32639"
    END # PROJECTION
    STATUS ON
    TILEITEM "location"
    TYPE POLYGON
    UNITS METERS
    CLASS
      NAME "اماکن"
      STYLE
        COLOR 241 244 199
      END # STYLE
      STYLE
        OUTLINECOLOR 175 179 138
        WIDTH 0.26
      END # STYLE
    END # CLASS
  END # LAYER

END # MAP

This is content of html file:

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="ol3/ol.css" type="text/css">
    <style>
      #map {
        height: 256px;
        width: 512px;
      }
      .ol-attribution a { color: black; }
    </style>
    <title>OpenLayers 3 example</title>
    <script src="ol3/ol.js" type="text/javascript"></script>
  </head>
  <body>
    <h1>My Map</h1>
    <div id="map"></div>
    <script type="text/javascript">
      var layers = [
          new ol.layer.Image({
            extent: [373204.15,4128154.94,377063.25,4131409.17],
            source: new ol.source.ImageWMS({
              url: 'http://localhost/cgi-bin/mapserv.exe?map=C:\\OSGeo4W\\apache\\htdocs\\rasht\\RashtMap.map',
              params: {
                'LAYERS': 'base',
                'CRS': 'EPSG:32639',
                'BBOX': '373204.15,4128154.94,377063.25,4131409.17',
                'WIDTH': '800',
                'HEIGHT': '500',
                'FORMAT': 'image/png'
              },
              serverType: 'mapserver'
            })
          })
        ];
        var map = new ol.Map({
          layers: layers,
          target: 'map',
          view: new ol.View({
            center: [374788,4129631],
            zoom: 7
          })
        });
    </script>
  </body>
</html>

Best Answer

Just see this official demo example http://openlayers.org/en/v3.0.0/examples/wms-image.html

Some others WMS samples are available. You will just need to change ServerType to mapserver (link for reference)

Edit for completing with solution

Without proj4js, you can always use the recipe from this other official example

Declare an object ol.proj.Projection

var projection = new ol.proj.Projection({
  code: 'EPSG:32639',
  units: 'm'
});

Use it now in your ol.Map

var map = new ol.Map({
  layers: layers,
  target: 'map',
  view: new ol.View({
    center: [374788,4129631],
    zoom: 7,
    projection: projection
  })
});

In this case, the projection is an "empty shell": it means your have something like a projection but it does not reproject in truth. It's just a way to say "I will use a custom projection with other units and extent but you can't use me for projection conversions". So, if you overlay vector content and your projection is not EPSG:32639, you will never be able to align it on your map because without true projection (and Proj4js), you can't convert features from another projection to yours...

Related Question