最近项目需求是在vue项目里实现全屋浏览。除了基础的展示功能以外，还有切换风格，热点，雷达，遮盖相机等。国内有如视，国外有krpano，但是krpano官网写的挺简略的，网上能搜到的相关技术也不是十分的多。不过经过一番调研以后决定还是使用krpano。

我们实现的大致方案是前端页面上上传2:1实景图，上传成功后后台就立即开始生成krpano。前端页面只需要调用后台生成的xml文件就可以实现页面的渲染了。

参考文档：krpano全景在vue中的应用_一个韩韩韩的博客-CSDN博客

krpano元素解析 ：

 Krpano源文件的组成 · Krpano基础文档 · 看云 (kancloud.cn)

Krpano元素的一些解析_将小宁的博客-CSDN博客_krpano属性

对热点的操作：

Krpano全景：在javascript中动态添加/删除/修改（位置）热点（向后端写入）_VRlook的博客-CSDN博客_krpano 动态添加场景

初始渲染krpano

1.在文件夹中引入krpano

 2. index.html中引入tour.js

 3.在需要显示krpano效果的文件中

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

4. 调用后台接口获取xml。

在实际开发项目中是调用接口获取xml文件，如果仅仅是写前端demo，可以在tour.xml中写。

initVr() {
      let url = this.getXmlUrl();//获取xml
      embedpano({
        swf: "./krpano/tour.swf",
        xml: url,//如果是前端demo的话可以直接写"./krpano/tour.xml"
        target: "pano",//div标签中的id值
        html5: "only + css3d",
        mobilescale: 1.0,
        passQueryParameters: true,
        onready: krpano_onready_callback, //回调函数，获取Krpano 对象
      });
    },

 在mounted生命周期中调用这个方法。

加载场景

krpano.call("loadscene(" + sceneName + ")");
//sceneName是scene标签中name属性的值

切换xml

有一个需求是：在已经加载的xml基础上，点击按钮切换已经加载的xml。

这个解决思路是先加载出新的xml，然后对dom进行操作，将原来生成的dom（即原来的xml）删除，加载新的dom实现xml切换效果。

let url = this.getXmlUrl();//获取xml
embedpano({
    swf: "./krpano/tour.swf",
    xml: url,//如果是前端demo的话可以直接写"./krpano/tour.xml"
    target: "pano",//div标签中的id值
    html5: "only + css3d",
    mobilescale: 1.0,
    passQueryParameters: true,
    onready: krpano_onready_callback, //回调函数，获取Krpano 对象
});
let panoNode = document.getElementById("pano");
let childNodes = panoNode.childNodes;
if(childNodes.length >= 3){
   panoNode.removeChild(childNodes[1]);
}//根据自己项目的实际情况获取需要替换的dom

雷达以及雷达和场景列表的交互

户型图上展示雷达效果，其实就是由户型图、雷达点图（图中的深绿色的圆点）和雷达扇形（图中的浅绿色扇形）组成。

 1) 基础设置

雷达扇形设置

<plugin align="lefttop"
        alturl="alturl的值需要设置引入radar.js，设置扇形的基础属性" 
        edge="center" 
        editmode="true"
        fillcolor="0x6fc9b9"
        heading="0"
        headingoffset="0"
        keep="true" 
        linealpha="10.0"
        linecolor="0xdadb5a"
        name="radar984500"
        parent="mapcontainerB1"
        scale="0.6"
        x="233.0285714285714"
        y="291.0285714285714"
        zorder="1"/>

雷达点图设置

<plugin align="lefttop"
        alturl="雷达点图的图片地址"
        edge="lefttop"
        editmode="true"
        fillcolor="1edab5"
        heading="0" 
        headingoffset="0"
        height="16" 
        keep="true" linecolor="0" 
        name="radar984501" 
        onclick="点击事件"
        parent="父级" 
        scale="1"
        url="雷达点图的图片地址"
        width="16"
        x="227.0285714285714"
        y="285.0285714285714" 
        zorder="1"/>

设置xy值的时候需要注意雷达点图的半径，这样确保点图在扇形的中间。

2）js交互

点击雷达点图，扇形就会跑到被点中的绿色圆点下，同时场景也要切换。

onclick事件中可以写

loadScene(场景名字);//xml切换场景
set(plugin['雷达扇形图的name'].x,水平方向的坐标值);
set(plugin['雷达扇形图的name'].y,垂直方向的坐标值)

 

热点以及遮盖相机及其三脚架

现实场景中相机拍摄全景时可能会拍到相机本身的三脚架，我们需要把相机三脚架遮盖起来。

遮盖相机及其三脚架的实现方法类似于热点。

我们遮盖相机及其三脚架的需求是用logo图片挡住，同时logo图片下方放一个半透明的圆圈。