Le portail francophone de la géomatique

icadedt · Mon 28 November 2011 15:03

bonjour,

savez-vous comment fait on pour afficher un wms mapserver
sur client carto google maps

Je souhaiterais savoir surtout comment configurer le mapfile...

Merc id 'avance

icadedt · Tue 29 November 2011 17:07

bon je me suis inspiré de cet exemple: http://www.gisdoctor.com/v3/mapserver.html

voici mon mapfile avec un cadrage au niveau de la France:

Code:

# Edit this file to customize for your map interface
# (Created with PyQgis MapServer Export plugin)
MAP
  NAME "QGIS-MAP"
  # Map image size
  SIZE 256 256
  UNITS meters

   EXTENT -77928.743177 2906817.400258 1805087.176504 4018834.675660
 

  PROJECTION
    'proj=longlat'
    'ellps=WGS84'
    'towgs84=0,0,0,0,0,0,0'
    'no_defs'
  END

  # Background color for the map canvas -- change as desired
  IMAGECOLOR 255 255 255
  IMAGEQUALITY 95
  IMAGETYPE png

  OUTPUTFORMAT
    NAME png
    DRIVER 'GD/PNG'
    MIMETYPE 'image/png'
    IMAGEMODE RGBA
    EXTENSION 'png'
  END
  # Legend
  LEGEND
      IMAGECOLOR 255 255 255
    STATUS ON
    KEYSIZE 18 12
    LABEL
      TYPE BITMAP
      SIZE MEDIUM
      COLOR 0 0 89
    END
  END

  # Web interface definition. Only the template parameter
  # is required to display a map. See MapServer documentation
  WEB
    # Set IMAGEPATH to the path where MapServer should
    # write its output.
    IMAGEPATH '/tmp/'

    # Set IMAGEURL to the url that points to IMAGEPATH
    # as defined in your web server configuration
    IMAGEURL '/tmp/'

    # WMS server settings
    METADATA
      'ows_title'           'QGIS-MAP'
      'ows_onlineresource'  'http://10.30.59.164:8080/cgi-bin/mapserv.exe?map=C:/Users/moi/Documents/TRAVAUX/ms4w/apps/tutorial/htdocs/surf.map'
      'ows_srs'             'EPSG:4326'
    END

    #Scale range at which web interface will operate
    # Template and header/footer settings
    # Only the template parameter is required to display a map. See MapServer documentation
    TEMPLATE 'fooOnlyForWMSGetFeatureInfo'
  END

  LAYER
    NAME 'deptest'
    TYPE POLYGON
    DUMP true
    TEMPLATE fooOnlyForWMSGetFeatureInfo
   EXTENT -77928.743177 2906817.400258 1805087.176504 4018834.675660
 
    CONNECTIONTYPE postgis
    CONNECTION "dbname='test' host=localhost port=5431 user=postgres password=monmotdepasse   sslmode=disable"
    DATA 'the_geom FROM "deptest" USING UNIQUE gid USING srid=4326'
    METADATA
      'ows_title' 'deptest'
    END
    STATUS ON
    TRANSPARENCY 100
    PROJECTION
    'proj=longlat'
    'ellps=WGS84'
    'towgs84=0,0,0,0,0,0,0'
    'no_defs'
    END
    CLASS
       NAME 'deptest' 
       STYLE
         WIDTH 1 
         OUTLINECOLOR 0 0 0
         COLOR 56 163 158
       END
    END
  END

END

voici le parametrage de ma page web:

Code:

 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Google Maps with Web Map Service - Google Maps V3 - MapServer WMS and Google Maps</title> 
 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
 
  
