使用 OpenLayers 在 kml 功能上拖动鼠标答案

【问题标题】：mouse drag on kml features with OpenLayers使用 OpenLayers 在 kml 功能上拖动鼠标
【发布时间】：2010-11-08 08:09:17
【问题描述】：

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

当您拖动时，此地图会被平移...但如果您拖动 KML 要素（带圆圈的图标），则不会发生任何事情

【问题讨论】：

标签： javascript maps openlayers kml

【解决方案1】：

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

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

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

除了这个解决方案，easy way只允许你在地图中拖动，当所有突然点击的图标功能可能很快就会丢失，所以你可以选择将它们抛在后面。

【讨论】：

也回答了我的问题！不得不稍作修改，但非常有帮助，谢谢！
@Myra - 在 OL6 中是否有更新的方法来完成此任务？我只有两个地图图层，都是矢量图层，平移和缩放不适用于它们。

【解决方案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，同时将 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 )

【讨论】：