OPENLAYERS3實現點選的方法有哪些？

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

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=&#39;<Filter xmlns="http://www.opengis.net/ogc" xmlns:gml="http://www.opengis.net/gml"><Intersects><PropertyName>geom</PropertyName><gml:Point><gml:coordinates>&#39;+coor+&#39;</gml:coordinates></gml:Point>   </Intersects></Filter>&#39;;

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

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

}

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的客戶端，才能使用，如果是wms圖層就不能用了。
2 第三種方法：wms圖層，這時候前兩種向量方式沒法處理，第三種方法就可以解決這個問題。
3 第四種方法：一二三無論向量或wms，都是要載入到客戶端才能使用，但有時候因需求不同導致的，Geoserver發布的圖層不載入到客戶端，那麼就都不能使用了。但只要發佈了，透過wfs的url請求就一定能查詢到結果，即使這個查詢物件不在客戶端而在服務端。
4 第五種方法：與第四種方法一樣，因為業務需求不同導致，有時資料連發布都沒發布，僅僅停留在資料庫中，而要求能夠查詢，這時候第五個方法即可。當然資料庫中的方法，一般用在大數據量，複雜事務查詢中使用較好。單單一個點擊查詢使用有點牛刀殺雞。

以上是OPENLAYERS3實現點選的方法有哪些？的詳細內容。更多資訊請關注PHP中文網其他相關文章！