5

以前にここに投稿したことはありませんが、よく読んだので、ルールに違反しないことを願っています...

リーフレット マップ上に一種のマスク イメージ (透明な円形の穴がある黒い四角形) を配置しようとしています。古いオシロスコープ画面に表示された丸い地図のように見えます;-)。絶対上に配置: 0px; 下: 0px;. 固定、ズームまたはパンとは無関係。

画像を表示できます。場合によっては、マップをパンして透明な穴にズームすることもできます。X を押してマーカーのポップアップを閉じることもできますが、何を試しても決して管理できません。クリックまたはタッチしたときにマーカーポップアップが表示されるようにします。

PNG 画像または生の SVG コードを使用し、z-index を変更するか、div であるかどうかにかかわらず、無数の組み合わせを試しました。同じコンテナ、別のコンテナ、リーフレット コントロール ペインに追加してみました。

document.getElementsByClassName("leaflet-control-container")[0].innerHTML += '\
    <svg style="position: absolute; top:  0px; left: 0px; height: 360px; width: 360px;">\
        <g>\
            <path style="fill-rule: evenodd; fill: black; stroke: black; stroke-width: 0"\
                  d="M 0,0 L 360,0 L 360,360 L 0,360 z M 180,10 A 170,170 0 0,1 180,350 A 170,170 0 0,1 180,10 z"></path>\
        </g>\
    </svg>';

画像は正常に表示されますが、Leaflet とのやり取りが壊れており、ポップアップのやり取りができません。

SVG の z-index を -1 に設定すると、マスクは表示されなくなりますが、ポップアップは表示されます。

4

2 に答える 2

7

最も簡単な方法は、おそらく PNG と次の css 行を使用することです。

ポインター イベント:なし;

要素の下でのマウス操作が可能になります。

IE の互換性ともう少し詳しい情報については、こちらを参照してください: DIV をクリックして基になる要素に移動します。

于 2013-08-30T18:45:57.613 に答える
0

マップ上にマスクを貼り付ける代わりに、マップを div 内に配置するとどうなるborder-radius:50%; overflow:hiddenでしょうか? ただし、私は Leaflet を使用したことがないので、そのような条件下では正しく機能しないことはわかっています。

于 2013-08-30T18:45:51.990 に答える