在Vue项目中加载krpano全景图

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在Vue项目中加载krpano全景图相关的知识,希望对你有一定的参考价值。


在Vue-cli项目中做krpano全景图编辑器的时候,由于js插件的路径是动态的,做的过程中遇到了加载不到资源的难题,在网上搜索了好久也没找到合适的办法,最后想到了可能是JS加载的问题,于是解决了问题,下面跟大家分享一下做法。

首先, 在vue的路由页面中加载动态的js插件,需要等待JS文件加载完成之后,才能使用JS插件中的方法来加载全景图:

    // 加载动态JS文件
    var _doc = document.getElementsByTagName('head')[0];
    var js = document.createElement('script');
    js.setAttribute('type', 'text/javascript');
    js.setAttribute('src', jsUrl);    // jsUrl是JS文件的路径
    _doc.appendChild(js);
    
    // 下面是加载全景图, 针对不同浏览器做兼容
    if (document.all) { //如果是IE
      js.onreadystatechange = function () {
        if (js.readyState == 'loaded' || js.readyState == 'complete') {
          embedpano({                // js插件中的方法,用于加载全景图
            swf: that.tourSwfUrl,
            xml: that.tourXmlUrl,
            target: "pano",
            html5: "always",
            mobilescale: 1.0,
            passQueryParameters: true
          });
          that.krpano = document.getElementById("krpanoSWFObject");
        }
      }
    }
    else {
      js.onload = function () {
        embedpano({
          swf: this.tourSwfUrl,        // krpano全景图的swf文件路径
          xml: this.tourXmlUrl,        // krpano全景图的xml文件路径
          target: "pano",             
          html5: "auto",
          mobilescale: 1.0,
          flash: 'auto',
          passQueryParameters: true
        });
        this.krpano = document.getElementById("krpanoSWFObject")        // 保存全景图对象
      }
    }

然后就是将全景图显示在页面上


<div id="pano"></div>

这样全景图就能顺利加载出来了,第一次做前端知识分享,有不妥之处欢迎留言,谢谢!

原文地址:https://segmentfault.com/a/1190000017292935

以上是关于在Vue项目中加载krpano全景图的主要内容,如果未能解决你的问题,请参考以下文章

使用HTML一键打包IPA工具打包KRPANO全景项目

使用KRPano资源分析工具一键下载全景网站切片图

使用HTML一键打包EXE工具打包KRPANO全景项目

KRPANO资源分析工具下载720YUN全景图

KRPANO资源分析工具下载四方环视全景图

使用KRPano资源分析工具还原全景图片