本文主要是介绍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中的应用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
