What are the methods for OPENLAYERS3 to implement click selection?

In WebGIS development, click query is the most commonly used query method. In ArcGIS api, this query is called IdentifyTask. Its main function is to submit parameters at the front desk and return them to ArcServer for query analysis. This article implements click query in various ways from the perspective of an open source framework, from the front desk to the server to the database. The dry information is as follows:

1.1 SelectController

For vector data, the official website demo in Ol3 provides a Select control to realize mouse selection. Query, the code is as follows:

//定义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 event

This method uses the coordinates of the mouse click, Perform intersection analysis query with the current vector image layer to obtain the queried elements and the Layer objects they belong to

//地图单机事件
  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 layer GetFeatureInfo

For vector layers, we can implement click query through the first and second methods. However, many times our base map is a wms service. At this time, we can implement click-to-click query through GetFeatureInfo of the wms protocol.

//模拟查询的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 Query through wfs of Geoserver

wfs can submit conditions or graphics through FilterAttributes Query or spatial query, this paragraph uses dry information to express how to use wfs query.

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 The method of clicking to query

pg through PostGIS should be the simplest to use. It is to send the clicked geographical coordinates to the background for submission to the database for execution.

//其他省略，假设x,y是前台点击地图获取的坐标，坐标系假设只3857。
//这里假设后台获取了参数拼接sql提交数据库

Execute sql as follows: select * from t where ST_Intersect(t.geom,ST_GeomfromText('Point(x y)',3857));

complete!

Summary

By analogy and comprehensive understanding, there must be many ways to solve a problem. It is not "one road in Huashan since ancient times". Of course, the purposes of different roads The same, but the scenery is of course different. We have been able to use at least 5 methods to obtain the results of click queries. Then most people will wonder, which of the five methods is better and who is worse? In fact, there is no good or bad method, only whether it is appropriate.

1 The first and second method: vector data must be added to the map client before it can be used. If it is a wms layer, it cannot be used.
2 The third method: wms layer. At this time, the first two vector methods cannot be processed. The third method can solve this problem.
3 The fourth method: 123 Regardless of vector or wms, they must be loaded into the client before they can be used. However, sometimes due to different needs, the layers published by Geoserver are not loaded into the client, so both Can no longer be used. But as long as it is published, the result can be queried through the url request of wfs, even if the query object is not on the client but on the server.
4 The fifth method: Same as the fourth method, due to different business needs, sometimes the data is not even released, but just stays in the database, and needs to be queried. In this case, the fifth method is enough. Of course, the methods in the database are generally better used in large amounts of data and complex transaction queries. A single click query is a bit overkill.

The above is the detailed content of What are the methods for OPENLAYERS3 to implement click selection?. For more information, please follow other related articles on the PHP Chinese website!