Krpano使用Javascript Html5 Plugin 方法编写Krpano一键导览功能

1. 最终实现效果如下

Krpano一键导览功能

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();');");