2017-02-21 72 views
3

У меня может быть много маркеров в какой-то области, но это не очень полезно для отображения подсказки, если есть 5 из них в той же области, как этот экран:Скрыть подсказку в буклете для диапазона масштабирования

enter image description here

Возможно ли использовать hide эти подсказки из диапазона зумирования? Например, скрыть подсказку от уровня 0 до 5.

Может быть, используя метод getZoom() с событием на зум, как:

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

Или что-то более сложное, но лучше, которые могли бы скрыть, если есть слишком много маркеров в той же области?

ответ

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; 
}) 

Edit: также см this StackOverflow question.

+0

Большое спасибо, это прекрасно, извините за то, что он не нашел его раньше! – Baptiste

1

Принятый ответ не работает для меня (я использую листовку 1.2.0), но здесь это модифицированная версия, которая использует 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}) 
); 

на отдельной, но связанную с запиской, ссылка в принятом ответе есть на StackOverflow вопроса о листовке этикетки плагине , который был инкорпорирован оцененный в ящике Листовки как наконечник инструмента и теперь устаревший, поэтому не теряйте время, если у вас есть последняя версия Leaflet.