效果图
第一步，配置自己的mapfile，在要查询的图层LAYER对象内加上HEADER，TEMPLATE，FOOTER三个参数，同时，TEMPLATE fooOnlyForWMSGetFeatureInfo前加#屏蔽（切记）。
我的一个例子
LAYER
NAME 'Basin'
TYPE POLYGON
DUMP true
HEADER "header.html"
TEMPLATE "content_ChinaData.html"
FOOTER "footer.html"
#TEMPLATE fooOnlyForWMSGetFeatureInfo
EXTENT 72.159645 12.440230 136.365480 59.396737
DATA 'C:ms4wApachehtdocsDATAChinaData.shp'
METADATA
'ows_title' 'ChinaData'
'ows_srs' 'EPSG:4326'
"gml_include_items" "all"
"gml_featureid" "id" #必须指定id
'queryable' 'true'
END
STATUS OFF
TRANSPARENCY 100
PROJECTION
'proj=longlat'
'datum=WGS84'
'no_defs'
END
CLASS
NAME 'ChinaData'
STYLE
WIDTH 1
OUTLINECOLOR 0 0 0
COLOR 255 255 255
END
END
END
2、配置"header.html"、"content_Basin.html"、"footer.html"三个文件，这三个文件各自不是一个完整的网页，组合在一起才是，如果要查询的图层不止一个
可以多做几个"content_Basin.html"的网页，但是"header.html"、"footer.html"各自只要一个就行了，每个网页第一句是<!-- MapServer Template -->（必须的）
我的实例
header.html
<!-- MapServer Template --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " http://www.w3.org/TR/html4/transitional.dtd"> <html> <head> <!-- enforce the client to display result html as UTF-8 encoding --> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"></meta> <title>GetFeatureInfo Response</title> <style type="text/css"> table.featureInfo, table.featureInfo td, table.featureInfo th { border:1px solid #ddd; border-collapse:collapse; margin:0; padding:0; font-size: 90%; padding:.4em .4em; } table.featureInfo th { padding:.2em .2em; font-weight:bold; background:#eee; } table.featureInfo td{ background:#fff; } table.featureInfo tr.odd td{ background:#eee; } table.featureInfo caption{ text-align:left; font-size:100%; font-weight:bold; padding:.2em .2em; } </style> </head> <body> <table class="featureInfo">
content_Basin.html
<!-- MapServer Template --> <caption class="featureInfo">图层：盆地</caption> <tbody> <th>名称</th> <th>面积</th> <tr > <td >[item name="Name" format=$value escape=none]</td> <td>[item name="Area" precision="1" format=$value escape=none]</td> </tr>
footer.html
<!-- MapServer Template --> </tbody> </table> <br/> </body> </html>
3、点击功能的实现
在代码中加入
info = new OpenLayers.Control.WMSGetFeatureInfo({ url: 'http://127.0.0.1/cgi-bin/mapserv.exe?', title: 'Identify features by clicking', queryVisible: true, infoFormat:'text/html',///nimeide queryVisible:true, layers:[Basint,AreaOfReserch,Oilfield], 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();