天天看点

MapServer 之 发布 WMS GetFeatureInfo 服务调用实现效果TEMPLATE 参数如何配置如何使用总结

      对于一张图片地图,如果想实现点击地图上一点,地图在相应位置弹出小窗口,显示所点区域的信息这样的功能。要首先获取鼠标点击的坐标,然后在数据库中判断该点在哪个要素的范围内,最后返回包含该点的要素信息。然而我们既然懂这个原理,就可以先看看有没有实现,没必要去重新造轮子。

      MapServer 就已经实现了该服务,因为这是 WMS 的 GetFeatureInfo 操作,MapServer 支持 WMS、WFS等标准,我们只要配置 MapServer 支持该操作即可,不必自己去实现了,配置与发布方法依然是配置对应地图服务的 mapfile 文件。

      刚刚接触 MapServer 的朋友,可能不知道 mapfile 中还有 模板(templating)这个参数,而这个参数就负责配置 WMS GetFeatureInfo 操作的返回结果内容和格式。

注(术语):

    WMS - Web Map Service(网络地图服务)

调用实现效果

      我们要实现的效果就是当用户点击地图上某一块地物的时候,从服务器返回对应地物的属性信息,并以弹出框的形式显示,如下图所示。弹出框内容及其样式并不是我们讲的重点,所以文章中不会涉及 OpenLayers 弹窗,以及如何做出如图弹出框的样式。需要了解的可以看下我的 OpenLayers 3专栏 和相应的 HTML、CSS 知识。这里我们主要讲其后端的通信与处理过程。

MapServer 之 发布 WMS GetFeatureInfo 服务调用实现效果TEMPLATE 参数如何配置如何使用总结

图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 
            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

<!-- MapServer Template -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/transitional.dtd">

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Mapserver template test</title>
</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 文件在首行必须包含

<!-- MapServer Template -->

,这会告诉 MapServer 填充需要填充的值(这是与普通 html 唯一的不同),需要填充的值是以中括号

[ ]

括起来的,内容是字段名,如数据库中的字段名有个 id 字段,要输出该字段就直接书写 [id] 即可,MapServer 会输出实际该字段的值取代该内容。

如何使用

      经过以上的配置,我们已经让 MapServer 可以响应 GetFeatureInfo 服务了,WMS 是基于 HTTP 的,所以其调用方式是HTTP GET 方式(url 传值),一个实例 url 如下:

http://xx.xx.xx.xx/cgi-bin/mapserv.exe?SERVICE=WMS& VERSION=& REQUEST=GetFeatureInfo& FORMAT=image/png&TRANSPARENT=true&QUERY_LAYERS=postgis_beijing&map=xxx.map& LAYERS=postgis_beijing&BBOX=,,,&CRS=EPSG:& INFO_FORMAT=text/html& I=& J=& WIDTH=& HEIGHT=
           

      不要被这个url 吓到,它很长,确实!这是请求 WMS 标准的 GetFeatureInfo 规定的参数,我通常也不会自己手动构造它,你可以使用 OpenLayers 等工具构造它。调用后,MapServer 将以上的 TEMPLATE 配置的字段用实际内容(数据库中的内容)代替后,输出的结果如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/transitional.dtd">

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Mapserver template test</title>
</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;">23412</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="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>
           

浏览器中的渲染结果如下:

MapServer 之 发布 WMS GetFeatureInfo 服务调用实现效果TEMPLATE 参数如何配置如何使用总结

图2 返回的网页

从结果可以看出,MapServer 是将 TEMPLATE 配置参数的 html 文件替换相应的值后,然后原样返回。

总结

      我们主要讲了 WMS 的 GetFeatureInfo 操作,并详述了在 MapServer 中怎么配置这个服务,这个服务的主要用处是当点击图片地图时候,可以获取相应的要素在数据库中的信息,如果没有这个服务,我们可能要自己做判断,就像文章开头所述的方法那样,或者是将数据库中的数据在客户端渲染成矢量地图,并为每个矢量要素绑定点击事件,这样做,在数据量比较小时没有太大劣势,但是一旦数据量增大,传输时间会增加,客户端渲染也需要时间,这样会影响体验。当然我们可以简化矢量数据的数据量,但这会影响数据的精度。

好了,就说到这里,有什么问题,可以在评论区留言。

继续阅读