web-dev-qa-db-fra.com

openlayers simple mouseover sur le marqueur

Cela semble si simple, mais je ne trouve aucun didacticiel pour débutant. Quelqu'un pourrait-il me donner un exemple simple de la façon dont je crée (vektor) des marqueurs dans OpenLayers qui ouvrent une infowindow au passage de la souris et la ferment même au survol?

J'ai trouvé des parties de ceci expliquées mais pas toutes ....

openlayersmouseovermarkerinfowindow
17
user987875

Pour un exemple simple de la procédure à suivre, vous devez effectuer quelques opérations:

Créez un calque vectoriel contenant vos marqueurs et ajoutez-le à la carte:

this.markerLayer = new OpenLayers.Layer.Vector(
    "My Marker Layer",
    { /* configuration options are set here */ }
);
map.addLayer(this.markerLayer);

Créez votre marqueur et ajoutez-le à la carte:

var marker = new OpenLayers.Feature.Vector(point, attributes, markerStyle);
this.markerLayer.addFeatures([marker]);

Créez un contrôle de sélection pour votre couche et enregistrez une fonction pour créer votre fenêtre contextuelle lorsque l'utilisateur survole votre marqueur:

var selectControl = new OpenLayers.Control.SelectFeature(this.markerLayer, {
    hover: true
});
selectControl.events.register('featurehighlighted', null, onFeatureHighlighted);

Construisez votre popup:

onFeatureHighlighted: function (evt) {
    // Needed only for interaction, not for the display.
    var onPopupClose = function (evt) {
        // 'this' is the popup.
        var feature = this.feature;
        if (feature.layer) {
            selectControl.unselect(feature);
        }  
        this.destroy();
    }

    feature = evt.feature;
    popup = new OpenLayers.Popup.FramedCloud("featurePopup",
            feature.geometry.getBounds().getCenterLonLat(),
            new OpenLayers.Size(100,100),
            "<h2>"+feature.attributes.station_na + "</h2>" +
            "Location: " + feature.attributes.location + '<br/>' +
            "Elevation: " + feature.attributes.elev_,
            null, true, onPopupClose);
    feature.popup = popup;
    popup.feature = feature;
    map.addPopup(popup, true);
}, // ...
16
Kyle

Vous pouvez utiliser marqueur et popup

exemple :

var popup;
var marker_layer = new OpenLayers.Layer.Markers( "Markers" );
var size = new OpenLayers.Size(32,32);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
var icon_marker = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker.png',
                                       size, 
                                       offset);
marker = new OpenLayers.Marker(new OpenLayers.LonLat(5.6, 50.6), icon_marker);