<script type="text/javascript"> 
    //setting up the map
    var map;
 
       
    var wmsMapType;
  
  
    function initialize() {
        //Set the center of the map

        var usa = new google.maps.LatLng(49, 2);

   
 
        var map_setup = {
            zoom: 5,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            MapTypeControl: true,
            zoomControlOptions: {style: google.maps.ZoomControlStyle.SMALL},
            navigationControl: true,
            navigationControlOptions: { style: google.maps.NavigationControlStyle.ZOOM_PAN },
            
            scrollwheel: false,
            panControl: false,
            maxZoom: 17,
            minZoom: 1,
            scaleControl: true,
            center: usa
            
        }
 
        map = new google.maps.Map(document.getElementById("map"), map_setup);
        
        
      
       
        //Creating the WMS layer options.  This code creates the Google imagemaptype options for each wms layer.  In the options the function that calls the individual 
        //wms layer is set 
      
 
        var wmsOptions = {
            alt: "MapServer Layer",
            getTileUrl: WMSGetTileUrl,
            isPng: false,
            maxZoom: 17,
            minZoom: 1,
            name: "MapServer Layer",
            tileSize: new google.maps.Size(256, 256)
        };
 
 
        //Creating the object to create the ImageMapType that will call the WMS Layer Options. 
        
       wmsMapType = new google.maps.ImageMapType(wmsOptions);
 
      
    //Where the initial map type is set.  This can be adjusted as necessary.  The map name in ' ' indicates the default map viewed when the user 
    //visits the page


       map.overlayMapTypes.insertAt(0, wmsMapType);





 
    
    
    
      
}
   
  //The code that reads in the WMS tiles.  To change the WMS layer the user would update the layers line.  As this is constructed now you need to have this code for each WMS layer.
  //Check with your Web Map Server to see what are the required components of the address.  You may need to add a couple of segements.  For example, the ArcServer WMS requires
  //a CRS value which is tacked on to the end of the url.  For an example visit http://www.gisdoctor.com/v3/arcserver_wms.html 
  
  function WMSGetTileUrl(tile, zoom) {
      var projection = window.map.getProjection();
      var zpow = Math.pow(2, zoom);
      var ul = new google.maps.Point(tile.x * 256.0 / zpow, (tile.y + 1) * 256.0 / zpow);
      var lr = new google.maps.Point((tile.x + 1) * 256.0 / zpow, (tile.y) * 256.0 / zpow);
      var ulw = projection.fromPointToLatLng(ul);
      var lrw = projection.fromPointToLatLng(lr);
      //The user will enter the address to the public WMS layer here.  The data must be in WGS84


 var baseURL = "http://10.30.59.164:8080/cgi-bin/mapserv.exe?MAP=C:/Users/moi/Documents/TRAVAUX/ms4w/apps/tutorial/htdocs/surf.map&";

      
      var version = "1.1.1";
      var request = "GetMap";

      var request = "Map";
      
      var format = "image/png"; //type of image returned 
      //The layer ID.  Can be found when using the layers properties tool in ArcMap
      var layers = "nexrad-n0r-wmst";

      var layers = "deptest";
    
      
      
      var srs = "EPSG:4326"; //projection to display. This is the projection of google map. Don't change unless you know what you are doing.
      var bbox = ulw.lng() + "," + ulw.lat() + "," + lrw.lng() + "," + lrw.lat();
 
      //Add the components of the URL together
      var width = "256";
      var height = "256";
 
      var styles = "default";
 
      var url = baseURL + "version=" + version + "&request=" + request + "&Layers=" + layers + "&Styles=" + styles + "&SRS=" + srs + "&BBOX=" + bbox + "&width=" + width + "&height=" + height + "&format=" + format + "&TRANSPARENT=TRUE";

      
      return url;
  }
 
 
 
</script> 
 
</head> 
<body onload="initialize()"> 
 
<div style ="height:25px; width:100%; background-color:black; border-bottom-style:solid; border-color:Black;padding-left:15px; padding-top:10px;"> 
    <a href="http://www.gisdoctor.com" style="text-decoration:none;"><b> 
        <span style="color:White; font-family:Arial">Return to GIS Doctor</span></b></a> 
</div> 
<div style="width:1000px; padding-left:10px; font-family:Arial"> 
<h2>MapServer WMS in Google Maps V3</h2> 
 The following map displays a Google Map and a <a href="http://mapserver.org/index.html">MapServer WMS</a> data layer.  The sample layer comes from <a href="http://mesonet.agron.iastate.edu/index.phtml/">here</a> and is a time enabled <a href="http://mesonet.agron.iastate.edu/ogc/">OGC Layer</a>.
 The code is written based on <a href="http://code.google.com/apis/maps/documentation/javascript/">Google Maps API V3</a>.  Feel free to use the code, just remember to provide a link to <a href="http://www.gisdoctor.com">GISDoctor.com</a>.
 </div> 
 <br />
<div id="map" style="position:absolute; left:10px; width:99%; height:400px"></div> 
 
  
</body> 

 

</html>

