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

在实际删除其他图层之前保留一个短暂的超时，因为新图块会出现一点延迟和转换，即使它们已经正确加载也是如此。你可能还需要强化你的＆＃34; removeAllLayersExcept＆＃34;用于覆盖在前一个Tile Layer之前加载更新Tile Layer的情况。否则，前一层将使新的图层从地图中删除。但是当用户手动向后拖动光标时，您还需要处理这种情况。

防止或移除小叶效果添加/移除层

1 个答案: