1. 最终实现效果如下
2、样式表
.tour-wapper {
pointer-events: none;
}
.tour-text-wapper {
width: 100%;
height: 80px;
}
.tour-wapper .tour-text {
line-height: 80px;
background: rgba(0,0,0,0.6);
text-align: center;
}
.tour-wapper .tour-btn-group{
display:table;
margin:20px auto 0;
}
.tour-wapper .tour-btn-group .tour-btn {
display:none;
background: rgba(0,0,0,0.6);
border:3px solid rgba(255,51,51,.7);
float:left;
margin-left:50px;
width:120px;
height:40px;
line-height:40px;
text-align:center;
border-radius:40px;
pointer-events: all;
}
.tour-wapper .tour-btn-group .tour-btn.show {
display:inline-block;
}
3. tour.js 插件代码
异步从后台获取导览数据，数据为集合，单个Item的数据格式为：
{
Ath: 59.68952,
Atv: 57.36616,
Id: 0,
Name: "tour_B6ui1igoZ",
Number: 2,
SceneId: 1,
SceneName: "scene_58",
SceneTitle: "银杏人家",
Second: 5,
Text: "",
ToggleEffectAction: "SLIDEBLEND(1,-45,.2)",
ToggleEffectValue: "对角线",
Voice: {MediaId: 0, Url: "", Title: "0", Text: ""}
}
function krpanoplugin() {
var _this = this;
var krpano = null;
var plugin = null;
var _tourId = $("#__tourId").val();
var tourData = null;
var timeoutList = [];
var currentPointIndex = 0;
var currentPointRemainingTime = 0;
var currentPointRemainingTimeout = null;
var tour = null;
_this.registerplugin = function (krpanointerface, pluginpath, pluginobject) {
krpano = krpanointerface;
plugin = pluginobject;
// 后台获取数据
$.get('/GetTourList', { workId: _tourId }, function (data) {
if (data.flag) {
tourData = data.data;
Mod.init();
}
}, "json");
};
var Mod = {
// 初始化
init: function () {
if (tourData.TourList.length > 0){
tour = document.createElement("div");
$(tour).addClass("tour-wapper");
var tour_html = '<div class="tour-text-wapper">'
+ '<div id="tour-text" class="tour-text">'
+ '</div>'
+ '</div>'
+ '<div class="tour-btn-group" >'
+ ' <div id="btn-1" class="tour-btn show">导览</div>'
+ ' <div id="btn-2" class="tour-btn">暂停</div>'
+ ' <div id="btn-3" class="tour-btn">继续</div>'
+ ' <div id="btn-4" class="tour-btn">结束</div>'
+ '</div> ';
$(tour).html(tour_html);
plugin.sprite.appendChild(tour);
Mod.init_event();
}
},
// 移动视角
move: function (item, index, timeout, second) {
var time = setTimeout(function () {
let prePoint = tourData.TourList[index - 1];
currentPointIndex = index;
if (prePoint.SceneName !== item.SceneName) {
krpano.call("loadscene(" + item.SceneName + ",null,MERGE," + prePoint.ToggleEffectAction + ")");
$("#tour-text").html("");
}
else {
$("#tour-text").html(prePoint.Text);
}
var currentSceneName = krpano.get("scene[get(xml.scene)].name");
if (currentSceneName !== item.SceneName) {
krpano.call("loadscene(" + item.SceneName + ",null,MERGE," + prePoint.ToggleEffectAction + ")");
}
console.log(item);
krpano.call("getlooktodistance(tour_ponint_distance," + item.Ath + "," + item.Atv + ")");
var distance = krpano.get("tour_ponint_distance");
var speed = distance / second;
krpano.call("lookto(" + item.Ath + "," + item.Atv + ",null,linear(" + speed + "),false,true)");
if (prePoint.Voice.Url !== "") {
krpano.call("playsound(tour_music, " + prePoint.Voice.Url + ", 0);");
}
else {
krpano.call("pausesoundtoggle(tour_music);");
}
// 计算剩余时间
Mod.remainingTime(second);
}, timeout * 1000);
timeoutList.push(time);
},
// 当前点剩余时间
remainingTime: function (endTime) {
currentPointRemainingTimeout = setTimeout(function () {
if (currentPointRemainingTime === 0) {
clearTimeout(currentPointRemainingTimeout);
currentPointRemainingTime = endTime;
}
else {
currentPointRemainingTime--;
Mod.remainingTime(currentPointRemainingTime);
}
},1000);
},
// 开始移动
start: function () {
$("#btn-1").removeClass("show");
$("#btn-2").addClass("show");
$("#btn-4").addClass("show");
var firstPoint = tourData.TourList[0];
var currentSceneName = krpano.get("scene[get(xml.scene)].name");
var timeout = 1;
if (currentSceneName !== firstPoint.SceneName) {
krpano.call("loadscene(" + firstPoint.SceneName + ",null,MERGE,BLEND(1))");
}
krpano.call("lookto(" + firstPoint.Ath + "," + firstPoint.Atv + ");");
$.each(tourData.TourList, function (index, item) {
if (index > 0) {
Mod.move(item, index, timeout, tourData.TourList[index - 1].Second);
timeout += tourData.TourList[index - 1].Second;
}
});
// 开始导览隐藏皮肤组件
krpano.call("set(layer['skin_control_bar'].visible,false)");
krpano.call("pausesoundtoggle(bg_music); pausesoundtoggle(bg_voice);");
},
// 继续移动
continue: function () {
$("#btn-3").removeClass("show");
$("#btn-2").addClass("show");
var timeout = 0;
$.each(tourData.TourList, function (index, item) {
if (index > 0 && index === currentPointIndex) {
Mod.move(item, index, timeout, currentPointRemainingTime);
timeout += tourData.TourList[index - 1].Second;
}
else if (index > currentPointIndex) {
Mod.move(item, index, timeout, tourData.TourList[index - 1].Second);
timeout += tourData.TourList[index - 1].Second;
}
});
let prePoint = tourData.TourList[currentPointIndex - 1];
if (prePoint.Voice.Url !== "") {
krpano.call("pausesoundtoggle(tour_music);");
}
},
// 暂停移动
pause: function () {
$("#btn-2").removeClass("show");
$("#btn-3").addClass("show");
krpano.call("stoplookto();");
$.each(timeoutList, function (index, item) {
clearTimeout(item);
});
timeoutList.splice(0, timeoutList.length);
clearTimeout(currentPointRemainingTimeout);
let prePoint = tourData.TourList[currentPointIndex - 1];
if (prePoint.Voice.Url !== "") {
krpano.call("pausesoundtoggle(tour_music);");
}
},
// 结束移动
end: function () {
$("#btn-1").addClass("show");
$("#btn-2").removeClass("show");
$("#btn-3").removeClass("show");
$("#btn-4").removeClass("show");
$("#tour-text").html("");
krpano.call("stoplookto();");
$.each(timeoutList, function (index, item) {
clearTimeout(item);
});
currentPointIndex = 0;
timeoutList.splice(0, timeoutList.length);
// 结束导览显示皮肤组件
krpano.call("set(layer['skin_control_bar'].visible,true)");
krpano.call("pausesoundtoggle(bg_music); pausesoundtoggle(bg_voice);");
krpano.call("stopsound(tour_music);");
},
//加载相关事件
init_event: function () {
//开始导览
$("#pano").on("click", "#btn-1", function () {
Mod.start();
});
//暂停导览
$("#pano").on("click", "#btn-2", function () {
Mod.pause();
});
//继续导览
$("#pano").on("click", "#btn-3", function () {
Mod.continue();
});
// 结束导览
$("#pano").on("click", "#btn-4", function () {
Mod.end();
});
}
};
// 取消plugin后触发
_this.unloadplugin = function () {
plugin = null;
krpano = null;
};
_this.onresize = function (width, height) {
return false;
};
}
4. 页面引用将导览插件添加至Krpano中
_krpano.call("addplugin('main');"
+ "set(plugin['main'].keep,'true');"
+ "set(plugin['main'].devices,'html5');"
+ "set(plugin['main'].width,100%);"
+ "set(plugin['main'].align,'leftbottom');"
+ "set(plugin['main'].y,'160');"
+ "set(plugin['main'].x,'0');"
+ "set(plugin['main'].url,'/static/js/tour.js');"
+ "set(plugin['main'].onloaded,'initial_plugin();');");
转载：https://blog.csdn.net/VRlook/article/details/101216309
查看评论