全景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

GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支：2 个月前 )
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
Logo
GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

[转载]在Windows环境下安装GNU Radio

转自：在Windows环境下安装GNURadio_恐弱智_新浪博客GNU Radio是用Python开发的，大部分开源的工程能够在Linux环境下运行良好，而Windows下却运行的很勉强，而且安装配置都很复杂。GNU Radio算是个例外了，不光提供了Windows的二进制安装，还有比较详细的说明。我是Python小白，所以折腾了好久才弄好，特意记录下来，免得以后再装还折腾。GNU Radio的

avatar GitCode 开源社区

centOS 8 使用dnf安装Docker

DNF是什么？CentOS 8使用YUM软件包管理器版本v4.0.4。现在，该版本使用DNF(已删除YUM)。DNF是软件包管理器。它会在Linux发行版上安装，执行更新并删除软件包。使用DNF安装Docker跳过具有损坏依赖性的程序包一个有效的解决方案是使您的CentOS 8系统使用以下--nobest命令安装最符合条件的版本：sudo dnf install docker...

avatar GitCode 开源社区

定时同步数据库表(mysql+linux+crontab)

sync.sh里面的参数需要改变，ip/username/password/database/tablesync.sh#!/bin/sh# Please change the IP and password of the data source db.# Then change the table name.filename=/home/nington/db/$(date +%Y-%m

avatar GitCode 开源社区