krpano全景在vue中的应用

最新推荐文章于 2025-06-25 15:49:06 发布

江湖之笑

最新推荐文章于 2025-06-25 15:49:06 发布

阅读量2.6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： VR 文章标签： vue vr

本文链接：https://blog.csdn.net/xiao190128/article/details/116546418

VR 专栏收录该内容

3 篇文章

订阅专栏

本文档介绍了一个在线博物馆全景展示的开发过程，主要利用krpano在Vue前端框架中实现。首先搭建Vue项目，然后将krpano资源引入并放置在static目录下。接着在index.html中引入tour.js，并在Vue组件中通过krpano API与XML交互，实现实时更新热点信息。此外，还详细说明了如何通过XML和JS交互处理热点点击事件，以及利用浏览器缓存展示热点详细信息。该教程对于前端开发者在实现全景场景应用方面提供了具体指导。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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