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'  });}