Question

我可能在某些区域有很多标记，但如果在同一区域中有5个标记，则显示工具提示并不是很有用，如此屏幕：

是否可以从缩放范围hide那些工具提示？例如，隐藏0到5级的工具提示。

可能使用getZoom()方法在缩放上使用事件：

if the user zoom {
    if (getZoom() < 5) {
      hide all tooltip
    }
}

或者更复杂但更好的东西，如果在同一区域有太多标记，可能会隐藏它？

Answer 1

接受的答案对我不起作用（我正在使用Leaflet 1.2.0），但这是一个使用Leaflet工具提示的permanent选项的修改版本：

var lastZoom;
mymap.on('zoomend', function() {
    var zoom = mymap.getZoom();
    if (zoom < tooltipThreshold && (!lastZoom || lastZoom >= tooltipThreshold)) {
        mymap.eachLayer(function(l) {
            if (l.getTooltip()) {
                var tooltip = l.getTooltip();
                l.unbindTooltip().bindTooltip(tooltip, {
                    permanent: false
                })
            }
        })
    } else if (zoom >= tooltipThreshold && (!lastZoom || lastZoom < tooltipThreshold)) {
        mymap.eachLayer(function(l) {
            if (l.getTooltip()) {
                var tooltip = l.getTooltip();
                l.unbindTooltip().bindTooltip(tooltip, {
                    permanent: true
                })
            }
        });
    }
    lastZoom = zoom;
})

使用此方法，您还必须在最初将工具提示绑定到标记时设置permanent选项：

(mymap.getZoom() >= tooltipThreshold
    ? marker.bindTooltip(tooltipText, {permanent:true})
    : marker.bindTooltip(tooltipText, {permanent:false} )
);

在一个单独但相关的说明中，接受答案中的链接是关于Leaflet标签插件的stackoverflow问题，该插件已作为工具提示合并到Leaflet核心中，现在已经过时，所以不要浪费时间如果你有最新版的Leaflet。

Answer 2

要根据缩放范围隐藏工具提示，请参阅引用Leaflet issue conversation的this JS bin。代码重复如下：

var lastZoom;
map.on('zoomend', function() {
  var zoom = map.getZoom();
  if (zoom < 15 && (!lastZoom || lastZoom >= 15)) {
    map.eachLayer(function(l) {
      if (l.getTooltip) {
        var toolTip = l.getTooltip();
        if (toolTip) {
          this.map.closeTooltip(toolTip);
        }
      }
    });
  } else if (zoom >= 15 && (!lastZoom || lastZoom < 15)) {
    map.eachLayer(function(l) {
      if (l.getTooltip) {
        var toolTip = l.getTooltip();
        if (toolTip) {
          this.map.addLayer(toolTip);
        }
      }
    });
  }
  lastZoom = zoom;
})

修改，另请参阅this StackOverflow question。

Answer 3

如果你想使用leaflet的默认行为隐藏/显示标签，如果缩放超出特定范围并显示所有标签，那么对{{ label.js文件的功能。

hideLabel

Answer 4

我在项目中偶然发现了这一点，最终使用了以下内容：

var tooltipThreshold = 12;
mymap.on('zoomend', function() {
  if (mymap.getZoom() < tooltipThreshold) {
      $(".leaflet-tooltip").css("display","none")
  } else { 
      $(".leaflet-tooltip").css("display","block")
  }
})

或使用lastZoom：

var lastZoom;
var tooltipThreshold = 12;
mymap.on('zoomend', function() {
    var zoom = mymap.getZoom();
    if (zoom < tooltipThreshold && (!lastZoom || lastZoom >= tooltipThreshold)) {
        $(".leaflet-tooltip").css("display","none")
    } else if (zoom >= tooltipThreshold && (!lastZoom || lastZoom < tooltipThreshold)) { 
        $(".leaflet-tooltip").css("display","block")
    }
    lastZoom = zoom;
})

基于Loren Maxwell的答案。

要从一开始就禁用传单工具提示（如果要在没有工具提示的情况下启动地图），请将其添加到CSS：

.leaflet-tooltip {
  display: none;
}

Answer 5

老问题，但是在使用Leaflet v1.6.0之后，我想出了一个修改后的版本：

var lastZoom;
var tooltipThreshold = 12;
map.on('zoomend', function() {
    var zoom = map.getZoom();
    if (zoom < tooltipThreshold && (!lastZoom || lastZoom >= tooltipThreshold)) {
        map.getPane('tooltipPane').style.display = 'none';
    } else if (zoom >= tooltipThreshold && (!lastZoom || lastZoom < tooltipThreshold)) { 
        map.getPane('tooltipPane').style.display = 'block';
    }
    lastZoom = zoom;
})

要首次隐藏工具提示，可以使用 map.setView（）， map.setZoom（）设置缩放比例或使用：

map.getPane('tooltipPane').style.display = 'none';

Answer 6

我使用可见性来实现相同的结果。我认为 .leaflet-tooltip 类适用于所有传单应用。

//Hide tooltips based on zoom level. Currently This is set to 17
map.on('zoomend', function(e){
    var zoomLevel = map.getZoom();
    if (zoomLevel < 17 ){
        [].forEach.call(document.querySelectorAll('.leaflet-tooltip'), function (el) {
            el.style.visibility = 'hidden';
        });
    }else{
        [].forEach.call(document.querySelectorAll('.leaflet-tooltip'), function (el) {
            el.style.visibility = 'visible';
        });
    }
});

隐藏小册子中的工具提示以获得缩放范围

6 个答案: