jQuery Girl
  1. jQuery Girl
  3. Comment obtenir un élément Event ou DOM de la fonctionnalité sélectionnée dans OpenLayers
Intereting Posts
Spécifiez une plage de nombres en fonction du nombre sélectionné Le texte des champs précédents disparaît lors de l’ajout d’un nouveau avec select2 ajax Détecter l’utilisateur, faites défiler vers le bas ou vers le haut dans jQuery problème avec le téléchargement du fichier ajax au spring Facebook – Message d’erreur: redirect_uri n’est pas la propriété de l’application Jquery click ne fonctionne qu’une fois sur la bascule cocher / décocher toutes les cases Enveloppant des éléments de liste consécutifs dans des groupes séparés à l’aide de jQuery Méthode jQuery pour sélectionner un sous-ensemble et aussi son inverse? Définition de l’URL ajax pour jQuery dans un fichier JS à l’aide de ASP.NET MVC Pourquoi jQuery remplace parfois window.onbeforeunload? Charger Google Map en cliquant sur un bouton avec jQuery Exception parameters.grid [dans le modèle “template / jquery / gridcolumn.ftl” Le moyen le plus simple de “tracer” de simples lignes sur une image avec jQuery et de l’enregistrer dans Rails DB? PHP / JS / JQUERY: méthode intelligente pour vérifier / mettre à jour automatiquement le statut des points

Comment obtenir un élément Event ou DOM de la fonctionnalité sélectionnée dans OpenLayers

J’implémente un contrôle OpenLayers SelectFeature et j’essaie de positionner un widget de dialog de l’interface utilisateur JQuery juste au-dessus de la fonctionnalité sélectionnée. Pour utiliser l’utilitaire JQuery UI Position, il nécessite un élément DOM ou un événement.

Le rappel onSelect du contrôle SelectFeature me donne un object OpenLayers.Feature.Vector représentant la fonctionnalité sélectionnée. À partir de là, comment puis-je obtenir l’élément DOM de la fonctionnalité sélectionnée ou l’object Event de l’événement click? 

var selectControl = new OpenLayers.Control.SelectFeature(clientsLayer, { hover : false, clickout: false, multiple: false, onSelect: function(feature) { // how do I get the DOM element of the feature // or alternately, the click event of the selection? } });

Vous le faites bien.

Si vous faites un console.log(feature) vous verrez qu’il renvoie un object avec CLASS_NAME = “OpenLayers.Feature.Vector” 

 onSelect: function(feature) { console.log(feature); }

Mettre à jour:

Je vois. Vous pouvez append des écouteurs d’événements 

 var selectControl = new OpenLayers.Control.SelectFeature(clientsLayer, { hover: false, clickout: false, multiple: false, eventListeners: { featurehighlighted: function (event) { console.log(event); console.log(event.feature); } } });

Est-ce quelque chose comme ça que vous cherchez? 

 onSelect: function onFeatureSelect(event) { var feature = event.feature; if ( feature.layer.name == 'theone') { ... } }

Remarque J’ai également posté cette réponse à l’adresse Comment obtenir l’élément DOM de la fonction vectorielle openlayers

Si vous souhaitez rechercher la position de la souris ou de la fonctionnalité en survol de manière à pouvoir afficher une superposition personnalisée, créez un contrôle de survol personnalisé et définissez la fonction featurehaighlighted comme suit: 

 var featureHoverControl = new OpenLayers.Control.SelectFeature([myLayer], { id: 'featureHoverControl', hover: true, autoActivate: true, highlightOnly: true, renderIntent: "temporary", eventListeners: { featurehighlighted: function(e) { // either use the mouse's position when the event was sortingggered var mouseXPosition = this.handlers.feature.evt.x; var mouseYPosition = this.handlers.feature.evt.y; // or resortingeve the feature's center point var featureCenterLonLat = e.feature.geometry.bounds.getCenterLonLat(); var featureCenterPoint = map.getPixelFromLonLat(featureCenterLonLat); // display your custom popup here // eg showTooltip(e.feature.atsortingbutes.name, featureCenterPoint.x, featureCenterPoint.y) } , featureunhighlighted: function(e) { // hide your custom popup here // eg hideTooltip() } } }); map.addControl(featureHoverControl);

Si vous avez besoin d’accéder à l’élément SVG représentant votre couche / fonction (si vous utilisez une bibliothèque tierce et que vous ne souhaitez pas modifier le code source), utilisez l’une des lignes suivantes (selon que vous ayez besoin du couche ou caractéristique): 

 var layerElement = map.getLayersByName("My Layer")[0].features.root; var layerElementId = map.getLayersByName("My Layer")[0].features.root.id; var featureElementId = map.getLayersByName("My Layer")[0].getFeaturesByAtsortingbute("name","My Feature Name")[0].geometry.components[0].id;

Notez que, dans la mesure où cela ne saisit que l’ID de l’élément, vous devrez toujours utiliser une méthode appropriée pour saisir une référence à l’élément lui-même. Quelque chose comme l’une des suivantes: 

 var elementReference1 = document.getElementById(featureElementId); var elementReference2 = jQuery('#'+featureElementId)[0];