0

私はこの興味深い問題に遭遇したので、私の解決策を共有し、誰かが提案するより良いものを持っているかどうかを確認したいと思いました.

背景:

Google (ベース)、ポリゴンを含む KML レイヤー、および Google Charts API からの非常に大きなアイコンを含む Layer.Markers レイヤーの 3 つのレイヤーを含む OpenLayers マップ。

私たちが達成したいこと：

Control.SelectFeature を使用して、マウスを移動するときに kml レイヤーを強調表示/選択します。マーカー レイヤーにはまったく関心がありません。

問題:

マウスがマーカー アイコンの 1 つの上にある場合、イベントはその下の kml レイヤーに渡されません。

試した解決策：

この質問を確認してください: OpenLayers マーカー レイヤーを強制的に上に描画し、その下に選択可能なレイヤーを配置する

受け入れられた回答、私のコメント、および@Fraserの回答の両方。私が知る限り、@Fraserの答えは問題にほとんど影響を与えませんでした。@Ringdahlの回答と「pointer-events：none」の適用の組み合わせにより、問題が解決したように見えました... Internet Explorerを除くすべての場合（驚くことではありません）。

4

1 に答える 1

0

Internet Explorerの問題を解決するために私が最終的に実装したのはこれです。

(IEの場合)マーカーレイヤーのすべての画像をsvgに置き換えます。これにより、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 に答える