0
안녕하세요 여러분!360도 뷰어에서 레이어 업데이트의 공백 - 리플릿
확대/축소 컨트롤을 사용하여 360도 뷰어를 작성하려고합니다. 이를 위해 저는 전단지를 사용하고 있습니다. 모든 것이 잘 작동하지만 레이어 업데이트. 폴더의 이미지 컨테이너를 변경하려면 레이어의 URL을 업데이트해야하지만이 변경에서 잠시 동안 (몇 밀리 초) 공백이 나타납니다. 나는 전단지 문서, 인터넷을보고 혼자 힘으로 노력했지만이 문제를 해결할 수 없습니다. 가능한 해결책을 아는 사람이 있습니까?
나를 도와 주신 모든 분들께 감사드립니다.
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>
공백은 URL 변경으로 인한 것이지만 이미지를 미리로드하는 것과 같은 다른 방법을 시도해 보니 문제가있었습니다. 그러나 나는 당신의 해결책을 시도 할 것입니다. 도와 주셔서 감사합니다!! – victoradv
타일 레이어를 만들었지 만 어떻게 레이어 컨트롤을 에뮬레이트 할 수 있습니까? 내 말은, 레이어를 추가하고 제거하기 전에 시도했지만 동작은 동일했습니다. – victoradv
완료했습니다! bringToBack과 bringToFront의 두 가지 메소드가 있습니다. 웹 페이지에서 모든 레이어를로드하면 두 레이어를 모두 표시하거나 숨길 수 있습니다. 그러나 관심과 회신에 감사드립니다. – victoradv