2

Below code is showing the addition of mapserver file in openlayers 3, it is successfully showing me image in the browser but when i zoom that image it does not zoom. It comes back to originial view.

  var perimetro = new ol.layer.Image({
    source: new ol.source.ImageWMS({
    url: 'http://localhost:8081/cgi-bin/mapserv.exe?',
    params: {
      LAYERS  : 'landuse10' ,
      CRS     : 'EPSG:3857',
      map : 'C:/ms4w/apps/osm/basemaps/osm-google.map',
      mode : 'map',
      FORMAT : 'png'},
    serverType  : 'mapserver',
    extent: [8046840.710000,3906011.335000,8217827.220000,4076997.845000]
    })
 });
 var map = new ol.Map({
   target: 'map',
   layers: [perimetro],
   projection : new ol.proj.Projection({
    code: 'EPSG:3857',
    units: 'm' }),
    view: new ol.View({
       center: [8046840.71, 3907521.8],
       zoom: 16 })
 });

This is my map file layer code:

LAYER
  TYPE POLYGON
  STATUS ON
  PROJECTION
    "init=epsg:3857"
  END
  NAME "landuse10"
  GROUP "default"
  CONNECTIONTYPE POSTGIS
  CONNECTION "host=localhost dbname=osm user=postgres password=postgres123 port=5432"
  DATA "geometry from (select geometry,osm_id,type,name as name from osm_new_landusages_gen1 where type in ('forest','pedestrian','cemetery','industrial','commercial','brownfield','residential','school','college','university','military','park','golf_course','hospital','parking','stadium','sports_center','pitch') order by area desc) as foo using unique osm_id using srid=3857"
  PROCESSING "LABEL_NO_CLIP=ON"
  PROCESSING "CLOSE_CONNECTION=DEFER"
  MAXSCALEDENOM 650016
  MINSCALEDENOM 325008
  CLASSITEM "type"
  LABELITEM "name"

I modified the code in this as per told in previous answer but it is still giving me error of "Unexpected identifier".

<html>
<head>
<title>MapServer Simple Viewer</title>
<link rel="stylesheet" href="http://openlayers.org/en/v3.0.0/css/ol.css">
<script src="http://openlayers.org/en/v3.0.0/build/ol-debug.js"  
        type="text/javascript"></script> 
<script src="http://openlayers.org/en/v3.0.0/build/ol.js" 
        type="text/javascript"></script>
</head>
<body>
<div style="width:800; height:800" id="map"></div>
<script defer="defer" type="text/javascript">
    var perimetro = new ol.layer.Image({
        source: new ol.source.ImageWMS({
        url: 'http://localhost:8081/cgi-bin/mapserv.exe?',
        params: {
          LAYERS  : 'landuse10' ,
          //CRS     : 'EPSG:3857',
          map : 'C:/ms4w/apps/osm/basemaps/osm-google.map',
          //mode : 'map',
          FORMAT : 'png'},
        serverType  : 'mapserver',
        //extent: [8046840.710000,3906011.335000,8217827.220000,4076997.845000]
       })
        extent: [8046840.710000,3906011.335000,8217827.220000,4076997.845000]
    });
    var map = new ol.Map({
       target: 'map',
       layers: [perimetro],
       projection : new ol.proj.Projection({
          code: 'EPSG:3857',
          units: 'm'
       }),
       view: new ol.View({
           center: [8046840.71, 3907521.8 ],
           zoom: 16
           })
       });       
  </script>
</body>
</html>
1

You just added variables breaking the normal OpenLayers 3 behaviour and also made a mistake about extent position

Remove

mode : 'map',
CRS     : 'EPSG:3857',

Move

extent: [8046840.710000,3906011.335000,8217827.220000,4076997.845000]

from ol.source.ImageWMS to ol.layer.Image options block

  • I moved it from ol.source.ImageWMS to ol.layer.Image but it gives me error of Unexpected identifier. I am posting that new code in another answer please have a look at that one. Is this what were you saying? – Ahsan Mukhtar Jun 9 '15 at 11:33
0

You need to check that your center point falls on the edge of the extent you choose for your WMS.

Try changing the extent or choose a point which falls within your extent at zoom level 16 (or change zoom level to 5).

You can check with the following code where I have changed the ol.layer.Image to ol.layer.Tile.


var perimetro = new ol.layer.Tile({
        title: 'WMS',
        visible: true,
        extent: [8046840.710000,3906011.335000,8217827.220000,4076997.845000],
        source: new ol.source.TileWMS({
            url: 'http://localhost:8081/cgi-bin/mapserv.exe',
            serverType: 'mapserver',
            params: {
                'MAP': 'C:/ms4w/apps/osm/basemaps/osm-google.map',
                'LAYERS': 'landuse10',
                'TILED': true,
                'SRS':'EPSG:3857'
            }
        })
    });

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

    var view = new ol.View({
        center: [8046840.71, 3907521.8],
        zoom: 16
        });

    var map = new ol.Map({
        layers: [perimetro],
        target: "map",
        projection: proj,
        view: view
    });

Hope this should work. If not, then revert with the error in browser Console. All the Best

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.