对于一张图片地图，如果想实现点击地图上一点，地图在相应位置弹出小窗口，显示所点区域的信息这样的功能。要首先获取鼠标点击的坐标，然后在数据库中判断该点在哪个要素的范围内，最后返回包含该点的要素信息。然而我们既然懂这个原理，就可以先看看有没有实现，没必要去重新造轮子。
MapServer 就已经实现了该服务，因为这是 WMS 的 GetFeatureInfo 操作，MapServer 支持 WMS、WFS等标准，我们只要配置 MapServer 支持该操作即可，不必自己去实现了，配置与发布方法依然是配置对应地图服务的 mapfile 文件。
刚刚接触 MapServer 的朋友，可能不知道 mapfile 中还有 模板（templating）这个参数，而这个参数就负责配置 WMS GetFeatureInfo 操作的返回结果内容和格式。
注（术语）：
WMS - Web Map Service（网络地图服务）
调用实现效果
我们要实现的效果就是当用户点击地图上某一块地物的时候，从服务器返回对应地物的属性信息，并以弹出框的形式显示，如下图所示。弹出框内容及其样式并不是我们讲的重点，所以文章中不会涉及 OpenLayers 弹窗，以及如何做出如图弹出框的样式。需要了解的可以看下我的 OpenLayers 3专栏 和相应的 HTML、CSS 知识。这里我们主要讲其后端的通信与处理过程。
图1 GetFeatureInfo 实现效果图
TEMPLATE 参数
在 上一篇关于 MapServer 的文章中，我们介绍了 mapfile 的知识，并以例子的形式发布了 WMS（网络地图服务） ，WMS包含三个基本服务，GetCapability（获取服务的元数据）、GetMap（获取图片格式的地图） 和 GetFeatureInfo（获取要素的信息），其中 GetCapability 和 GetMap 是一个WMS服务必须具备的能力，GetFeatureInfo 是可选的，上一篇中的 mapfile 配置中的 WEB 对象中有一行配置是 "wms_enable_request" "*" ，这行配置表示已经告诉 MapServer 开启了 WMS 所有服务，包括 GetFeatureInfo，但是这样配置并不能响应 GetFeatureInfo 的请求，必须配置一些额外的参数，就是本篇要讲的 TEMPLATE 参数。
如何配置
下面是配置好 WMS GetFeatureInfo 操作的 mapfile，我们来分析一下各个配置的意义，该 mapfile 基于上一篇文章，添加了几个参数，所以不涉及 GetFeatureInfo 的内容我这里就不涉及了，主要讲 GetFeatureInfo 相关的配置。
MAP
NAME "test"
PROJECTION
"init=epsg:3857"
END #PROJECTION END
WEB
METADATA
"wms_title" "test"
"wms_version" "1.3.0"
"wms_onlineresource" "http://xx.xx.xx.xx/cgi-bin/mapserv.exe?"
"wms_enable_request" "*"
"wms_srs" "EPSG:3857"
"wms_feature_info_mime_type" "text/html"
END # MAP METADATA
END # WEB
LAYER
NAME "test_layer"
TYPE POLYGON
METADATA
"wms_title" "test_layer"
"wms_srs" "EPSG:3857"
END # LAYER METADATA
CONNECTIONTYPE postgis
CONNECTION "host=xx.xx.xx.xx port=xxxx dbname='xxxx' user=xxxx password=xxxx"
DATA "geom from xxx using unique gid using srid=3857"
TEMPLATE "template.html"
CLASS
NAME "polygon_style"
STYLE
COLOR "#5eff4d"
OUTLINECOLOR "#ff4a2e"
WIDTH 1
END # STYLE END
END # CLASS END
END # LAYER
END # MAP
看过上一篇文章的可能已经注意到，WEB 对象和 LAYER 对象都发生了变化。WEB对象增加了 "wms_feature_info_mime_type" "text/html"，从字面意思可以看出该参数主要配置 getFeatureInfo 操作返回的结果格式类型，这里返回 html 格式；另外 LAYER 对象多出了 TEMPLATE 参数，这个参数配置返回的 html 内容，参数值是一个 url 路径，指定 html 文件所在位置，html 文件与标准的 html 只有一点不同，如下：
TEMPLATE
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Mapserver template testtitle>
head>
<body>
<table id="feature_info" class="table table-bordered" style="font-size:14px; width:96%; margin:0 auto;">
<tr>
<td class="text-center"><label>gid :label>td>
<td id="gid" class="text-center" style="height:32px; text-align:left;"><div style="padding-left:13px;">[gid]div>td>
tr>
<tr>
<td class="text-center"><label>name :label>td>
<td class="text-center"><input type="text" readonly="readonly" class="form-control min-input custom-form-control" value="[name]"/>td>
tr>
<tr>
<td class="text-center"><label>landuse :label>td>
<td class="text-center"><input type="text" readonly="readonly" class="form-control min-input custom-form-control" value="[landuse]"/>td>
tr>
<tr>
<td class="text-center"><label>way_area :label>td>
<td class="text-center"><input type="text" readonly="readonly" class="form-control min-input custom-form-control" value="[way_area]"/>td>
tr>
table>
body>
html>
需要指出的是 TEMPLATE 参数指定的 html 文件在首行必须包含 [ ] 括起来的，内容是字段名，如数据库中的字段名有个 id 字段，要输出该字段就直接书写 [id] 即可，MapServer 会输出实际该字段的值取代该内容。
如何使用
经过以上的配置，我们已经让 MapServer 可以响应 GetFeatureInfo 服务了，WMS 是基于 HTTP 的，所以其调用方式是HTTP GET 方式（url 传值），一个实例 url 如下：
http://xx.xx.xx.xx/cgi-bin/mapserv.exe?SERVICE=WMS& VERSION=1.3.0& REQUEST=GetFeatureInfo& FORMAT=image/png&TRANSPARENT=true&QUERY_LAYERS=postgis_beijing&map=xxx.map& LAYERS=postgis_beijing&BBOX=12969834.959428705,4869955.946105149,12971057.951881269,4871178.938557711&CRS=EPSG:3857& INFO_FORMAT=text/html& I=97& J=158& hljs-number">256& hljs-number">256
不要被这个url 吓到，它很长，确实！这是请求 WMS 标准的 GetFeatureInfo 规定的参数，我通常也不会自己手动构造它，你可以使用 OpenLayers 等工具构造它。调用后，MapServer 将以上的 TEMPLATE 配置的字段用实际内容（数据库中的内容）代替后，输出的结果如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Mapserver template testtitle>
head>
<body>
<table id="feature_info" class="table table-bordered" style="font-size:14px; width:96%; margin:0 auto;">
<tr>
<td class="text-center"><label>gid :label>td>
<td id="gid" class="text-center" style="height:32px; text-align:left;"><div style="padding-left:13px;">23412div>td>
tr>
<tr>
<td class="text-center"><label>name :label>td>
<td class="text-center"><input type="text" readonly="readonly" class="form-control min-input custom-form-control" value="Beijing Riviera"/>td>
tr>
<tr>
<td class="text-center"><label>landuse :label>td>
<td class="text-center"><input type="text" readonly="readonly" class="form-control min-input custom-form-control" value="residential"/>td>
tr>
<tr>
<td class="text-center"><label>way_area :label>td>
<td class="text-center"><input type="text" readonly="readonly" class="form-control min-input custom-form-control" value="0.0000360000"/>td>
tr>
table>
body>
html>
浏览器中的渲染结果如下：
图2 返回的网页
从结果可以看出，MapServer 是将 TEMPLATE 配置参数的 html 文件替换相应的值后，然后原样返回。
总结
我们主要讲了 WMS 的 GetFeatureInfo 操作，并详述了在 MapServer 中怎么配置这个服务，这个服务的主要用处是当点击图片地图时候，可以获取相应的要素在数据库中的信息，如果没有这个服务，我们可能要自己做判断，就像文章开头所述的方法那样，或者是将数据库中的数据在客户端渲染成矢量地图，并为每个矢量要素绑定点击事件，这样做，在数据量比较小时没有太大劣势，但是一旦数据量增大，传输时间会增加，客户端渲染也需要时间，这样会影响体验。当然我们可以简化矢量数据的数据量，但这会影响数据的精度。
好了，就说到这里，有什么问题，可以在评论区留言。
![[译]技术公司十年经验的职场生涯回顾](https://img8.php1.cn/3cdc5/24912/711/b6574f3292f9dc00.png)
京公网安备 11010802041100号