リーフレットの相互作用を一時的に無効にする

Leaflet.jsでMapviewのゾーミング/ドラッグを一時的に無効にするにはどうすればよいですか？一時的にすることが重要です。また、再度有効にするオプションも必要です。

leaflet

CSSでこれを行う方法はありますか？メディアクエリを使用してモバイルでのドラッグを無効にする必要があります。その上に透明なレイヤーを設定しようとしましたが、そのレイヤーを右クリックします。ポインターイベントでも遊んだが、運はなかった。適切なアプローチは、おそらく-webkit-user-drag：none;を使用することです。しかし、私はそれを見つけることができるすべての要素に適用しましたが、それでも運はありません。ありがとう。

私はこの質問に答えを下回ります。

— hayatbiralem

回答:

あなたがしたいこと（あなたの地図が電話であると仮定map）

map.dragging.disable();
map.touchZoom.disable();
map.doubleClickZoom.disable();
map.scrollWheelZoom.disable();
map.boxZoom.disable();
map.keyboard.disable();
if (map.tap) map.tap.disable();
document.getElementById('map').style.cursor='default';

で再びオンにします

map.dragging.enable();
map.touchZoom.enable();
map.doubleClickZoom.enable();
map.scrollWheelZoom.enable();
map.boxZoom.enable();
map.keyboard.enable();
if (map.tap) map.tap.enable();
document.getElementById('map').style.cursor='grab';

— カルビン
ソース

どうもありがとうございました。私はとても間違って探していました_それを行うには単一の方法があるに違いないと思った。

— ベルンハルト

このソリューションにはいくつかの問題があります。マウスカーソルはまだ手です。地図上でタッチジェスチャを使用したページスクロールはできません。ポップオーバーを開くと、マップが移動しても、パンバックすることはありません。

— netAction

@netAction、タッチジェスチャーのスクロール問題の解決策はありますか？

— クリスフレンゲン

@ChrisFremgen：map.dragging.disable（）; 地図がスクロールジェスチャの取得を停止するというトリックを行います。

— netAction

zoomInのみを無効にする方法はありますか？

— ハワードD

各ハンドラを手動で無効にしたくない場合は、すべてのハンドラをループして、それらを無効/有効にすることができます。

無効にする

map._handlers.forEach(function(handler) {
    handler.disable();

});

有効にする

map._handlers.forEach(function(handler) {
    handler.enable();

});

— ウストロツ
ソース

非パブリックプロパティ（_handlers）を使用すると、リーフレットパッチのバージョンが変更された場合でも、コードにエラーが発生する可能性があることに注意してください。機能のリクエストは、リーフレットに提出する必要があります;）

— Luckylooke

地図をヘルパーコンテナでラップし、のような単純なCSSクラスで無効にできると思いますis-locked。

私が話していることは次のとおりです。

.map-container {
  position: relative;
}

.map-container .map {
  position: relative;
  z-index: 1;
}

.map-container.is-locked:after {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  content: "";
  display: block;
}

役に立てば幸いです。

— ハヤトビラレム
ソース