用OpenLayers鼠标拖动kml功能

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 。这个控件通常允许在点击悬停时来自给定图层的矢量特征。这意味着这个处理程序可以响应与任何绘制特征相关的鼠标事件。只有回调与之相关联功能，需要其中一个点击 。现在我们所要做的就是将点击事件放回到我们平移覆盖图块时。

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

结合上面的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 )