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中

krpano全景在vue中的应用_第1张图片

 3.3 在index.html中引入tour.js


  
  

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


3.5 实现xml和js交互

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



    js(hotspotClick(get(name)));

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

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

你可能感兴趣的:(krpano)