防止或删除传单效果添加/删除图层

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

感谢大家的时间和帮助！

更新：我正在寻找这样的东西：http://bibliotecavirtualdefensa.es/BVMDefensa/i18n/consulta/registro.cmd?id=17092

Answer 1

在实际移除其他层之前留一个短暂的超时时间，因为即使它们已经正确加载，新图块的出现也会有一点延迟和过渡。您可能还需要强化您的“removeAllLayersExcept”功能，以涵盖在前一个瓷砖图层之前加载更新的瓷砖图层的情况。否则，前一层将使新层从地图中删除。但是你还需要处理用户手动向后拖动光标的情况。