krpano全景在vue中的应用

全景krpano官方文档：https://krpano.com/docu/js/#top1.项目要求：开发一个线上博物馆，实现全景展现2.设计：把全景开发放到前端vue中3.实现步骤：3.1 搭建vue项目：参考https://blog.csdn.net/qq_42563079/article/details/865265073.2 在vue中引入krpano，使用k...

一个韩韩韩

7857人浏览 · 2019-07-24 17:29:01

一个韩韩韩 · 2019-07-24 17:29:01 发布

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

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

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

3.实现步骤：

3.1 搭建vue项目：参考十分钟上手-搭建vue开发环境_krpano 开发环境-CSDN博客

3.2 在vue中引入krpano，使用krpano处理(参考krpano教程 - krpano中文网)后的文件放入项目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数据

3.7 项目资源地址，demo仅供参考https://download.csdn.net/download/qq_42563079/88562755

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^