Suite

OpenLayers 3.10.1 - Fonctionnalité contextuelle

OpenLayers 3.10.1 - Fonctionnalité contextuelle


J'ai vu de nombreux exemples de Feature Popup activés lorsque le curseur est déplacé sur une fonctionnalité pour OpenLayers 2.0 mais aucun pour OpenLayers 3.0.

Est-ce que quelqu'un sait comment faire ce qui suit : http://jorix.github.io/OL-FeaturePopups/examples/feature-popups.html sur OpenLayers 3.0 ?


Cela fonctionne sur OL 3.10.1. Cet exemple suppose que vous avez déjà ajouté une couche d'entités à votre carte et que vous utilisez bootstrap et Jquery.

Pour une solution sans Jquery et Bootstrap voir : OpenLayers 3 - Feature Popup sans Jquery/Bootstrap

HTML

CSS

#map { position : relative ; } #info { position : absolue ; hauteur : 1px ; largeur : 1px ; indice z : 100 ; } .tooltip.in { opacité : 1 ; filtre : alpha(opacité=100); } .tooltip.top .tooltip-arrow { border-top-color: white; } .tooltip-inner { border : 2px blanc uni ; }

JS

Ici, vous devez remplacer feature.get('id') par la propriété de fonctionnalité que vous souhaitez afficher sur votre popup (exemple : feature.get('name')).

var info = $('#info'); info.tooltip({ animation : false, trigger : 'manual' }); var displayFeatureInfo = function(pixel) { info.css({ left : pixel[0] + 'px', top : (pixel[1] - 15) + 'px' }); var feature = map.forEachFeatureAtPixel(pixel, function(feature, layer) { return feature; }); if (feature) { info.tooltip('hide') .attr('data-original-title', feature.get('id')) .tooltip('fixTitle') .tooltip('show'); } else { info.tooltip('cacher'); } } ; map.on('pointermove', function(evt) { if (evt.dragging) { info.tooltip('hide'); return; } displayFeatureInfo(map.getEventPixel(evt.originalEvent)); });

Mot d'avertissement aux futurs chercheurs. La réponse acceptée n'est correcte que si vous utilisez bootstrap. Sans cela, le code échouera lors de la tentative des appels .tooltip().


Voir la vidéo: QGIS3 - where is openlayers plugin? burdGIS