//here add mouseover event
marker.events.register('mouseover', marker, function(evt) {
    popup = new OpenLayers.Popup.FramedCloud("Popup",
        new OpenLayers.LonLat(5.6, 50.6),
        null,
        '<div>Hello World! Put your html here</div>',
        null,
        false);
    map.addPopup(popup);
}
//here add mouseout event
marker.events.register('mouseout', marker, function(evt) {popup.hide();});

marker_layer.addMarker(marker);
map.addLayer(marker_layer);
9
bsuttor

Cela fonctionne pour moi. En fin de compte être simple, mais a pris un certain temps:

 var marker = new OpenLayers.Marker(position, icon.clone());           
 boothLayer.addMarker(marker);                                         

 marker.events.register('mouseover', marker, function() {           
   var msg = booth.get('name') +' - ' + booth.get('premises');      
   var popup = new OpenLayers.Popup.FramedCloud("Popup",            
       position, null, '<div>'+msg+'</div>', null, false);          
   map.addPopup(popup);                                             
   marker.events.register('mouseout', marker,                       
     setTimeout( function() { popup.destroy(); }, 4000));           
   });

Notez le retard de 4000 microsecondes sur l'événement de sortie de souris - peut-être pourrait-il être plus court, dépend de votre utilisation.

2
ErichBSchulz

Vous devez utiliser un selectControl pour créer votre popup. Pour qu'il réagisse au survol au lieu du clic, définissez survol: true dans le constructeur.

1
Jon Lynch

J'utilise une fonction pour l'ajouter, voici une version simplifiée. Notez que vous définissez les détails et appelez la fonction en bas. Notez également que vous ne pouvez pas avoir plusieurs sélecteurs sur plusieurs calques - je pense que seul le dernier ajouté fonctionnera. Vous devrez donc le modifier si vous voulez plusieurs entités dans un calque:

function addMarkerLayer(markerInfo){
    var details= markerInfo.details || "<h3>"+markerInfo.title+"</h3>"+
        "[Location] Lat:"+markerInfo.latitude + " Lon:"+markerInfo.longitude;

    var features=[];
    features.Push(new OpenLayers.Feature.Vector(
        new OpenLayers.Geometry.Point(markerInfo.longitude, markerInfo.latitude),
        {title: markerInfo.title, details:details, externalGraphic:markerInfo.icon},
        {
            externalGraphic:markerInfo.icon,
            fillColor: markerInfo.markerColor || '#ff0',
            fillOpacity: markerInfo.iconOpacity || 0.8,
            graphicWidth   : markerInfo.iconSize || 24,
            graphicHeight  : markerInfo.iconSize || 24,
            strokeColor: markerInfo.markerStrokeColor || "#ee9900",
            strokeOpacity: 1,
            strokeWidth: 1,
            pointRadius: 7
        }
    ));

    // create the layer with listeners to create and destroy popups
    var vector = new OpenLayers.Layer.Vector(markerInfo.layerName, {
        eventListeners: {
            'featureselected': function(evt) {
                var feature = evt.feature;
                var popup = new OpenLayers.Popup.FramedCloud("popup",
                    OpenLayers.LonLat.fromString(feature.geometry.toShortString()),
                    null,
                    feature.attributes.details,
                    null,
                    true);
                feature.popup = popup;
                map.addPopup(popup);
            },
            'featureunselected': function(evt) {
                var feature = evt.feature;
                map.removePopup(feature.popup);
                feature.popup.destroy();
                feature.popup = null;
            }
        }
    });
    vector.addFeatures(features);

    var selector = new OpenLayers.Control.SelectFeature(vector, {
        hover: true
    });

    map.addLayer(vector);
    map.addControl(selector);
}


var markerInfo={
    title:'Washington DC',
    latitude:38.8,
    longitude:-77,
    icon:"/icons/event.png",
    iconSize:24
};
addMarkerLayer(markerInfo);
1
JayCrossler

Cet exemple tiré d'une liste d'utilisateurs s'est avéré très utile pour montrer comment affecter à la fois des événements de survol et de clic à une couche vectorielle.

0
Evan Siroky

J'en ai écrit un exemple de travail avec l'exemple 5.2 "Custom Interaction" Openlayers.org/en/latest/examples/select-features.html

Vous ajoutez donc des entités à une couche et l'ajoutez à la carte, puis vous créez une nouvelle interaction comme celle-ci.

const interact = new ol.interaction.Select({condition: ol.events.condition.pointerMove});

Il spécifie qu'il sélectionnera une entité en survol (pointeur) . Vous l'ajouterez ensuite à votre carte et vous lui associez la fonction à appeler lorsque l'interaction sélectionne une entité (c'est-à-dire lorsque vous en survolez une).

map.addInteraction(interact);
interact.on('select', showInfoWindow);

Et vous déclarez votre fonction qui affiche la fenêtre d'information

function showInfoWindow(evt){
    if(evt.selected.length>0){
        const feature = evt.selected[0];
        const id = feature.getId();

        infoWindow.innerHTML = '<p>' + id + '</p>';
        infoWindow.show();//if you have something like that, you could use an openLayers overlay
    }
}

Notez que l'événement renvoie (dans ce cas) un objet dans lequel vous pouvez trouver l'entité sélectionnée dans l'attribut "sélectionné" lorsque vous la survolez. Lorsque vous survolez, dans ce cas, le même objet sera disponible dans l'attribut 'désélectionné' jusqu'à ce que vous en sélectionniez un nouveau.

0
Clement