krpano全景在vue中的应用

本文主要是介绍krpano全景在vue中的应用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

全景krpano官方文档：https://krpano.com/docu/js/#top

1.项目要求：开发一个线上博物馆，实现全景展现

2.设计：把全景开发放到前端vue中

3.实现步骤：

3.1 搭建vue项目：参考 https://blog.csdn.net/qq_42563079/article/details/86526507

3.2 在vue中引入krpano，使用krpano处理(参考http://www.krpano360.com/)后的文件放入项目static中

3.3 在index.html中引入tour.js


<body>
  <script src="static/krpano/tour.js"></script>
  <div id="app"></div>
  <!-- built files will be auto injected -->
</body>

3.4 在vue文件中的处理--实现js和xml交互


<template>
    <div id="pano" style="width:100%;height:100%;">
      <noscript>
        <table style="width:100%;height:100%;">
          <tr style="vertical-align:middle;">
            <td>
              <div style="text-align:center;">
ERROR:
                <br />
                <br />Javascript not activated
                <br />
                <br />
              </div>
            </td>
          </tr>
        </table>
      </noscript>
    </div>
</template>
<script>
   var krpano = null; 
   function krpano_onready_callback (krpano_interface) {
krpano = krpano_interface;
}
 
    export default {
name="test",
      mounted: function() {
embedpano({
          swf: "../static/krpano/tour.swf",
          xml: "../static/krpano/tour.xml",
          target: "pano",
          html5: "auto",
          mobilescale: 1.0,
          passQueryParameters: true,
          onready: krpano_onready_callback //回调函数，获取Krpano 对象
});
        this.getHotspots(1, 3);
},
       methods: {
          async getHotspots(currentPage, pageSize) {
            const dataTest= await getHotspot({
            pageNum: currentPage,
            pageSize: pageSize
});
            //实现js和xml交互
krpano.call('set(hotspot[spot_0_2].title,'+dataTest.data.message+')')
}
}
    
}
</script>

3.5 实现xml和js交互

在tour.xml中，hotspot的点击事件


<!-- 热点点击事件 -->
<action name="onShowDec">
js(hotspotClick(get(name)));
</action>

在index.html中创建一个点击事件函数hotspotClick


<script>
function hotspotClick(parms) {
alert(parms)
}
</script>

3.6 文物上的热点点击显示详细介绍，我觉得介绍画面用xml去画比较复杂，所以把热点点击事件用xml和js交互实现，把点击的热点存入浏览器缓存，根据不同的热点显示不同画面，也可用js和xml交互，用xml布局，js获得数据向xml中set数据

这篇关于krpano全景在vue中的应用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

krpano全景在vue中的应用

相关文章

PostgreSQL的扩展dict_int应用案例解析

Python中re模块结合正则表达式的实际应用案例

Java MQTT实战应用

前端如何通过nginx访问本地端口

HTML中meta标签的常见使用案例(示例详解)

HTML input 标签示例详解

HTML img标签和超链接标签详细介绍

CSS3打造的现代交互式登录界面详细实现过程

HTML5 中的＜button＞标签用法和特征

HTML5实现的移动端购物车自动结算功能示例代码