Come cambiare il cursore al passaggio del mouse negli Openlayer 3?

Question

Sono riuscito ad aggiungere l'interattività a un feature layer aggiunto da una risorsa GeoJSON remota. Quando faccio clic su una funzione, ottengo il suo ID, sparo una richiesta AJAX e visualizzo alcune informazioni rilevanti sulla funzione, nella pagina al di fuori dell'area della mappa.

Ho utilizzato un'interazione Select.

Vorrei rendere ancora più chiaro all'utente che può fare clic sulle funzionalità sulla mappa. C'è un modo in cui posso cambiare il cursore del mouse in "cursore" di "mano" quando il mouse passa su una caratteristica contenuta in un ol.layer.Vector?

Non ho trovato nulla nel documento, su questo sito o su Google.

Answer 1

Grazie al collegamento ad esempio fornito da Azathoth nei commenti ho lavorato una soluzione out:

• utilizzando OL3 pointermove evento
• utilizzando jQuery per ottenere l'elemento di destinazione e cambiare il suo stile cursore

ecco il codice:

var cursorHoverStyle = "pointer"; 
var target = map.getTarget(); 

//target returned might be the DOM element or the ID of this element dependeing on how the map was initialized 
//either way get a jQuery object for it 
var jTarget = typeof target === "string" ? $("#"+target) : $(target); 

map.on("pointermove", function (event) { 
    var mouseCoordInMapPixels = [event.originalEvent.offsetX, event.originalEvent.offsetY]; 

    //detect feature at mouse coords 
    var hit = map.forEachFeatureAtPixel(mouseCoordInMapPixels, function (feature, layer) { 
     return true; 
    }); 

    if (hit) { 
     jTarget.css("cursor", cursorHoverStyle); 
    } else { 
     jTarget.css("cursor", ""); 
    } 
}); 

Qui è il link per l'esempio in loco OpenLayers: http://openlayers.org/en/v3.0.0/examples/icon.html

Answer 2

Si può fare anche senza jQuery:

map.on("pointermove", function (evt) { 
    var hit = this.forEachFeatureAtPixel(evt.pixel, function(feature, layer) { 
     return true; 
    }); 
    if (hit) { 
     this.getTarget().style.cursor = 'pointer'; 
    } else { 
     this.getTarget().style.cursor = ''; 
    } 
}); 

Answer 3

Se questo non funziona, provare una combinazione di 2, sembrava funzionare per il mio vettore popup ...

var target = map.getTarget(); 
var jTarget = typeof target === "string" ? $("#" + target) : $(target); 
// change mouse cursor when over marker 
$(map.getViewport()).on('mousemove', function (e) { 
    var pixel = map.getEventPixel(e.originalEvent); 
    var hit = map.forEachFeatureAtPixel(pixel, function (feature, layer) { 
     return true; 
    }); 
    if (hit) { 
     jTarget.css("cursor", "pointer"); 
    } else { 
     jTarget.css("cursor", ""); 
    } 
}); 

Answer 4

ho fatto con il seguente codice:

var target = $(map.getTargetElement()); //getTargetElement is experimental as of 01.10.2015 
map.on('pointermove', function (evt) { 
    if (map.hasFeatureAtPixel(evt.pixel)) { //hasFeatureAtPixel is experimental as of 01.10.2015 
     target.css('cursor', 'pointer'); 
    } else { 
     target.css('cursor', ''); 
    } 
}); 

Answer 5

modo semplice per ottenere elemento di destinazione

var target = map.getTarget(); 

target = typeof target === "string" ? 
    document.getElementById(target) : target; 

target.style.cursor = features.length > 0) ? 'pointer' : ''; 

Answer 6

Ecco un altro modo per farlo:

map.on('pointermove', function(e){ 
    var pixel = map.getEventPixel(e.originalEvent); 
    var hit = map.hasFeatureAtPixel(pixel); 
    map.getViewport().style.cursor = hit ? 'pointer' : ''; 
}); 

Answer 7

Un altro modo (combinata dalle parti di risposte di cui sopra, ma ancora più semplice):

map.on("pointermove", function (evt) { 
    var hit = map.hasFeatureAtPixel(evt.pixel); 
    map.getTargetElement().style.cursor = (hit ? 'pointer' : ''); 
}); 

Answer 8

Uncaught TypeError: Cannot set property 'cursor' of undefined.

Riparato con: map.getTargetElement()s.style.cursor = hit ? 'pointer' : ''; anziché map.getTarget().style.cursor = hit ? 'pointer' : '';

Answer 9

Se voi ragazzi stanno usando angolare 2 è necessario utilizzare il seguente codice:

this.map.on("pointermove", function (evt) { 
    var hit = evt.map.hasFeatureAtPixel(evt.pixel); 
    this.getTargetElement().style.cursor = hit ? 'pointer' : ''; 
}); 

Se la variabile mappa è una classe membro si riferiscono ad essa come "this.map", invece se si è dichiarata all'interno della funzione corrente può essere indicato come "mappa".Ma soprattutto, non si scrive

map.getTargetElement() 

ma si scrive

this.getTargetElement() 

Answer 10

Per me ha funzionato così:

map.on('pointermove', function(e) { 
      if (e.dragging) return; 
      var pixel = e.map.getEventPixel(e.originalEvent); 
      var hit = e.map.forEachFeatureAtPixel(pixel, function (feature, layer) { 
       return true; 
      }); 
      e.map.getTargetElement().style.cursor = hit ? 'pointer' : ''; 
     }); 

Ho anche aggiunto un filtro layer:

map.on('pointermove', function(e) { 
     if (e.dragging) return; 
     var pixel = e.map.getEventPixel(e.originalEvent); 
     var hit = e.map.forEachFeatureAtPixel(pixel, function (feature, layer) { 
      return layer.get('name') === 'myLayer'; 
     }); 
     e.map.getTargetElement().style.cursor = hit ? 'pointer' : ''; 
    }); 

Ho dovuto selezionare una nuova soluzione come quello vecchio che avevo usato per il filtro di livello prima non funzionava più:

var hit = e.map.hasFeatureAtPixel(e.pixel, function(layer){ 
      return layer.get('name') === 'myLayer'; 
      });