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