使用OPENLAYERS3實(shí)現(xiàn)點(diǎn)選的方法

//定義select控制器
var select= new ol.interaction.Select();
map.addInteraction(select);//map加載該控件，默認(rèn)是激活可用的
select.on('select', function(e) {
   console.log(e.selected); //打印已選擇的Feature
});

//地圖單機(jī)事件
  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);
    }
  }

//模擬查詢的wms圖層名稱比如是wmsLayer
//該wmsLayer的數(shù)據(jù)源是墨卡托的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   //點(diǎn)擊查詢能返回的數(shù)量上限
     });
   $.ajax({
      type: 'GET',
      url:url,
      dataType: 'jsonp',
      jsonp:'format_options',
      jsonpCallback:"callback:success_jsonpCallback"
   });
}
//回調(diào)函數(shù)接收查詢結(jié)果
 var geojsonFormat=new ol.format.GeoJSON({defaultDataProjection:"EPSG:3857"});
function success_jsonpCallback(res)
{
   var features=geojsonFormat.readFeatures(res);
   console.log('點(diǎn)擊查詢返回的結(jié)果如下：');
   console.log(features);
}

map.on('click',mapClick);
//點(diǎn)擊地圖查詢
function mapClick(evt)
{
  var coor=evt.coordinate;
  coor=coor.join(',');
  //注意這里直接將點(diǎn)坐標(biāo)提交，與圖層做intersrct分析，對于面圖層是沒關(guān)系的。如果是查詢，點(diǎn)或者線圖形，一定要將coor先設(shè)置一個(gè)容差，經(jīng)行buffer之后的圖形，再去與圖層疊加分析。不設(shè)置容差幾乎就找不到了
  //圖層的圖形字段是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',//查詢的服務(wù)圖層名稱
    filter:FILTER,//查詢條件
    callback:'getIdentifyroadGrid'//查詢的回調(diào)函數(shù)
  });
}
 var geojsonFormat=new ol.format.GeoJSON({defaultDataProjection:"EPSG:3857"});
function getIdentifyroadGrid(res)
{
   var features=geojsonFormat.readFeatures(res);
   console.log('點(diǎn)擊查詢返回的結(jié)果如下：');
   console.log(features);
}

//請求wfs數(shù)據(jù)
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'
  });

}

//其他省略，假設(shè)x,y是前臺(tái)點(diǎn)擊地圖獲取的坐標(biāo)，坐標(biāo)系假設(shè)只3857。
//這里假設(shè)后臺(tái)獲取了參數(shù)拼接sql提交數(shù)據(jù)庫