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
tomapserver
(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
Use it now in your ol.Map
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...