Mapboxのサイドパネルとポリゴンの相互作用

Question

私は、マップ上のサイドパネルや多角形で画像間の相互作用を作るしようとしていますので、サイドパネルがmousescrollを経由して移動したときに、同じ名前の対応するポリゴンが焦点になります。

、必要に応じて私のcurrent attemptがmousescrollsに応答しません。私が取ったものよりも別のアプローチがありますか？

$('.sidebar').bind('mousewheel', function(e){ 
    $("#help").html(' '); 
    var winTop = $(this).scrollTop(); 
    var $imgs = $('.sidebar').find('img'); 
    var $midElement; 
    var distance = null; 
    var currDistance = 0; 
    var minHeight = $(window).scrollTop(); 
    var maxHeight = $(window).height(); 

    var img_h=$('.sidebar').find('img'); 
    var img_h1=img_h.height()/2; 

    var middleHeightA = (maxHeight + minHeight)/2; 
    var middleHeight = middleHeightA - img_h1; 
    $.each($imgs, function() { 

    currDistance = Math.abs(middleHeight - $(this).position().top); 
if (distance == null || currDistance < distance) { 
    /*$midElement = $(element);*/ 
    distance = currDistance; 
     for (j=0;j<polygons1.length;j++) { 
      polygons1[j].setStyle({color: '#fff',fillColor:'#000', weight:'1px'}); 
     } 

    var scrid=$(this).attr('id'); 
     for (j=0;j<help.length;j++) { 
      id=help[j]; 
      if(id==scrid) 
      {    
       polygons1[j].openPopup(polygons1[j].getBounds().getCenter());  
       map.setView(polygons1[j].getBounds().getCenter(),10); 
       polygons1[j].setStyle({color: '#e72f2a',fillColor:'#e72f2a',weight:'7px'}); 
       $('.thumbnail').removeClass('active'); 
       $('.'+scrid).addClass('active');     
      } 
     } 
} 



    var scrid=$(this).attr('id'); 
     for (j=0;j<help.length;j++) { 
      id=help[j]; 
      if(id==scrid) 
      {    
       polygons1[j].openPopup(polygons1[j].getBounds().getCenter());  
       map.setView(polygons1[j].getBounds().getCenter(),10); 
       polygons1[j].setStyle({color: '#e72f2a',fillColor:'#e72f2a',weight:'7px'}); 
      } 
     }  
}*/ 

Answer 1

debounce機能を使用することをお勧めします。デバウンス機能は、機能が発動できる速度を制限します。この考え方は、マウスホイールのイベントが発生するたびにポリゴンをフォーカスさせるのではなく、一種ののクールダウンでフォーカスします。

デバウンス機能は、すでにlodash、例えば、多くのライブラリで実装されています。あなたがしなければならないのは、あなたのmousewheelコールバックをラップすることだけです。ような何か：

$('.sidebar').bind('mousewheel', _.debounce(function(e){ 
    $("#help").html(' '); 
    ... 
), 100}); 

optionsのparamに注意しては、lodash実装では、おそらくあなたは、たとえばmaxWaitのために、それらのいずれかを使用したいと思います。