使用 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事件。您无法拖动，因为事件注册适用于标记层首先不是地图。这意味着为了拖动地图，单击后必须移动鼠标（拖动）。由于您在矢量图层上尝试此操作，因此没有机会将事件传递到覆盖层。

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

让这成为漫漫长路
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 图层的顺序。
这应该是最简单的方法
这就是图层上的 z-index。您可以在上面的图层序列中检查具有最高 id 的图层也具有最高的 z-index。

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 事件对象添加fallThrough:true和控制。

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