OpenLayers 3+Geoserver+PostGIS实现点击查询

WebGIS开发中，点击查询是最经常使用的一种查询方式，在ArcGIS api 中。这样的查询叫IdentifyTask，主要作用是前台提交參数。交ArcServer查询分析返回。

本文从开源框架的角度。从前台到服务端到数据库等多个角度，多种方式实现点击查询。

干货例如以下：

---

1.1 Select控制器

对于矢量数据，Ol3中的官网demo提供了一个Select控件，实现鼠标的选择查询。代码例如以下：

//定义select控制器
var select= new ol.interaction.Select();
map.addInteraction(select);//map载入该控件。默认是激活可用的
select.on('select', function(e) {
     console.log(e.selected);  //打印已选择的Feature
});

详细Example參考：http://openlayers.org/en/v3.14.2/examples/select-features.html?q=Select

1.2 map的click事件

该方法，通过鼠标点击的坐标，与当前矢量图层做相交分析查询。得到查询的要素及其所属的Layer对象

 //地图单机事件
    map.on('singleclick',mapClick);

    function mapClick(e){
        var pixel = map.getEventPixel(e.originalEvent);
        var featureInfo = map.forEachFeatureAtPixel(pixel,
                function (feature, layer) {
                    return {feature:feature,layer:layer};
                });
        if (featureInfo!==undefined&&featureInfo!==null
        &&featureInfo.layer!==null)
        {
            console.log('打印选择要素');
            console.log(featureInfo .feature);
            console.log('打印选择要素所属Layer');
            console.log(featureInfo .layer);
        }
    }

1.3 WMS图层的GetFeatureInfo

对于矢量图层，我们能够通过第一，另外一种方法实现点击查询。

可是。非常多时候我们底图是wms服务，这时候我们能够通过wms协议的GetFeatureInfo实现点点选查询。

//模拟查询的wms图层名称比方是wmsLayer
//该wmsLayer的数据源是墨卡托的3857举例
map.on('click',mapClick);
function mapClick(evt){
    var viewResolution = map.getView().getResolution();

    var url = wmsLayer.getSource().getGetFeatureInfoUrl(
          evt.coordinate, viewResolution, 'EPSG:3857',
          {
              'INFO_FORMAT': 'text/javascript',//geoserver支持jsonp才干输出为jsonp的格式
              'FEATURE_COUNT': 50     //点击查询能返回的数量上限
          });
      $.ajax({
            type: 'GET',
            url:url,
            dataType: 'jsonp',
            jsonp:'format_options',
            jsonpCallback:"callback:success_jsonpCallback"
      });
}
//回调函数接收查询结果
 var geojsonFormat=new ol.format.GeoJSON({defaultDataProjection:"EPSG:3857"});
function success_jsonpCallback(res)
{
     var features=geojsonFormat.readFeatures(res);
     console.log('点击查询返回的结果例如以下：');
     console.log(features);
}

1.4 通过Geoserver的wfs查询

wfs能够通过Filter提交条件或者图形进行属性查询或者空间查询，本段用干货来表达怎样使用wfs查询。

map.on('click',mapClick);
//点击地图查询
function mapClick(evt)
{
    var coor=evt.coordinate;
    coor=coor.join(',');
    //注意这里直接将点坐标提交，与图层做intersrct分析。对于面图层是没关系的。如果是查询，点或者线图形，一定要将coor先设置一个容差，经行buffer之后的图形。再去与图层叠加分析。不设置容差差点儿就找不到了
    //图层的图形字段是geom。不同图层的图形字段都要自己先看下自己的，有的是the_geom。有的是shape等等，详细分析就可以。
        var FILTER='<Filter xmlns="http://www.opengis.net/ogc" xmlns:gml="http://www.opengis.net/gml"><Intersects><PropertyName>geom</PropertyName><gml:Point><gml:coordinates>'+coor+'</gml:coordinates></gml:Point>     </Intersects></Filter>';

    getFeature({
        typename:'road:road_grid',//查询的服务图层名称
        filter:FILTER,//查询条件
        callback:'getIdentifyroadGrid'//查询的回调函数
    });
}
 var geojsonFormat=new ol.format.GeoJSON({defaultDataProjection:"EPSG:3857"});
function getIdentifyroadGrid(res)
{
     var features=geojsonFormat.readFeatures(res);
     console.log('点击查询返回的结果例如以下：');
     console.log(features);
}

//请求wfs数据
function getFeature(options)
{
    $.ajax(gisserverhost+'geoserver/wfs',{
        type: 'GET',
        data: {
            service: 'WFS',
            version: '1.1.0',
            request: 'GetFeature',
            typename: options.typename,
            srsname: options.srid,
            outputFormat: 'text/javascript',
            viewparams:options.viewparams,
            bbox:(options.extent===undefined)?undefined:options.extent.join(',') +  ','+options.srid,
            filter:options.filter
        },
        dataType: 'jsonp',
        jsonpCallback:'callback:'+options.callback,
        jsonp:'format_options'
    });

}

1.5 通过PostGIS实现点击查询

pg的方法真要用起来应该是最简单的。就是将点击的地理坐标发送到后台提交数据库运行下。

//其它省略。如果x,y是前台点击地图获取的坐标，坐标系如果仅仅3857。
//这里如果后台获取了參数拼接sql提交数据库
运行sql例如以下: select * from t where ST_Intersect(t.geom,ST_GeomfromText('Point(x y)',3857));

完成。

总结

触类旁通，融会贯通，一个问题的解决一定有非常多方式，并不是“自古华山一条路”。当然，不同的路的目的同样，风景当然是各异。

我们已经起码能使用5种方法去获取点击查询的结果。那么一般人就会疑问，5种方法到底谁好谁坏了？ 事实上方法没有好坏，仅仅有是否合适。

1 第一种，另外一种方法：矢量数据。一定要加到map的client，才干使用，如果是wms图层就不能用了。
2 第三种方法：wms图层，这时候前两种矢量方式没法处理，第三种方法就能够解决问题。

3 第四种方法：一二三不管矢量还是wms。都是要载入到client才干使用，但有时候因需求不同导致的，Geoserver公布的图层不载入到client，那么就都不能使用了。但仅仅要被公布了。通过wfs的url请求就一定能查询到结果。即使这个查询对象不在client而在服务端。
4 第五种方法：与第四种方法一样。由于业务需求不同导致，有时数据连公布都没公布，仅仅停留在数据库中。而要求能够查询，这时候第五个方法就可以。当然数据库中的方法，一般用在大数据量，复杂事务查询中使用较好。

单单一个点击查询使用有点牛刀杀鸡。

关于Ol3+GeoServer+PostGIS框架交流请进入qq群：445307545
关于Ol3交流请进入qq群：274788071
有偿GIS技术指导请联系：674834420