mapserver+openlayers实现左键点击查询

效果图

第一步，配置自己的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:\ms4w\Apache\htdocs\DATA\ChinaData.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"各自只要一个就行了，每个网页第一句是（必须的）

我的实例

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();

posted on 2013-11-21 09:39 jin_qi_er 阅读(1038) 评论(0) 编辑收藏举报