2

I'm making a small project but I encounter some problems. Let me explain that : Having generated mapfile with mapserver and they are viewable by the OpenLayers interface, I would like to make me GetFeatureInfo on features.

Subsite only problem is that I can not select the correct coordinates of a feature x and y (i and j for the url) because the x and y coordinates correspond to the "frame" OpenLayers and not of the layer displayed (problem with zooms, good feature pointing, etc.).

http://xxx/cgi-bin/mapserv.exe?map=C:/ms4w/Apache/htdocs/mapfiles/picc.map&SERVICE=WMS&Version=1.3.0&REQUEST=GetFeatureInfo&bbox=217711.311089,129521.320380,230314.065583,139320.681620&CRS=EPSG:31370&query_layers=arc&layers=arc,polygone&info_format=mime&i=913&j=162&WIDTH=1000&height=1000

img : https://i.stack.imgur.com/vNYm4.png

Do you have any idea to solve my problem?

Attached my html and mapfile code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="WMS" content="WMS">
<meta name="MA2 Géomatique">
<meta name="Copyright" content="Copyright (c) 2013 MA2 Géomatique, Ulg">
<title>WMS </title>
<script src="xxx/OpenLayers-2.12/OpenLayers-2.12/lib/OpenLayers.js"></script>
<link rel="stylesheet" href="xxx/OpenLayers-2.12/OpenLayers-2.12/theme/default/style.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
<script src="xxx/OpenLayers-2.12/GeoExt/lib/GeoExt.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="xxx/OpenLayers-2.12/GeoExt/resources/css/popup.css">
<script>

OpenLayers.ProxyHost = "C:/ms4w/Apache/cgi-bin/proxy.cgi?url=xxx";
    var map, info/*, mybounds*/;

    function init(){
        map = new OpenLayers.Map("map",
        {
            projection: new OpenLayers.Projection("EPSG:31370"),
               
                units : "m",
                numZoomLevels: 7,
                maxResolution: "auto",
                maxExtent: new OpenLayers.Bounds(217711.311089,129521.320380,230314.065583,139320.681620),   
                controls: [
                    new OpenLayers.Control.Navigation(),
                    new OpenLayers.Control.PanZoomBar(),
                    new OpenLayers.Control.LayerSwitcher({'ascending':false}),                       
                    new OpenLayers.Control.ScaleLine(),
                    new OpenLayers.Control.MousePosition(),
                    //new OpenLayers.Control.OverviewMap(),
                    new OpenLayers.Control.KeyboardDefaults()
                
                ],
                 displayProjection: new OpenLayers.Projection("EPSG:31370"),
        }
        );          
        
        var layer0 = new OpenLayers.Layer("Fond de carte",{isBaseLayer: true});
        map.addLayer(layer0);
        map.zoomToExtent(/*mybounds*/);
        map.addControl( new OpenLayers.Control.LayerSwitcher() );
                
        var layer = new OpenLayers.Layer.WMS( "Routes_PICC", "xxx/cgi-bin/mapserv.exe", {map: 'C:/ms4w/Apache/htdocs/mapfiles/picc.map', layers: "arc", format: 'image/png', transparent : true, srs: 'EPSG:31370', width: '1000', height: '1000'},{isBaseLayer: false});
        map.addLayer(layer);
        //mybounds = new OpenLayers.Bounds(18420.768546,14886.191509,252429.627441,315840.113485);
        map.zoomToExtent(/*mybounds*/);
        map.addControl( new OpenLayers.Control.LayerSwitcher() );
        
        var layer2 = new OpenLayers.Layer.WMS( "Batiments_PICC", "xxx/cgi-bin/mapserv.exe", {map: 'C:/ms4w/Apache/htdocs/mapfiles/picc.map', layers: "polygone", format: 'image/png', transparent : true, srs: 'EPSG:31370', width: '1000', height: '1000'},{isBaseLayer: false});
        map.addLayer(layer2);
        //mybounds = new OpenLayers.Bounds(18420.768546,14886.191509,252429.627441,315840.113485);
        map.zoomToExtent(/*mybounds*/);
        map.addControl( new OpenLayers.Control.LayerSwitcher() );
        map.zoomTo(0);
        
        map.events.register("mousemove", map, function(e) {
            var position = this.events.getMousePosition(e);
            OpenLayers.Util.getElement("coords").innerHTML = position;
        });
    
        info = new OpenLayers.Control.WMSGetFeatureInfo({
            url: 'xxx/cgi-bin/mapserv.exe?map=C:/ms4w/Apache/htdocs/mapfiles/picc.map&service=wms&version=1.3.0', 
            title: 'Identify features by clicking',
            queryVisible: true,
            eventListeners: {
                getfeatureinfo: function(event) {
                    map.addPopup(new OpenLayers.Popup.FramedCloud(
                        "chicken", 
                        map.getLonLatFromPixel(event.xy),
                        null,
                        event.text,
                        null,
                        true
                ));
            }
        }
    });
    map.addControl(info);
    info.activate();
    
    
}

    
    
