Drag and drop on kml functions using OpenLayers

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

When dragging, this map is tinted ... But if you drag and drop KML objects (the circle icon), nothing happens

+5
source share
2 answers

First of all, your application has four levels of maps, including the vector layer you mentioned with circle icons in your question.

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

: , , . , ().
, click . , , , () . , .

:
.

Let this be the long way
OpenLayers , SelectFeature, Handler.Feature. hover.Which , , . , click. , , - , .

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

, , .

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

, , : kml.
And this should be the easiest way
z- . , id z.

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

, , .

+13

svg .

, HTML- zindex, Vector SVG.

CSS / , svg, , svg:

/** 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;
}

CSS, fallThrough: true OpenLayers , .

// 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 )
+1

All Articles