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

发布于 2024-10-01 06:47:17 字数 141 浏览 6 评论 0原文

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

当您拖动时,该地图会平移...但是如果拖动 KML 要素(带圆圈的图标),则不会发生任何情况

Link: http://www1.qhoach.com/

When you drag, this map is panned... But if you drag on KML features (icon with circle), nothing happens

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

诗笺 2024-10-08 06:47:17

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

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

除了此解决方案之外,简单的方法只允许您拖动地图上,突然点击图标的功能可能很快就会丢失,所以你可以选择将它们抛在后面。

First of all,in your application there are four level of maps including the vector layer you mentioned with circle icons in your question.

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

Analysis:
Starting with zero to last one,only vector seems to be the last one,others stays as overlay tiles.In order to come this problem we have to focus on marker layer,namely features (icons).
As you have seen on map,click event for map has been triggered when you try to drag the map around.You can't drag because event registration is working for marker layer first not for the map.That means in order to drag the map,moving mouse(drag) after click must follow.Since you're trying this on vector layer,there is no chance to pass the event to overlay layers.

Solution:
I propose you two ways to achieve this bug-type problem.

Let this be the long way
There is a control in OpenLayers known as SelectFeature inherited from Handler.Feature.This control generally allows vector feature from a given layer on click on hover.Which means this handler can respond to mouse event related to any drawn features.Only callbacks are associated with features,needing one of them click.Now all we have to do is to fall click event back to as we pan for overlay tiles.

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

Once this control is activated you have to ensure your layers to pass events through another layer.To do that,simply

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

After all these actions we made so far,one last thing left to do:
That's switching the order of markers and kml layer.
And this should be the easiest way
That's z-index on layers.You can check in above sequence of layers that the layer which has highest id has also highest z-index.

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

In addition to this solution,easy way allows only you to drag through map,when all sudden clicking features of icons may lost without long way,so it's your choice to leave them behind.

一杆小烟枪 2024-10-08 06:47:17

鼠标事件不想通过 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 )

Mouse events do not want to propagate through an svg Vector overlay to layers underneath.

The solution above demands all marker HTML layers have higher zindex than all Vector SVG layers.

The following CSS provides a potential/partial work-around, propagating events through the svg element, but only where there is no vector elements within the svg overlay:

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

Combine the above CSS while adding fallThrough:true to all OpenLayers events objects within maps, layers, and controls.

// 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 )
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文