</script>
    <style type="text/css" media="screen">

    header, footer, section { margin: 0; padding: 0; }
    header, footer, aside, nav, article, section    { display: block; }
    body            { color: #333; font: 14px Helvetica, Arial, sans-serif; line-height: 18px; }
    a               { color: #363636; }
    p               { margin: 0 0 18px; }
    #container      { width: 1024px; margin: 0 auto; }
    #map{width: 1000px; height: 1000px; border: 2px solid #666; margin: 0 auto;}
    
    /* Header */
    header          { background: #ffffff; border-bottom: 2px solid #aaa; font-size:26px }
    header h1   { color: #363636; margin: 0 0 3px; padding: 24px 18px 0; }
    
    /* Content Positioning and Size */
    nav     { float: right; width: 350px; }
    #content        {  }
    #extra          { float: left; width: 350px; }      /* Footer */
    footer          { background: #666; border-bottom: 2px solid #666; clear: both; }
    footer  p       { color: #ccc; margin: 0; padding: 0 18px 10px; }
    
</style>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->


</head>
<body bgcolor="#ffffff" onload="init()">
<a href="../index.php"><img src="../button_accueil.png"  alt="Accueil" align="right" Style="margin-right:10px; margin-top:3px"></a>
<header>
<h1 align="center">WMS</h1>
</br>   
</header>
<h2 style="Font: 25px Helvetica; font-weight:bold; Color: #363636; margin-left:10px">PICC</h2>
</br><div id="map"></div>
<div id="coords" style="height: 1.5em;"></div>
</br>
<p align="left" Style="Font: 20px Helvetica; font-weight:bold; Color: #363636; margin-left:10px;">URL UTILES :</p>
<TABLE style="margin:0 auto; border:3px solid #666" >     
    <TR>
        <TH align=left>URL pour accéder au WMS dans une application client SIG :</TH>
        <TD><a>xxx/cgi-bin/mapserv.exe?map=C:/ms4w/Apache/htdocs/mapfiles/picc.map</a></TD>
    </TR>
    <TR>    
        <TH align=left>URL pour accéder aux métadonnées du MapFile du PICC - routes et bâtiments (XML) :</TH>
        <TD><a href="xxx/cgi-bin/mapserv.exe?map=C:/ms4w/Apache/htdocs/mapfiles/picc.map&SERVICE=WMS&REQUEST=GetCapabilities">xxx/cgi-bin/mapserv.exe?map=C:/ms4w/Apache/htdocs/mapfiles/picc.map&SERVICE=WMS&REQUEST=GetCapabilities</a></TD>
    </TR>
    <TR>    
        <TH align=left>URL pour accéder aux métadonnées du MapFile du MNT (XML) :</TH>
        <TD><a href="xxx/cgi-bin/mapserv.exe?map=C:/ms4w/Apache/htdocs/mapfiles/mnt.map&SERVICE=WMS&REQUEST=GetCapabilities">xxx/cgi-bin/mapserv.exe?map=C:/ms4w/Apache/htdocs/mapfiles/mnt.map&SERVICE=WMS&REQUEST=GetCapabilities</a></TD>
    </TR>
</TABLE> 
<section id="extra">
    </section>
    <br/>
    <footer>
        <br/>
        <p>xxx</p>
    </footer>
</div>
</body>
</meta>
</html>

Mapfile :

OUTPUTFORMAT
NAME agg
DRIVER AGG/PNG
IMAGEMODE RGB
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'           'WMS-PICC'
  'ows_onlineresource'  'http://xx/cgi-bin/mapserv.exe?map=C:/ms4w/Apache/htdocs/mapfiles/picc.map'
  'ows_srs'             'EPSG:31370'
  "wms_enable_request" "*"
  "wms_include_items" "all"
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 'arc'
TYPE LINE
DUMP true
TEMPLATE fooOnlyForWMSGetFeatureInfo
EXTENT 217711.311089 129521.320380 230314.065583 139320.681620
CONNECTIONTYPE postgis
CONNECTION "dbname='projetsig' host=xx port=5432 user='xx' password='xx' sslmode=disable"
DATA 'geom FROM "arc" USING UNIQUE gid USING srid=31370'
FILTER ( "rue" IS NOT NULL )
METADATA
  'ows_title' 'arc'
  "wms_enable_request" "*"
  "wms_inlude_items" "all"
  "ows_featureinfo_textplain_include_items" "*"
END
STATUS OFF
TRANSPARENCY 100
PROJECTION
'proj=lcc'
'lat_1=51.16666723333333'
'lat_2=49.8333339'
'lat_0=90'
'lon_0=4.367486666666666'
'x_0=150000.013'
'y_0=5400088.438'
'ellps=intl'
'towgs84=-106.869,52.2978,-103.724,0.3366,-0.457,1.8422,-1.2747'
'units=m'
'no_defs'
END
CLASS
   NAME 'arc' 
   STYLE
     WIDTH 0.91 
     COLOR 54 54 54
   END
END
END

LAYER
NAME 'polygone'
TYPE POLYGON
DUMP true
TEMPLATE fooOnlyForWMSGetFeatureInfo
EXTENT 217711.311089 129521.320380 230314.065583 139320.681620
CONNECTIONTYPE postgis
CONNECTION "dbname='projetsig' host=xx port=5432 user='xxx' password='xxx' sslmode=disable"
DATA 'geom FROM "polygone" USING UNIQUE gid USING srid=31370'
METADATA
  'ows_title' 'polygone'
  "wms_enable_request" "*"
  "wms_include_items" "all"
END
STATUS OFF
TRANSPARENCY 100
PROJECTION
'proj=lcc'
'lat_1=51.16666723333333'
'lat_2=49.8333339'
'lat_0=90'
'lon_0=4.367486666666666'
'x_0=150000.013'
'y_0=5400088.438'
'ellps=intl'
'towgs84=-106.869,52.2978,-103.724,0.3366,-0.457,1.8422,-1.2747'
'units=m'
'no_defs'
END
CLASS
   NAME 'polygone' 
   STYLE
     WIDTH 0.91 
     OUTLINECOLOR 0 0 0
     COLOR 109 188 214
   END
END
END

END
0

2 Answers 2

1

Read about WMSGetFeatureInfo Control and its getfeatureinfo events:

The event object has a text property with the body of the response (String), a features property with an array of the parsed features, an xy property with the position of the mouse click or hover event that triggered the request[..].

See also documentation of the OpenLayers.Feature class.

You do not want the image-coordinates of the WMS-Image, but the world-coordinates where you clicked, right? So instead of

event.xy 

try this:

event.features[0].lonlat

which returns you an OpenLayer.LonLat object. Of cause, be careful to check the cases where the array is empty or contains more than one feature.

Update: Hope I get you right now: The i/j in the lower-left corner comes from the mousemove event. You have to convert these viewport coordinates into LonLat:

   map.events.register("mousemove", map, function(e) {
        var position = e.map.getLonLatFromViewPortPx(e.xy);
        OpenLayers.Util.getElement("coords").innerHTML = position;
    });

This has nothing todo with GetFeatureInfo though.

0
0

After reading your problem, I'm not sure if it's the same problem I had some time ago. If so, it means that your getfeatureinfo tool (eg. bbox) is getting the coordinates of the basemap. In my case, I have google maps (900913) and my mapfile layers were above (in 4326). So, my getfeatureinfo results always returned in meters (ie. 900913), rather than decimal degrees (ie. 4326).

I found that adapting the OL class, I could solve the problem. Here you can find my post.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.