Question

大家下午好！

我正在尝试使用变焦控制来构建360度观察器。为此，我使用了Leaflet。一切正常但层更新。要更改文件夹的图像容器，我正在更新图层的网址，但在此更改中会出现一段空白（几毫秒）。我一直在寻找传单文档，互联网，并尝试我自己，但我无法解决这个问题。有谁知道任何可能的解决方案？

感谢大家帮助我！

PD：我也不能给你图片，但是和TileLayers一起工作。

CODE：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Untitled Document</title>

        <link href="style/jquery-ui.css"rel="stylesheet"/>
        <link href="style/bootstrap.css" rel="stylesheet">
        <link href="style/main.css" rel="stylesheet">
        <link href="http://cdn.leafletjs.com/leaflet-0.7.4/leaflet.css" rel="stylesheet" />

        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->

    </head>
    <body>

        <img src="img norman foster/header.PNG" id="img_header" />

        <div class="threesixty visor" id="image-map"></div>

        <div id="slider"></div>

        <div class="buttons">
            <a class="btn custom_previous"><img src="src/images/rotateleftbutton.png" class="img-responsive" alt="Girar hacia la izquierda" /></a>
            <a class="btn custom_next"><img src="src/images/rotaterightbutton.png" class="img-responsive" alt="Girar hacia la derecha" /></a>
        </div>

        <img src="img norman foster/footer.PNG" id="img_footer" />

        <script src="http://cdn.leafletjs.com/leaflet-0.7.4/leaflet.js"></script>
        <script src="js/L.TileLayer.Zoomify.js"></script>
        <script src="js/jquery-1.11.3.min.js"></script>
        <script src="js/jquery-ui.js"></script>
        <script src="js/bootstrap.js"></script>
        <script type="text/javascript">
            window.onload = init;

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

            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;

                            if (photonumber >= 1 && photonumber < 10) {
                                photonumber = "00" + String(photonumber);
                                newSrc = path + String(photonumber) + extension;
                            } else {
                                newSrc = path + "0" + String(photonumber) + extension;
                            }

                            oldSrc = newSrc;
                            imgcounter = parseInt(photonumber);
                            src = newSrc;
                            leafleft();
                        }
                    });

                });

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

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

                //LEAFLET
                map = L.map('image-map').setView([0, 0], 2);

                layer = L.tileLayer.zoomify(oldSrc, {
                    width : 8688,
                    height : 5792,
                    minZoom : 1,
                    maxZoom : 4,
                    attribution : 'LBNV',
                    unloadInvisibleTiles : true
                }).addTo(map);

                var southWest = map.getBounds().getSouthWest(),
                    northEast = map.getBounds().getNorthEast(),
                    bounds = L.latLngBounds(southWest, northEast);
                map.setMaxBounds(bounds);

            }

            //URL CHANGE
            function leafleft() {

                layer.setUrl(newSrc);
                oldSrc = newSrc;
            }

            //LEFT BUTTON
            function changeimageLeft() {

                if (imgcounter == 80) {
                    imgcounter = 1;
                    newSrc = path + "00" + imgcounter + extension;
                } else if (imgcounter >= 1 && imgcounter < 10) {
                    imgcounter++;
                    if (imgcounter == 10) {
                        newSrc = path + "0" + imgcounter + extension;
                    } else {
                        newSrc = path + "00" + imgcounter + extension;
                    }
                } else {
                    imgcounter++;
                    newSrc = path + "0" + imgcounter + extension;
                }
                common();
            }

            //RIGHT BUTTON
            function changeimageRight() {

                if (imgcounter == 1) {
                    imgcounter = 80;
                    newSrc = path + "0" + imgcounter + extension;
                } else if (imgcounter >= 1 && imgcounter <= 10) {
                    imgcounter--;
                    if (imgcounter == 0) {
                        imgcounter = 1;
                        newSrc = path + "00" + imgcounter + extension;
                    } else if (imgcounter == 9) {
                        newSrc = path + "00" + imgcounter + extension;
                    } else {
                        newSrc = path + "00" + imgcounter + extension;
                    }
                } else {
                    imgcounter--;
                    newSrc = path + "0" + imgcounter + extension;
                }
                common();
            }

            function common() {

                layer.setUrl(newSrc);
                oldSrc = newSrc;
                $("#slider").slider('value', imgcounter);
            }

        </script>

    </body>
</html>

Answer 1

更改Zoomify Tile Layer的网址模板时看到的白屏瞬态很可能是由于平铺图层（包括Zoomify插件中的图层）在更改网址时的行为：他们使用以下方式重绘所有图块新的URL模板，因此当没有图像时，持续时间很短。

您可以通过简单地使用多个Tile图层并交换它们来缓解此行为，而不是重复使用相同的图层并更改其URL模板。然后你会有一个图层控件，但是你的“左”和“右”按钮而不是每层一个无线电。

但是，当前一个图层被新图层交换时，您可能仍会有一个瞬态，因此在从地图中实际删除上一个图层之前可能会包含一个延迟。

360度观察者层上的白色空间更新 - 单张

1 个答案: