icon - openlayers jquery

Openlayers simple mouseover en el marcador

Question

Suena muy simple, pero no puedo encontrar ningún tutorial para novatos: ¿Alguien podría darme un ejemplo simple de cómo creo marcadores (vektor) en OpenLayers que abren una ventana en mouseover e incluso los cierran con mouseout?

Encontré partes de esto explicadas pero no todas ...

Answer 1

Debe utilizar un control de selección para crear su ventana emergente. Para que responda a hover en lugar de hacer clic en set hover: true en el constructor.

Answer 2

Escribí un ejemplo de trabajo de este con el ejemplo 5.2 "Interacción personalizada" openlayers.org/en/latest/examples/select-features.html

Entonces, agrega características a una capa y la agrega al mapa y luego crea una nueva interacción como esta.

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

Especifica que seleccionará una función en el desplazamiento (puntero). Luego, la agrega a su mapa y asocia la función a la que debe llamarse cuando la interacción selecciona una característica (es decir, cuando se sitúa sobre uno).

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

Y declaras tu función que muestra la ventana de información.

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

Debe tener en cuenta que el evento devolverá (en este caso) un objeto en el que puede encontrar la función seleccionada en el atributo ''seleccionado'' cuando se desplaza por él. Cuando se desplaza hacia fuera, en este caso, el mismo objeto estará disponible en el atributo ''deseleccionado'' hasta que seleccione uno nuevo.

Answer 3

Esto funciona para mi Terminó siendo simple, pero tomó un tiempo:

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

Tenga en cuenta que el retraso de 4000 microsegundos en el evento de mouse out puede ser más corto, dependiendo de su uso.

Answer 4

Para un ejemplo simple de cómo hacer esto, necesita hacer un par de cosas:

Cree una capa vectorial para contener sus marcadores y agréguela al mapa:

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

Crea tu marcador y agrégalo al mapa:

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

Cree un control de selección para su capa y registre una función para construir su ventana emergente cuando el usuario se desplace sobre su marcador:

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

Construye tu ventana emergente:

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);
}, // ...

Answer 5

Parece que quieres ver "OpenLayers.Popup ()"

este ejemplo muestra una ventana emergente después de dibujar un polígono, luego haz clic en él, pero deberías poder cambiarlo para que responda al desplazamiento. http://openlayers.org/dev/examples/select-feature-openpopup.html

Answer 6

Puedes usar marcador y popup

ejemplo:

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

Answer 7

Utilizo una función para agregarla, aquí hay una versión simplificada. Tenga en cuenta que configura los detalles y llama a la función en la parte inferior. También tenga en cuenta que no puede tener varios selectores en varias capas: creo que solo el último agregado funcionará, por lo que tendrá que modificarlo si desea múltiples funciones en una capa:

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

Answer 8

Este ejemplo de una lista de usuarios fue muy útil para mostrar cómo los eventos de desplazamiento y clic asignados a una capa vectorial.