Untitled

MAP
    NAME "guarulhos"
    EXTENT 339574.172100 7399304.302223 361316.525900 7421573.107621
    SIZE 800 800

    QUERYMAP
        STATUS on
        STYLE normal
    END

    UNITS METERS
  SHAPEPATH "data/"
  IMAGECOLOR 155 155 155

  SCALEBAR
      IMAGECOLOR 255 255 255
      LABEL
          COLOR 0 0 0
          SIZE SMALL
      END
      SIZE 150 5
      COLOR 255 255 255
      BACKGROUNDCOLOR 0 0 0
      OUTLINECOLOR 0 0 0
      UNITS kilometers
      INTERVALS 5
      STATUS EMBED
  END

  LEGEND
    STATUS EMBED
    POSITION UL
    KEYSIZE 18 12
    LABEL
      TYPE BITMAP
      SIZE MEDIUM
      COLOR 255 0 0
    END
  END

  WEB
    TEMPLATE "template.html"
        IMAGEPATH "/ms4w/tmp/ms_tmp/"
    IMAGEURL "/ms_tmp/"
        METADATA
            "wms_title" "wms guarulhos"
            "wms_onlineresource" "localhost/cgi-bin/mapserv.exe?map=../htdocs/mapteste3/mapfile.map"
            "wms_srs" "EPSG:31983"
      #29193 esse é o que o giordano falou
      #31983 esse ta na saída do orginfo
        END
  END

    PROJECTION
        "init=epsg:31983"
    END

  LAYER
    NAME face_guarulhos
    TYPE line
    CONNECTIONTYPE postgis
    CONNECTION "host=myip user=myuser password=mypwd dbname=mydbname port=myport"
    DATA "geom from ctageo.face_guarulhos"
    STATUS default

        METADATA
            "wms_title" "face_guarulhos"
        END

    CLASS
      NAME "Faces Guarulhos"
            OUTLINECOLOR 139 134 130
      COLOR 255 145 145
    END
  END

    LAYER
        NAME pg_trechos
        TYPE line
        CONNECTIONTYPE postgis
        CONNECTION "host=myip user=myuser password=mypwd dbname=mydbname port=myport"
        DATA "geom from transporte.pg_trechos"
        STATUS default

        METADATA
            "wms_title" "pg_trechos"
        END

        CLASS
            NAME "Trechos"
            OUTLINECOLOR 46 33 255
            COLOR 226 225 232
        END
    END
END

<!-- MapServer Template -->
<html>
  <head>
    <title>Test Guarulhos</title>
    <meta charset="utf-8"/>
      <link rel="stylesheet" href="https://openlayers.org/en/v4.4.2/css/ol.css" type="text/css">
      <style>
        .map {
          /*height: 700px;*/
          width: 50%;
          align-self: center;
        }
        body {
          text-align: center;
        }
      </style>
      <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
      <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
      <script src="https://openlayers.org/en/v4.4.2/build/ol.js"></script>
    </head>

  <body>
    <form method="get" action="/cgi-bin/mapserv.exe">
      <input type="hidden" name="map" value="[map]"/>
      <input type="hidden" name="imgext" value="[mapext]">
      <input type="hidden" name="zoom" value="1"/>
      <input type="hidden" name="mode" value="browse"/>

      <label>Mapfile: </label>[map]<br>
      <label>Extent: </label>[mapext]<br>
      <label>Img: </label>[img]<br>
      <label>Center: </label>[center]<br>

      <p id="teste">
        The following element suposed to be a map.<br>
      </p>

      <label>Zoom: </label>
      <select multiple name="zoom" size=5>
         <option value="3" > 3
         <option value="2" > 2
         <option value="1" selected> 1
         <option value="-2"> -2
         <option value="-3"> -3
      </select>

      <br/>
      <br/>
      <br/>
      <br/>
      <input type="image" name="img" src="[img]" width="500"
           height="500" border="0">
    </form>

    <br/>
    <br/>
    <br/>
    <br/>

    <div id="map" class="map"></div>

      <script type="text/javascript">
        var myurl = 'http://localhost/cgi-bin/mapserv.exe?map=../htdocs/mapteste3/mapfile.map&';

        var exurl = 'https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StateCityHighway_USA/MapServer';

        var layers = [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          }),
          new ol.layer.Image({//this is for testing
            source: new ol.source.ImageArcGISRest({
              ratio: 1,
              params: {},
              url: exurl
            })
          }),
          new ol.layer.Image({ //this is my map
            source: new ol.source.ImageWMS({
              ratio: 1,
              params: {'LAYERS':'face_guarulhos', 'pg_trechos'},
              crossOrigin: '/ms_tmp/',
              url: myurl
            })
          })
        ];

        var map = new ol.Map({
          layers: layers,
          target: 'map',
            view: new ol.View({
            center: ol.proj.fromLonLat([-46.5233014,-23.4523035]),
            zoom: 13
          })
        });
      </script>
  </body>
</html>

new ol.layer.Image({ //this is my map
  source: new ol.source.ImageWMS({
    ratio: 1,
    params: {'LAYERS':'face_guarulhos, pg_trechos'},
    url: myurl
  })
})