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

<强>分析：从零开始到最后一个，只有矢量似乎是最后一个，其他的仍然是叠加图块。为了解决这个问题，我们必须关注标记图层，即特征（图标）。
正如您在地图上看到的那样，当您尝试拖动地图时，会触发click地图事件。您无法拖动，因为事件注册首先适用于标记图层而不是地图。这意味着为了拖动地图，必须在点击后移动鼠标（拖动）。因为你在矢量图层上尝试这个，所以没有机会将事件传递给叠加层。

<强>解决方案：
我建议你有两种方法来实现这个bug类型的问题。

<强> Let this be the long way
OpenLayers中有一个控件，称为 SelectFeature ，继承自 Handler.Feature 。此控件通常允许在点击悬停时来自给定图层的矢量要素。这意味着此处理程序可以响应鼠标事件与任何绘制的功能相关。只有回调与功能相关联，需要其中一个功能点击。现在我们所要做的就是将点击事件恢复到我们平移覆盖图块时。 / p>

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-index。您可以在上面的层序列中检查具有最高id的层也具有最高的z-index。

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

除了这个解决方案之外，简单的方法只允许你拖动地图，当图标的所有突然点击功能可能没有很长时间丢失时，所以你可以选择将它们留在后面。

Answer 2

鼠标事件不希望通过svg Vector叠加层传播到下面的图层。

上述解决方案要求所有标记HTML图层都具有比所有Vector SVG图层更高的zindex。

以下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;
}

在将fallThrough：true添加到地图，图层和控件中的所有OpenLayers事件对象时，将上述CSS组合在一起。

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

用OpenLayers鼠标拖动kml功能

2 个答案: