防止或刪除傳單效果添加/刪除圖層

Question

大家下午好！

我正在嘗試使用傳單製作360度觀看者。一切工作正常，但過渡添加/刪除圖層。這意味着我不需要交換轉換。我發現防止這種情況發生的唯一方法是將所有拼貼圖層一起添加，並使用「bringToFront」和「bringToBack」方法進行播放，但我必須加載80個具有不同縮放級別的拼貼圖層，並且它會使觀看者變得非常緩慢。

所以，我的問題是：沒有人知道如何在地圖中只保留一個瓦片層，並添加或刪除上一層/下一層防止這種過渡效果，而無需添加所有80層？

我的工作代碼爲：

window.onload = init; 

    var map = ""; 
    var oldSrc = ""; 
    var gui = ""; 
    var path = ""; 
    var imgcounter = 1; 
    var extension = "_img/"; 
    var files = new Array(80); 
    var layers = new Array(80); 
    var activate = ""; 

    function init() { 
     oldSrc = './360/TNFF_0PO6055M_001/TNFF_0PO6055M_001-001_img/'; 
     gui = oldSrc.indexOf("-"); 
     path = oldSrc.substr(0, gui + 1); 

     getFiles(); 

     //SLIDER 
     $(function() { 
      $("#slider").slider({ 
       range : "min", 
       value : 1, 
       min : 1, 
       max : 80, 
       slide : function(event, ui) { 

        var photonumber = ui.value; 

        for (var i = 0; i < layers.length; i++) { 
         if (i == photonumber) { 
          layers[i].bringToFront(); 
         } else { 
          layers[i].bringToBack(); 
         } 
        } 

        imgcounter = ui.value; 

       } 
      }); 

     }); 

     //BUTTONS 
     $('.custom_previous').bind('click', function(e) { 
      rotateLeft(); 
     }); 

     $('.custom_play').bind('click', function(e) { 
      play(); 
     }); 

     $('.custom_stop').bind('click', function(e) { 
      stop(); 
     }); 

     $('.custom_next').bind('click', function(e) { 
      rotateRight(); 
     }); 

     //LEAFLET 
     map = L.map('image-map').setView([0, 0], 2); 
     buildLayers(); 
     /* 
     var southWest = map.getBounds().getSouthWest(), 
     northEast = map.getBounds().getNorthEast(), 
     bounds = L.latLngBounds(southWest, northEast); 
     map.setMaxBounds(bounds); 
     */ 
    } 

    //GET FOLDER FILES 
    function getFiles() { 
     oldSrc = './360/TNFF_0PO6055M_001/TNFF_0PO6055M_001-001_img/'; 
     gui = oldSrc.indexOf("-"); 
     path = oldSrc.substr(0, gui + 1); 
     var zero = "0"; 
     var doubleZero = "00"; 

     for (var i = 1; i <= 80; i++) { 
      if (i >= 0 && i <= 9) { 
       files[i - 1] = path + doubleZero + String(i) + extension; 
      } else { 
       files[i - 1] = path + zero + String(i) + extension; 
      } 
     } 
    } 

    //BUILD TILE LAYERS 
    function buildLayers() { 
     for (var i = 0; i < layers.length; i++) { 
      layers[i] = L.tileLayer.zoomify(files[i], { 
       width : 8688, 
       height : 5792, 
       minZoom : 1, 
       maxZoom : 4, 
       attribution : 'LBNV' 
      }).addTo(map); 
     } 
    } 

    //ROTATE LEFT 
    function rotateLeft() { 
     if (imgcounter >= 80) { 
      imgcounter = 1; 
     } else { 
      imgcounter++; 
     } 

     for (var i = 0; i < layers.length; i++) { 
      if (i == imgcounter) { 
       layers[i].bringToFront(); 
      } else { 
       layers[i].bringToBack(); 
      } 
     } 
     $("#slider").slider('value', imgcounter); 
    } 

    //ROTATE RIGHT 
    function rotateRight() { 
     if (imgcounter <= 1) { 
      imgcounter = 80; 
     } else { 
      imgcounter--; 
     } 

     for (var i = 1; i <= 80; i++) { 
      if (i == imgcounter) { 
       layers[i - 1].bringToFront(); 
      } else { 
       layers[i - 1].bringToBack(); 
      } 
     } 
     $("#slider").slider('value', imgcounter); 
    } 

    //PLAY 
    function play() { 
     activate = setInterval(animate, 250); 
    } 

    //PLAY ANIMATION 
    function animate() { 
     if (imgcounter > 80) { 
      imgcounter = 1; 
     } 

     for (var i = 0; i < layers.length; i++) { 
      if (i == imgcounter) { 
       layers[i].bringToFront(); 
      } else { 
       layers[i].bringToBack(); 
      } 
     } 
     imgcounter++; 
     $("#slider").slider('value', imgcounter); 
    } 

    //STOP 
    function stop() { 
     clearInterval(activate); 
    } 

Thaks大家對你的時間和你的幫助！

UPDATE：我正在尋找這樣的事情：http://bibliotecavirtualdefensa.es/BVMDefensa/i18n/consulta/registro.cmd?id=17092

Answer 1

留下一個短暫的停頓實際刪除其他層（一個或多個）之前，因爲新的地磚都會有一點延遲和過渡出現，即使是已正確加載。你可能還需要加強你的「removeAllLayersExcept」函數來覆蓋最近一個Tile Layer在前一個之前加載的情況。否則，以前的圖層將使新地圖從地圖中移除。但是，當用戶手動向後拖動光標時，您還需要處理這種情況。