vue+krpano互相交互 vue全景实现

前面又文章说过vue+krpano互相交互 我现在又重新的写一篇,

1.是巩固一下

2.是我看大部分都要钱要想实现木有模板开发起来麻烦

3.我这一路摸索过来很痛苦木有具体人文档方便查看都很杂乱,这里看一点哪里看一点,太痛苦了,我不希望有人和我一样,所以分享一下,让别人少走一点弯路,可以更加直接快速的开发

4.我自己也在摸索当中还有很多不会,如果有机会我还会出其他攻略,哈哈 绝对干活

参考:https://krpano.com/ --官网文档可以看看 英文好的都不用看我这个文章

参考:http://www.360doc.com/content/18/0122/16/11604731_724187211.shtml  这个里面虽然很多收费但是也有免费的干货多看多看多看

参考:https://blog.csdn.net/qq_42563079/article/details/97141023 --这个主要是vue和krpano互相 写的很少 不过你可以用来看执行过程很有用的

先实现两个简单的功能好吧

1.实现vue+krpano实时交互

2.点击标签,这个里面交热点实现交互弹出一个图片或者文字

 

 

 

 

 

 

 

<scene  name="skin_hotspotstyle1" title="香港001" onstart="iframe_embeds();" havevrimage="true" thumburl="panos/hongkong.tiles/thumb.jpg" lat="" lng="" heading="">

  <view hlookat="0.0" vlookat="0.0" fovtype="MFOV" fov="120" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="auto" />

  <preview url="panos/hongkong.tiles/preview.jpg" />

  <image type="CUBE" multires="true" tilesize="512" if="!webvr.isenabled">
    <level tiledimagewidth="1280" tiledimageheight="1280">
      <cube url="panos/hongkong.tiles/%s/l2/%v/l2_%s_%v_%h.jpg" />
    </level>
    <level tiledimagewidth="640" tiledimageheight="640">
      <cube url="panos/hongkong.tiles/%s/l1/%v/l1_%s_%v_%h.jpg" />
    </level>
  </image>

  <image if="webvr.isenabled">
    <cube url="panos/hongkong.tiles/vr/pano_%s.jpg" />
  </image>

  <hotspot name="spot1" style="skin_hotspotstyle1" visible="true" ath="-29.334" atv="-4.413"  text="111" linkedscene="skin_hotspotstyle1" />
  <hotspot name="spot2" style="skin_hotspotstyle2" visible="true" ath="25.405" atv="-1.598"  text="222" linkedscene="skin_hotspotstyle2" />

  <hotspot name="spot3"
           style="skin_hotspotstyle2"
           visible="true"
           ath="-3.712" atv="-21.445"
           text="333"
           linkedscene="skin_hotspotstyle3"
            onclick="iframe_embed(iframesrc,iframelayer,'https://www.expoon.com/krpanoPanoramaInfo/31017/32306?type=0');"
  />

  <hotspot name="spot6"
           text="东海"
           visible="true"
           style="skin_hotspotstyle77"
           ath="-125" atv="7"
           onclick="iframe_embed(iframesrc,iframelayer,'https://www.expoon.com/krpanoPanoramaInfo/31017/32306?type=0');"
  />

  <hotspot name="spot7"
           text="山顶"
           visible="true"
           style="skin_hotspotstyle77"
           ath="177" atv="2"
           onclick="iframe_embed(iframesrc,iframelayer,'https://www.expoon.com/krpanoPanoramaInfo/31017/32309?type=0');"
  />

</scene>

 

 

妈耶有的多直接上代码把写的有点迷 不懂直接留言把 我有时间久回复哈哈或者加我qq:624402667

实现效果

 

 

https://gitee.com/hkp123/vrsystem_krpano

 

https://gitee.com/hkp123/pano_vue/tree/master/src

可以去参考以上代码