trascinare il mouse su KML presenta con OpenLayers

Question

Link: http://www1.qhoach.com/

Quando si trascina, questa mappa di panoramica ... Ma se si trascina sulle caratteristiche KML (icona con il cerchio), non succede nulla

Answer 1

Prima di tutto , nella tua applicazione ci sono quattro livelli di mappe incluso il livello vettoriale che hai citato con le icone del cerchio nella tua domanda.

0: "Đường Sá"   ||---> Overlay Tiles 
    1: "Vệ Tinh"   ||---> Overlay Tiles 
    2: "TMS Overlay"  ||---> Markers ~ Icons 
    3: "KML"    ||---> Vector 

Analisi: partendo da zero per durare uno, solo vettore sembra essere l'ultimo, gli altri rimane come sovrapposizione tiles.In fine di venire questo problema dobbiamo concentrarci sullo strato marcatore, vale a dire caratteristiche (icone).
Come si è visto sulla mappa, l'evento click per la mappa è stato attivato quando si tenta di trascinare la mappa intorno.Non è possibile trascinare perché la registrazione degli eventi sta funzionando prima per il livello marcatore e non per la mappa. Ciò significa in ordine per trascinare la mappa, spostare il mouse (trascinamento) dopo che il clic deve essere seguito. Dal momento che lo stai provando su livello vettoriale, non c'è alcuna possibilità di passare l'evento per sovrapporre i livelli.

Soluzione:
vi propongo due modi per raggiungere questo problema bug-tipo.

Let this be the long way
C'è un controllo in OpenLayers noti come SelectFeature ereditato da Handler.Feature .Questo controllano generalmente permette vettore di caratteristiche di un determinato livello al clic su hover.Which significa questo gestore può rispondere agli evento del mouse relativo a qualsiasi caratteristica disegnata. Solo le callback sono associate a funzionalità, che necessitano di una di esse , fare clic su. Ora, tutto ciò che dobbiamo fare è far cadere nuovamente l'evento click, mentre cerchiamo di sovrapporre i riquadri.

var selectFeat = new OpenLayers.Control.SelectFeature(
        vector, {toggle: true, clickout:false}); 
    selectFeat.handlers['feature'].stopDown = false; 
    selectFeat.handlers['feature'].stopUp = false; 
    map.addControl(selectFeat);//instance of map 
    selectFeat.activate(); 

Una volta che questo controllo è attivato è necessario garantire i livelli di passare attraverso un altro eventi layer.To farlo, è sufficiente

layer.events.fallThrough = true;//both for vector and marker layers 

Dopo tutte queste azioni abbiamo fatto fino ad ora, un'ultima cosa a sinistra fare: Questo sta cambiando l'ordine dei marcatori e del livello kml.
And this should be the easiest way
Ecco z-index layers.You può controllare supra sequenza di strati che lo strato che ha la più alta id ha anche indice z più alto.

layer.setZIndex(...any number...); 

In aggiunta a questa soluzione, modo semplice permette solo di trascinare attraverso la mappa, quando tutte le funzioni di clic improvvisi di icone possono perduto senza molta strada, quindi è la scelta di lasciare alle spalle.

Answer 2

Gli eventi del mouse non si propagano attraverso un vettore sovrapposto ai livelli sottostanti.

La soluzione sopra richiede che tutti i livelli HTML dell'indicatore abbiano zindex più alto di tutti i livelli SVG vettoriali.

Il seguente CSS fornisce un potenziale/parziale work-around, propagando eventi attraverso l'elemento SVG, ma solo quando non ci sono elementi del vettore all'interno svg sovrapposizione:

/** Hack so mouse events propagate(bubble) through svg elements, but not the 
images within svg */ 
.olLayerDiv svg { 
    pointer-events: none; 
} 

.olLayerDiv svg * { 
    pointer-events: auto; 
} 

unire il suddetto CSS aggiungendo falltrough : fedele a tutti gli oggetti eventi OpenLayers all'interno di mappe, livelli e controlli.

// map events 
var map = new OpenLayers.Map(div, { fallThrough:true }); 

// layer events 
var lvec = new OpenLayers.Layer.Vector(....); 
lvec.events.fallThrough = true 
map.addLayers([lvec]) 

// all map controls 
var ctrl = new OpenLayers.Control.SelectFeature(lvec, {... 
    fallThrough: true, autoActivate:true }); 
map.addControl(ctrl)