鼠标拖拽用的OpenLayers

Question

功能

链接：http://www1.qhoach.com/

当拖动，这个地图上摇摆......但是，如果你拖上KML功能（带圆圈的图标），没有任何反应

Answer 1

首先， ，在你的应用程序中有四个级别的地图，包括你在问题中用圆圈图标提到的矢量图层。

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

分析： 0开始到最后一个，只是载体似乎是最后一个，其他人保持原样覆盖tiles.In为了来这个问题，我们必须把重点标记层上，即功能（图标）。
正如您在地图上看到的，当您尝试拖动拖动地图时，已触发地图的click事件。您无法拖动，因为事件注册对标记图层起作用，而不是针对地图。这意味着按顺序拖动地图，点击后必须移动鼠标（拖动）。因为你在矢量图层上试图这样做，所以没有机会将事件传递给覆盖图层。

解决方案：
我建议你两种方法来实现这个错误类型的问题。

Let this be the long way
有一个在已知为SelectFeature从Handler.Feature继承。这通常控制的OpenLayers的控制允许从上点击hover.Which给定层矢量特性意味着该处理程序可以响应与任何绘制的特征相关的鼠标事件。只有回调与特征相关联，需要其中的一个点击。现在我们所要做的就是将点击事件返回到我们平移覆盖图块的位置。

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.To传递事件做到这一点，只需

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

后，我们所做的所有这些行动至今，留下最后一件事要做： 这是切换标记和kml图层的顺序。
And this should be the easiest way
这就是上layers.You z索引可以高于具有最高ID的层的层的顺序检查有也最高z索引。

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

除了这个解决方案，简单的方法只允许您通过地图，当所有的图标点击一下子功能可能没有很长的路要走失去了拖，所以这是你的选择离开他们后面。

Answer 2

鼠标事件不希望通过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同时加入下通：对地图，图层和控件中的所有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)