0
Guten Tag alle zusammen!Leerraum auf Layer-Update in 360-Grad-Viewer - Leaflet
Ich versuche, einen 360-Grad-Viewer mit Zoom-Steuerelement zu bauen. Dafür benutze ich Leaflet. Alles funktioniert gut, aber Layer-Update. Um den Bildcontainer des Ordners zu ändern, aktualisiere ich die Ebene der Ebene, aber bei dieser Änderung erscheint eine Leerstelle für einige Zeit (wenige ms). Ich habe auf Leaflet-Dokumenten, im Internet gesucht und versuche es selbst, aber ich kann das nicht lösen. Kennt jemand eine mögliche Lösung?
Danke an alle, die mir geholfen haben!
PD: Ich kann Ihnen auch keine Bilder geben, aber ich arbeite mit 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>
Ich vermutete, dass Leerzeichen aufgrund von URL-Änderung, aber mich selbst versuchen andere Möglichkeiten wie Bilder vorladen, Problem blieb. Ich werde jedoch Ihre Lösung versuchen. Danke für die Hilfe!! Ich werde antworten, wenn es fertig ist – victoradv
Ich habe einige Kachel-Layer erstellt, aber wie kann ich das Layers Control emulieren? Ich meine, ich habe versucht, vor dem Hinzufügen und Entfernen von Schichten, und das Verhalten war das gleiche – victoradv
Fertig !! Es gibt zwei Methoden, BringToBack und BringToFront. Laden aller Ebenen beim Laden der Webseite, Sie können beide verwenden, um Ebenen anzuzeigen oder auszublenden, aber danke für Ihre Aufmerksamkeit und Ihre Antwort – victoradv