2

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>
Improve this question
8
  • Can you provide the client code? We can't have any server side because localhost but maybe getting client side code would help
    – ThomasG77
    Oct 23, 2014 at 16:06
  • codes added to question.
    – ahmad
    Oct 23, 2014 at 16:23
  • look at this picture. http://i60.tinypic.com/x41a8x.jpg. in request URL width set to 5 and height set to 4! bu i set that to 800 and 500! why?
    – ahmad
    Oct 23, 2014 at 20:56
  • First 800 and 500 are default size for map On MapServer side but changed according to the URL call. Your size issue is related to a mess with units. You don't use Proj4js, you do not use your local projection on the view related to the new ol.Map at OpenLayers level (default is EPSG:3857). Please see WMS samples, this one has everything openlayers.org/en/master/examples/wms-image-custom-proj.html
    – ThomasG77
    Oct 23, 2014 at 21:57
  • 1
    QGis already provides projection management whereas with OpenLayers 3 and others online library, it's to you to manage projection. You have to load proj4js (the JS library to manage projection), to declare your projection with epsg.io and to set manually the map and the layers extent.
    – ThomasG77
    Oct 24, 2014 at 15:17

1 Answer 1

Reset to default
5

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...

Improve this answer
6
  • url parameter should refer to where? in this example refer to (demo.opengeo.org/geoserver/wms) that seems use a wrapper. how to fill it for my server? I use this code, but don't show my layers. new ol.layer.Image({ extent: [373204.15,4128154.94,377063.25,4131409.17], source: new ol.source.ImageWMS({ url: 'localhost/cgi-bin/mapserv.exe?map=C:\OSGeo4W\apache\htdocs\rasht\RashtMa‌​p.map', params: {'LAYERS': 'base:street'}, serverType: 'mapserver' }) }) what's wrong?
    – ahmad
    Oct 23, 2014 at 11:06
  • Did you inspect your Network panel in debugger to see the call to WMS and try to understand why it's not working? Does your project use the "right" projection for the map, e.g 32639?
    – ThomasG77
    Oct 23, 2014 at 13:56
  • yes,projection is right. this projection is same as projection in mapfile. there is image of network panel : http://i60.tinypic.com/x41a8x.jpg
    – ahmad
    Oct 23, 2014 at 14:42
  • What's happened if you cute and paste the URL in the browser bar. The response is XML >> It's an error message and not an image.
    – ThomasG77
    Oct 23, 2014 at 15:35
  • If i paste this URL in browser 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 server return an image of map in bbox extent.
    – ahmad
    Oct 23, 2014 at 15:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.