0

我遇到了这个有趣的问题，所以我想我可以分享我的解决方案，看看是否有人有更好的建议。

背景：

OpenLayers 地图，包含 3 个图层：Google（基础）、带有多边形的 KML 图层和带有来自 Google Charts API 的非常大图标的 Layer.Markers 图层。

我们想要达到的目标：

使用 Control.SelectFeature，我们希望在移动鼠标时突出显示/选择 kml 层。我们对 Markers 层根本不感兴趣。

问题：

当鼠标悬停在其中一个标记图标上时，事件不会传递到下面的 kml 层。

尝试过的解决方案：

检查这个问题： 强制 OpenLayers Markers 图层在顶部绘制，并在下方具有可选图层

接受的答案、我的评论和@Fraser 的答案。据我所知，@Fraser 的回答对这个问题没有丝毫影响。@Ringdahl 的回答和“指针事件：无”的应用相结合似乎解决了这个问题......除了 Internet Explorer 之外的所有东西（这并不奇怪）。

4

1 回答 1

0

我最终实施以解决 Internet Explorer 问题的是这个。

（如果是 IE）用 svg 替换 Marker 层的所有图像。这允许 IE 识别“pointer-events:none”，并且事件传递到下面的层。但是，当地图更改缩放时，OpenLayers 库希望找到图像（我相信它们的位置），因此库崩溃并且地图不会缩放。

因此，将处理程序附加到“movestart”事件，恢复原始 OpenLayers 图像，当地图停止移动时（短暂超时后），再次用 svg 替换图像。

可以想象，这是相当占用 CPU 资源的。尽管在我的时间范围内无法提出更好的解决方案。

相关代码如下：

"kmlInit" 显示 kml 层是否已加载

“标记”是标记层

“getInternetExplorerVersion”是一个函数，如果找到非 IE 浏览器则返回 -1，否则返回版本。


if (getInternetExplorerVersion()>-1){
    map.events.register('movestart',this,function(e){
        if(kmlInit){
            ieSucksRestore();
        }
    });

    map.events.register('moveend',this,function(e){
        if(kmlInit){
            if (ieCrap){
                clearTimeout(ieCrap);
            }
            ieCrap=setTimeout(ieSucks,1000);           //to give time for multiple move/zooms
        }
    });
}

function ieSucks()
{
    if ($(markers.div).find(".olAlphaImg").length>0){

        try{

            $(markers.div).find(".olAlphaImg").replaceWith(function(){
                var css = this.style;
                var src = this.src;
                var elem = $("");
                var width = parseInt(css.width, 10);
                var height = parseInt(css.height, 10)
                var img = document.createElementNS('http://www.w3.org/2000/svg','image');
                var elem = document.createElementNS('http://www.w3.org/2000/svg','svg');
                elem.setAttributeNS(null,"class",'svgHack');
                elem.setAttributeNS(null,"x",'0');
                elem.setAttributeNS(null,"y",'0');
                elem.setAttributeNS(null,"width",width);
                elem.setAttributeNS(null,"height",height);
                elem.setAttributeNS(null,"pointer-events","none");
                img.setAttributeNS(null,"x",'0');
                img.setAttributeNS(null,"y",'0');
                img.setAttributeNS(null,"width",width);
                img.setAttributeNS(null,"height",height);
                img.setAttributeNS('http://www.w3.org/1999/xlink',"href",src);
                elem.appendChild(img);
                return elem;
            });
        }catch(err){console.log(err.message);}
    }
}

function ieSucksRestore()
{
    if ($(".svgHack").length>0){
        try{
            $(".svgHack").replaceWith(function(){
                var svg=$(this);
                var id = svg.parent()[0].id;
                var img = svg.children()[0];
                var newimg = $("");
                newimg.css('height',img.height+"px");
                newimg.css('width',img.width+"px");
                newimg.css('position','relative');
                newimg.attr("src",img.href.baseVal);
                newimg.attr("class","olAlphaImg");
                newimg.attr("id",id+"_innerImage");
                return newimg;
            });
        }catch(err){console.log(err.message);}
    }

}
于 2013-05-18T06:13:53.420 回答