Why the layer can be loaded to Google Maps not OpenStreetMap using MapServer?

Question

I am using OpenLayers WMS to load a layer from the PostGIS Raster Table, the JavaScript on OpenLayers are as following:

function init(){
    var map = new OpenLayers.Map('map');
    var imagery = new OpenLayers.Layer.WMS(
        "Global Imagery",
        "http://maps.opengeo.org/geowebcache/service/wms",
        {
            layers: "bluemarble",
        }
     );
    map.addLayer(imagery);
    localWMS = new OpenLayers.Layer.WMS( 
        "Local WMS layers",
        "http://127.0.0.1/cgi-bin/mapserv.exe?MAP=C:/Users/gyu1/Desktop/Newfolder/mapserver.map",
        {
            layers: 'polygon',
            transparent: true
        }, {
            isBaseLayer: false
        }
    );

    map.addLayer(localWMS);
    map.setCenter(
        new OpenLayers.LonLat(1.147, 52.472).transform(
            new OpenLayers.Projection("EPSG:4326"),
            map.getProjectionObject()
        ), 5
    );
    map.addControl( new OpenLayers.Control.LayerSwitcher());
}

The map file linking the Data and styling are as following:

MAP
    NAME "polygon"
    WEB 
        METADATA
            "wms_title" "MapServer"
            "wms_onlineresource" "http://127.0.0.1/cgi-bin/mapserv.exe?MAP=C:/Users/gyu1/Desktop/Newfolder/mapserver.map"
            "wms_srs" "EPSG:4326 EPSG:3857"
        END
    END
    PROJECTION
        "init=epsg:3857"
    END
    LAYER
        NAME "postgis"
        TYPE raster
        STATUS ON
        DATA "PG:host=localhost port=5432 dbname='fusiongeo' user='postgres' password='**' schema='public' table='london' mode='2'" 
        PROCESSING "NODATA=-9999"
        PROCESSING "SCALE=AUTO"
        CLASS
            NAME "boring"
            EXPRESSION ([pixel] < 50)
            COLOR 250 100 0
        END
        CLASS
            NAME "mildly interesting"
            EXPRESSION ([pixel] > 50 AND [pixel] < 100)
            COLOR 100 0 0
        END
        CLASS
            NAME "very interesting"
            EXPRESSION ([pixel] >= 100)
            COLOR 0 50 0
        END
    END     
END # end map

It works for the Google Base Map not the OpenStreetMap. I am quite new with the MapServer, OpenLayers and I don't know how to change the SRS to make it work.

The data in PostGIS are in EPSG:3857.

Answer 1

 map.setCenter(
            new OpenLayers.LonLat(1.147, 52.472).transform(
                new OpenLayers.Projection("EPSG:4326"),
                map.getProjectionObject()
            ), 5
        );

you're mixing things like above. If Mapserver is serving your Postgis data set in EPSG:3857, you don't need EPSG:4326 in your mapfile. The EPSG:4326, however, will be needed in your html if you need to convert utm values to geographical ones (ie. to decimal degrees). It also will be needed if you want to add some WMS in 4326 (so in the mapfile and openlayers code). OSM is in Spherical Mercator and EPSG:3857 in your mapfile is correct. Check here for some working examples:

http://jsfiddle.net/aguiguy/ZAZN8/
http://jsfiddle.net/UAxun/155/
http://jsfiddle.net/VictorVelarde/DbCgt/

About your mapfile, what I meant was for instance:

DATA "geom FROM table USING UNIQUE id USING SRID=4326"

which works for a table in EPSG:4326, and this goes into your mapfile. Your mapfile has this:

DATA "PG:host=localhost port=5432 dbname='fusiongeo' user='postgres' password='**' schema='public' table='london' mode='2'"

and I think it should be something like this (you has missed so far the connection option):

CONNECTION "PG:host=localhost port=5432 dbname='fusiongeo' user='postgres' password='**'"
DATA "geom FROM YOURtable USING UNIQUE id USING SRID=3857"

Check here for some more basic info: http://trac.osgeo.org/mapserver/wiki/PostGIS

Hope this helps,

Answer 2

Updates JavaScript

 var map = new OpenLayers.Map('map', {
                projection: new OpenLayers.Projection("EPSG:3857"),
                displayProjection: new OpenLayers.Projection("EPSG:4326"),
                units: "m"
        });
  var imagery = new OpenLayers.Layer.OSM( "Simple OSM Map");
  map.addLayer(imagery);

        localWMS = new OpenLayers.Layer.WMS( "Local WMS layers",
                  "http://127.0.0.1/cgi-bin/mapserv.exe?MAP=C:/Users/gyu1/Desktop/Newfolder/mapserver.map",
                  {layers: 'polygon',transparent: true},
                  {isBaseLayer: false} );
        map.addLayer(localWMS);

        var lonlat = new OpenLayers.LonLat(lon,lat).transform(map.displayProjection, map.projection);
        map.setCenter(lonlat, 5);

        map.addControl( new OpenLayers.Control.LayerSwitcher());
    }

The problem was solved by replacing "wms_srs" "EPSG:3857" with "wms_srs" "EPSG:900913" in the map file.