krpano全景在vue中的应用

2023-11-05 17:20
文章标签 javascript 应用 vue frontend 全景 krpano

本文主要是介绍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

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

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

  1. <template>
  2.     <div id="pano" style="width:100%;height:100%;">
  3.       <noscript>
  4.         <table style="width:100%;height:100%;">
  5.           <tr style="vertical-align:middle;">
  6.             <td>
  7.               <div style="text-align:center;">
  8. ERROR:
  9.                 <br />
  10.                 <br />Javascript not activated
  11.                 <br />
  12.                 <br />
  13.               </div>
  14.             </td>
  15.           </tr>
  16.         </table>
  17.       </noscript>
  18.     </div>
  19. </template>
  20. <script>
  21.    var krpano = null; 
  22.    function krpano_onready_callback (krpano_interface) {
  23. krpano = krpano_interface;
  24. }
  25.  
  26.     export default {
  27. name="test",
  28.       mounted: function() {
  29. embedpano({
  30.           swf: "../static/krpano/tour.swf",
  31.           xml: "../static/krpano/tour.xml",
  32.           target: "pano",
  33.           html5: "auto",
  34.           mobilescale: 1.0,
  35.           passQueryParameters: true,
  36.           onready: krpano_onready_callback //回调函数，获取Krpano 对象
  37. });
  38.         this.getHotspots(1, 3);
  39. },
  40.        methods: {
  41.           async getHotspots(currentPage, pageSize) {
  42.             const dataTest= await getHotspot({
  43.             pageNum: currentPage,
  44.             pageSize: pageSize
  45. });
  46.             //实现js和xml交互
  47. krpano.call('set(hotspot[spot_0_2].title,'+dataTest.data.message+')')
  48. }
  49. }
  50.     
  51. }
  52. </script>

3.5 实现xml和js交互

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

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

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

  1. <script>
  2. function hotspotClick(parms) {
  3. alert(parms)
  4. }
  5. </script>

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

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


http://www.chinasem.cn/article/351374。

相关文章

Vue3 的 shallowRef 和 shallowReactive：优化性能

Vue3 的 shallowRef 和 shallowReactive：优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉，那么对 shallowRef 和 shallowReactive 是否了解呢？ 在编程和数据结构中，“shallow”（浅层）通常指对数据结构的最外层进行操作，而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素，而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层（Shallow） 定义
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
中文分词jieba库的使用与实景应用（一）

中文分词jieba库的使用与实景应用（一）

知识星球：https://articles.zsxq.com/id_fxvgc803qmr2.html 目录 一.定义： 精确模式（默认模式）： 全模式： 搜索引擎模式： paddle 模式（基于深度学习的分词模式）： 二 自定义词典 三.文本解析   调整词出现的频率 四. 关键词提取 A. 基于TF-IDF算法的关键词提取 B. 基于TextRank算法的关键词提取
阅读更多...
水位雨量在线监测系统概述及应用介绍

水位雨量在线监测系统概述及应用介绍

在当今社会，随着科技的飞速发展，各种智能监测系统已成为保障公共安全、促进资源管理和环境保护的重要工具。其中，水位雨量在线监测系统作为自然灾害预警、水资源管理及水利工程运行的关键技术，其重要性不言而喻。 一、水位雨量在线监测系统的基本原理 水位雨量在线监测系统主要由数据采集单元、数据传输网络、数据处理中心及用户终端四大部分构成，形成了一个完整的闭环系统。 数据采集单元：这是系统的“眼睛”，
阅读更多...
【 html+css 绚丽Loading 】000046 三才归元阵

【 html+css 绚丽Loading 】000046 三才归元阵

前言：哈喽，大家好，今天给大家分享html+css 绚丽Loading！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介：💡2.外观描述：💡3.使用方式：💡4.战斗方式：💡5.提升：💡6.传说： 📚三、源代码，上代码，可以直接复制使用🎥效果🗂️目录✍️
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
csu 1446 Problem J Modified LCS （扩展欧几里得算法的简单应用）

csu 1446 Problem J Modified LCS （扩展欧几里得算法的简单应用）

这是一道扩展欧几里得算法的简单应用题，这题是在湖南多校训练赛中队友ac的一道题，在比赛之后请教了队友，然后自己把它a掉 这也是自己独自做扩展欧几里得算法的题目 题意：把题意转变下就变成了：求d1*x - d2*y = f2 - f1的解,很明显用exgcd来解 下面介绍一下exgcd的一些知识点：求ax + by = c的解 一、首先求ax + by = gcd(a,b)的解 这个
阅读更多...
hdu1394(线段树点更新的应用)

hdu1394(线段树点更新的应用)

题意：求一个序列经过一定的操作得到的序列的最小逆序数 这题会用到逆序数的一个性质，在0到n-1这些数字组成的乱序排列，将第一个数字A移到最后一位，得到的逆序数为res-a+(n-a-1) 知道上面的知识点后，可以用暴力来解 代码如下： #include<iostream>#include<algorithm>#include<cstring>#include<stack>#in
阅读更多...
【专题】2024飞行汽车技术全景报告合集PDF分享（附原数据表）

【专题】2024飞行汽车技术全景报告合集PDF分享（附原数据表）

原文链接： https://tecdat.cn/?p=37628 6月16日，小鹏汇天旅航者X2在北京大兴国际机场临空经济区完成首飞，这也是小鹏汇天的产品在京津冀地区进行的首次飞行。小鹏汇天方面还表示，公司准备量产，并计划今年四季度开启预售小鹏汇天分体式飞行汽车，探索分体式飞行汽车城际通勤。阅读原文，获取专题报告合集全文，解锁文末271份飞行汽车相关行业研究报告。 据悉，业内人士对飞行汽车行业
阅读更多...
zoj3820(树的直径的应用)

zoj3820(树的直径的应用)

题意：在一颗树上找两个点，使得所有点到选择与其更近的一个点的距离的最大值最小。 思路：如果是选择一个点的话，那么点就是直径的中点。现在考虑两个点的情况，先求树的直径，再把直径最中间的边去掉，再求剩下的两个子树中直径的中点。 代码如下： #include <stdio.h>#include <string.h>#include <algorithm>#include <map>#
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2