dans la chaine de caracteres nommée "url" de ma fonction "WMSGetTileUrl" , quand je remplace "request=GetMap" par "MODE=MAP", ca m'affiche bien ma carte mapserver de la France mais le probleme c'est que la France est répartie plusieurs fois sur le fond de carte googlemaps
(voir une image ici: http://www.flickr.com/photos/39689320@N … /lightbox/ )

Si je laisse "request=GetMap", rien ne s'affiche...

je suis windows 7 64bits, mapserver 5.2.0, api googlemaps v3

Merci d'avance

Dernière modification par icadedt (Thu 01 December 2011 15:04)

icadedt · Wed 30 November 2011 16:37

bon bingo j'ai trouvé,

ma source de données a été reprojeté en wgs84 (epsg 4326),

je suis passé à mapserver 3.0.3, apache sur le port 80

j'ai installé le dossier "ms4w" direct dans C:\

dans le mapfile j'ai changé le la partie OUTPUTFORMATen :

Code:

OUTPUTFORMAT
      NAME "cairopng"
      DRIVER CAIRO/PNG
      MIMETYPE "image/png"
      IMAGEMODE RGB
      EXTENSION "png"
    END

puis j'ai rajouté dans la partie METADATA de la section WEB ca:

Code:

 "ows_enable_request" "*"

voici mon mapfile en entier :

Code:

 
# Edit this file to customize for your map interface
# (Created with PyQgis MapServer Export plugin)
MAP
  NAME "QGIS-MAP"
  # Map image size
  SIZE 256 256
  UNITS meters

  EXTENT -6.260656 41.118669 11.031164 51.330374
 
  PROJECTION
    'proj=longlat'
    'ellps=WGS84'
    'towgs84=0,0,0,0,0,0,0'
    'no_defs'
  END

  # Background color for the map canvas -- change as desired
  IMAGECOLOR 255 255 255
  IMAGEQUALITY 95
  IMAGETYPE png

  OUTPUTFORMAT
      NAME "cairopng"
      DRIVER CAIRO/PNG
      MIMETYPE "image/png"
      IMAGEMODE RGB
      EXTENSION "png"
    END
  # Legend
  LEGEND
      IMAGECOLOR 255 255 255
    STATUS ON
    KEYSIZE 18 12
    LABEL
      TYPE BITMAP
      SIZE MEDIUM
      COLOR 0 0 89
    END
  END

  # Web interface definition. Only the template parameter
  # is required to display a map. See MapServer documentation
  WEB
    # Set IMAGEPATH to the path where MapServer should
    # write its output.
    IMAGEPATH '/tmp/'

    # Set IMAGEURL to the url that points to IMAGEPATH
    # as defined in your web server configuration
    IMAGEURL '/tmp/'

    # WMS server settings
    METADATA
      'ows_title'           'QGIS-MAP'
      'ows_onlineresource'  'http://10.30.59.164/cgi-bin/mapserv.exe?map=C:/ms4w/apps/surf.map'
      'ows_srs'             'EPSG:4326'
      'ows_enable_request' '*'
    END

    #Scale range at which web interface will operate
    # Template and header/footer settings
    # Only the template parameter is required to display a map. See MapServer documentation
    TEMPLATE 'fooOnlyForWMSGetFeatureInfo'
  END

  LAYER
    NAME 'deptest'
    TYPE POLYGON
    DUMP true
    TEMPLATE fooOnlyForWMSGetFeatureInfo
  EXTENT -6.260656 41.118669 11.031164 51.330374
    CONNECTIONTYPE postgis
    CONNECTION "dbname='test' user=postgres password=motdepasse  host=localhost port=5431 sslmode=disable"
    DATA 'the_geom FROM "deptest" USING UNIQUE gid USING srid=4326'
    METADATA
      'ows_title' 'deptest'
    END
    STATUS OFF
    TRANSPARENCY 100
    PROJECTION
    'proj=longlat'
    'ellps=WGS84'
    'towgs84=0,0,0,0,0,0,0'
    'no_defs'
    END
    CLASS
       NAME 'deptest' 
       STYLE
         WIDTH 0.91 
         OUTLINECOLOR 0 0 0
         COLOR 42 109 132
       END
    END
  END

END

le code de la page web devient:

Code:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<style type="text/css"> 
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
  #map_canvas { height: 100% }
</style>
<script type="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=true"> 
</script>
<script type="text/javascript"> 
    var map;

    var josefov = new google.maps.LatLng(49.3119, 16.67029);


    var josefov = new google.maps.LatLng(49, 2);

    
    
    //Define OSM as base layer in addition to the default Google layers
    var osmMapType = new google.maps.ImageMapType({
                    getTileUrl: function (coord, zoom) {
                        return "http://tile.openstreetmap.org/" +
                    zoom + "/" + coord.x + "/" + coord.y + ".png";
                    },
                    tileSize: new google.maps.Size(256, 256),
                    isPng: true,
                    alt: "OpenStreetMap",
                    name: "OSM",
                    maxZoom: 19
                });
 
   //Define custom WMS tiled layer
                var SLPLayer = new google.maps.ImageMapType({
                    getTileUrl: function(coord, zoom) {
                        var proj = map.getProjection();
                        var zfactor = Math.pow(2, zoom);
                        // get Long Lat coordinates
                        var top = proj.fromPointToLatLng(new google.maps.Point(coord.x * 256 / zfactor, coord.y * 256 / zfactor));
                        var bot = proj.fromPointToLatLng(new google.maps.Point((coord.x + 1) * 256 / zfactor, (coord.y + 1) * 256 / zfactor));

                        //corrections for the slight shift of the SLP (mapserver)
                        var deltaX = 0.0013;
                        var deltaY = 0.00058;

                        //create the Bounding box string
                        var bbox = (top.lng() + deltaX) + "," +
                                       (bot.lat() + deltaY) + "," +
                                       (bot.lng() + deltaX) + "," +
                                       (top.lat() + deltaY);

                        /*
 
                        //base WMS URL
                        var url = "http://mapserver-slp.mendelu.cz/cgi-bin/mapserv?map=/var/local/slp/krtinyWMS.map&";
                        url += "&REQUEST=GetMap"; //WMS operation
                        url += "&SERVICE=WMS";    //WMS service
                        url += "&VERSION=1.1.1";  //WMS version  
                        url += "&LAYERS=" + "typologie,hm2003"; //WMS layers
                        url += "&FORMAT=image/png" ; //WMS format
                        url += "&BGCOLOR=0xFFFFFF";  
                        url += "&TRANSPARENT=TRUE";
                        url += "&SRS=EPSG:4326";     //set WGS84 
                        url += "&BBOX=" + bbox;      // set bounding box
                        url += "&WIDTH=256";         //tile size in google
                        url += "&HEIGHT=256";
                        return url;
                        */


                        var url = "http://10.30.59.164/cgi-bin/mapserv.exe?map=C:/ms4w/apps/surf.map";
                        url += "&REQUEST=GetMap"; //WMS operation
                        url += "&SERVICE=WMS";    //WMS service
                        url += "&VERSION=1.1.1";  //WMS version
                        url += "&LAYERS=" + "deptest"; //WMS layers
                        url += "&FORMAT=image/png"; //WMS format
                        url += "&BGCOLOR=0xFFFFFF";
                        url += "&TRANSPARENT=TRUE";
                        url += "&SRS=EPSG:4326";     //set WGS84 
                        url += "&BBOX=" + bbox;      // set bounding box
                        url += "&WIDTH=256";         //tile size in google
                        url += "&HEIGHT=256";
                        
                          document.getElementById("affich").innerHTML = url;
                        
                        return url;

                      



                        // return URL for the tile

                    },
                    tileSize: new google.maps.Size(256, 256),
                    isPng: true
                });
  
                                                  
 
  
    function initialize() {
        var mapOptions = {
            zoom: 17,
            center: josefov,
            mapTypeId: 'OSM',
            mapTypeControlOptions: {
                mapTypeIds: ['OSM', google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.SATELLITE, google.maps.MapTypeId.HYBRID, google.maps.MapTypeId.TERRAIN],
                style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
            }
        };
        map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
        map.mapTypes.set('OSM', osmMapType);
        map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
        //add WMS layer
        map.overlayMapTypes.push(SLPLayer);
       
    }
 
</script>
</head>
<body onload="initialize()">
  <div id="map_canvas" style="width:100%; height:100%"></div>
  
  
  
  
  <div id="affich" > </div>
  
</body>
</html>

après toutes ces modifs , ma carte des département mapserver apparait bien et se superpose à la France de Googlemaps mais à partir d'un niveau de dézoom, la carte mapserver de la France se superpose de moins en moins à celle de googlemaps!
voici une image du phénomène: http://www.flickr.com/photos/39689320@N … /lightbox/

savez vous à quoi est dû ce décalage?

Dernière modification par icadedt (Thu 01 December 2011 15:04)

Yves · Mon 02 January 2012 22:06

Bonjour,

Il faut utiliser la projection google Mercator : EPSG:900913 pour superposer ses données avec google Map.

Y.

Communauté	Ressources	L'emploi	Le marché	L'association	Fils RSS
Forum Blogs Wiki Planet Sites amis	Agenda Biblio Fiches AMO-CNIG Paris PCGIS Téléchargements	Offres d'emploi Banque de CV Formations Démarche Métiers	Geo-Entreprises Geo-Communiqué Appels d'offres	L'association Qui sommes-nous ? Nous aider Bienfaiteurs Partenaires Historique Statuts	Tout le site Job Géomatique Services GeoBlogs ...	Faire un don Mentions légales

Le portail francophone de la géomatique

Annonce

#1 Mon 28 November 2011 15:03

WMS MAPSERVER dans client carto googlemaps

#2 Tue 29 November 2011 17:07

Re: WMS MAPSERVER dans client carto googlemaps

Code:

Code:

#3 Wed 30 November 2011 16:37

Re: WMS MAPSERVER dans client carto googlemaps

Code:

Code:

Code:

Code:

#4 Mon 02 January 2012 22:06

Re: WMS MAPSERVER dans client carto googlemaps

Pied de page des forums