Maison > interface Web > js tutoriel > Quelles sont les méthodes utilisées par OPENLAYERS3 pour implémenter la sélection par clic ?

Quelles sont les méthodes utilisées par OPENLAYERS3 pour implémenter la sélection par clic ?

零下一度
Libérer: 2017-07-16 14:37:45
original
1823 Les gens l'ont consulté

Dans le développement WebGIS, la requête par clic est la méthode de requête la plus couramment utilisée. Dans l'API ArcGIS, cette requête est appelée IdentifierTask. Sa fonction principale est de soumettre les paramètres à la réception et de les renvoyer à ArcServer pour l'analyse de la requête. Cet article implémente la requête de clic de différentes manières du point de vue d'un framework open source, de la réception au serveur en passant par la base de données. Les informations sèches sont les suivantes :

1.1 SelectController

Pour les données vectorielles, la démo du site officiel dans Ol3 fournit un contrôle Select pour réaliser sélection de la souris. Requête, le code est le suivant :


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

1.2 événement clic sur la carte

Cette méthode , cliqué avec les coordonnées de la souris, effectuez une requête d'analyse d'intersection avec le calque image vectorielle actuel, et obtenez les éléments interrogés et leurs objets Layer appartenant


//地图单机事件
  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);
    }
  }
Copier après la connexion

1.3 GetFeatureInfo

de la couche WMS Pour les couches vectorielles, nous pouvons implémenter une requête de clic via la première et la deuxième méthodes. Cependant, notre carte de base est souvent un service wms. À l'heure actuelle, nous pouvons implémenter une requête clic-clic via GetFeatureInfo du protocole wms.


//模拟查询的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);
}
Copier après la connexion

1.4 Requête via les wfs de Geoserver

les wfs peuvent soumettre des conditions ou des graphiques via le filtre Attributs Requête ou requête spatiale, ce paragraphe utilise des informations sèches pour exprimer comment utiliser la requête 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;
  });

}
Copier après la connexion

1.5 La méthode consistant à cliquer pour interroger

pg via PostGIS devrait être la plus simple à utiliser. Il s'agit d'envoyer les coordonnées géographiques cliquées en arrière-plan pour soumission à la base de données pour exécution.


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

Exécutez SQL comme suit : select * from twhere ST_Intersect(t.geom,ST_GeomfromText('Point(x y)',3857));

Fait !

Résumé

Par analogie et intégration, il doit y avoir plusieurs façons de résoudre un problème. Ce n'est pas « une seule route à Huashan depuis les temps anciens ». Bien sûr, le but des différentes routes est le même, mais le paysage est bien sûr différent. Nous avons pu utiliser au moins 5 méthodes pour obtenir les résultats des requêtes clics. Alors la plupart des gens se demanderont laquelle des cinq méthodes est la meilleure et laquelle est la pire ? En fait, il n’y a pas de bonne ou de mauvaise méthode, seulement si elle est appropriée.

1 La première et la deuxième méthode : les données vectorielles doivent être ajoutées au client cartographique avant de pouvoir être utilisées. S'il s'agit d'une couche wms, elle ne peut pas être utilisée.
2 La troisième méthode : couche wms Pour le moment, les deux premières méthodes vectorielles ne peuvent pas être traitées. La troisième méthode peut résoudre ce problème.
3 La quatrième méthode : 123 Quel que soit le vecteur ou le wms, il doit être chargé dans le client avant de pouvoir être utilisé. Cependant, parfois en raison de besoins différents, les couches publiées par Geoserver ne sont pas chargées dans le client, donc les deux. Ne peut plus être utilisé. Mais tant qu'il est publié, le résultat peut être interrogé via la requête url de wfs, même si l'objet de requête n'est pas sur le client mais sur le serveur.
4 La cinquième méthode : identique à la quatrième méthode, en raison de besoins commerciaux différents, parfois les données ne sont même pas publiées, mais restent simplement dans la base de données et doivent être interrogées. Dans ce cas, la cinquième méthode. c'est suffisant. Bien entendu, les méthodes de la base de données sont généralement mieux utilisées dans le cas de grandes quantités de données et de requêtes de transactions complexes. Une requête en un seul clic est un peu exagérée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal