OPENLAYERS3 でクリック選択を実装するにはどのような方法がありますか?

WebGIS 開発では、クリック クエリが最も一般的に使用されるクエリ メソッドです。ArcGIS API では、このクエリは IdentifyTask と呼ばれ、その主な機能はフロント デスクでパラメーターを送信し、クエリ分析のために ArcServer に返すことです。この記事では、フロント デスクからサーバー、データベースに至るまで、オープン ソース フレームワークの観点からさまざまな方法でクリック クエリを実装します。乾いた情報は次のとおりです。

1.1 SelectController

ベクトル データの場合、Ol3 の公式 Web サイトのデモでは、マウス選択クエリを実装するための Select コントロールが提供されています。 コードは次のとおりです。

1.2 マップクリックイベント

このメソッドは、マウスクリックの座標を使用して、現在のベクター画像レイヤーとの交差分析クエリを実行し、クエリされた要素とそれらが属するLayerオブジェクトを取得します

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

1.3 WMS レイヤーの GetFeatureInfo

ベクター レイヤーの場合、最初と 2 番目のメソッドを通じてクリック クエリを実装できます。ただし、多くの場合、ベース マップは wms サービスです。現時点では、wms プロトコルの GetFeatureInfo を通じてクリックツークリック クエリを実装できます。

//地图单机事件
  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.4 Geoserver の wfs を介したクエリ

wfs は、

attribute クエリまたは空間クエリを実行するために、フィルターを介して条件またはグラフィックスを送信できます。この段落では、wfs クエリの使用方法を説明するためにドライな情報を使用します。

//模拟查询的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.5 PostGIS を通じてクリッククエリ

pg を実装する方法は、最も簡単に使用できるはずです。クリックされた地理座標をバックグラウンドに送信し、実行のためにデータベースに送信します。

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

}

次のように SQL を実行します:

select * from t where ST_Intersect(t.geom,ST_GeomfromText('Point(x y)',3857));

完了!
まとめ

類推と統合によって、問題を解決する方法はたくさんあるはずです。もちろん、異なる道路は同じ目的を持っており、景色は同じです。もちろん違う。少なくとも 5 つの方法を使用して、クリック クエリの結果を取得することができました。そうなると、ほとんどの人は、5 つの方法のうちどれが優れていてどれが悪いのか疑問に思うでしょう。 実際、方法に良い悪いはなく、単にそれが適切かどうかだけです。
1 1 番目と 2 番目の方法: ベクトル データは、wms レイヤーの場合は使用する前にマップ クライアントに追加する必要があります。 2 3 番目の方法: wms レイヤー。現時点では、最初の 2 つのベクトル方法はこの問題を解決できません。

3 4 番目の方法: 123 ベクターと wms は両方とも使用する前にクライアントにロードする必要があります。ただし、異なるニーズにより、Geoserver によって公開されたレイヤーがクライアントにロードされず、使用できない場合があります。ただし、公開されていれば、クエリ オブジェクトがクライアントではなくサーバー上にある場合でも、wfs の URL リクエストを通じて結果をクエリできます。

4 5 番目の方法: 4 番目の方法と同じですが、ビジネス ニーズが異なるため、データが公開されずにデータベースに残るだけで、クエリする必要がある場合があります。この場合、5 番目の方法で十分です。 。もちろん、データベース内のメソッドは一般に、大量のデータや複雑なトランザクション クエリで使用する方が適しています。シングルクリックのクエリは少しやりすぎです。

以上がOPENLAYERS3 でクリック選択を実装するにはどのような方法がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。