前端实现全景图1

使用前端可视化界面的方案：xml+krpano

约定开发命名规则
    a. XML标签中，自定义变量，方法，函数，都需使用下划线 _ 方式进行命名连接，禁止使用驼峰命名；
    b. XML调用js函数以 handle_xxx开头；
    c. 属性值不区分大小写，系统属性值-统一采用大写，自定义属性值采用小写加下划线；
    d. 所有标签中，name必须是唯一值，有重复会覆盖；
项目所需标签记录, xml中所有标签及元素都不区分大小写：
1. krpano 根标签所有xml文件都需要包含在 krpano 标签下，必须设置，且可以标签可以嵌套多次，
    a. 属性：version当前版本
<krpano version="1.20.7">
    ...
</krpano>
2. scene 场景标签，属性：name 是必须值，切换场景需要用到这个值
<krpano version="1.20.7">
    <scene name="scene_hongqi">
      ...
  </scene>
</krpano>  
3. preview 预览图标签，属性：
    a. url 全景图路径；type（SPHERE，CYLINDER，CUBESTRIP）默认SPHERE（球形）;
<krpano version="1.20.7">
    <scene name="hong_qi">
      <preview url="img/hongqi_1.jpg" type="SPHERE"></preview>
  </scene>
</krpano>
4. view 视图标签，属性：
    a. hlookat 水平视角（-180~180），水平方向；
    b. vlookat 垂直视角（-90~90），垂直方向；
    c. hlookatmin 视角左侧限制范围， 范围：-180—180，默认值：-180    此处参数要慢慢修改，不断调整参数，反复预览 ；
    d. hlookatmax 视角右侧限制范围，范围：-180—180，默认值：180；
    e. vlookatmin 视角向上限制范围，范围：-90—0，默认值：-90；
    f. vlookatmax 视角向下限制范围，范围：0—90，默认值：90；
    g. fovtype 视角类型，默认MFOV（VFOV垂直视角，HFOV水平视角，DFOV对角线视角，MFOV最大视角）；
    h. fov 默认缩放视角FOV，初始化默认视角FOV，默认90；
    i. fovmin 缩放最小FOV，缩放最小FOV（场景拉近），必须小于初始FOV，默认60；
    j. fovmax 缩放最大FOV，缩放最大FOV（场景拉远），必须大于初始FOV，默认150；
    k. maxpixelzoom 缩放视角比例，范围：1.0—5.0。数值越大 拉近距离越近；
<krpano version="1.20.7">
    <scene name="scene_hongqi">
    <preview url="img/hongqi_1.jpg" type="SPHERE" />
    <view hlookat="0" vlookat="0" hlookatmin="-180" hlookatmax="180" vlookatmin="-90" vlookatmax="90" fovtype="MFOV" fovmin="60" fovmax="150" fov="90" />
    </scene>
</krpano>
5. hotspot热点标签，分为内置属性和自定义属性：
    a. 内置属性：
    i. name 热点名称；
    ii. url 热点路径；
    iii. ath 热点坐标H，图中热点坐标H；
    iv. atv 热点坐标V，图中热点坐标V；
    v. scale 热点缩放，1为原始大小，0.1~0.9等小数值为缩小，大于1数值为放大；
    vi. zoom 热点缩放跟随，热点是否跟随场景缩放，默认true；
    vii. onloaded 热点加载事件，会写一些内置的action;
    viii. onclick 热点点击事件，切换场景及查看设备信息；
    b. 自定义属性：
    i. device_type 设备类型，设备类型热点，场景切换热点，不填则默认场景切换热点；
    ii. device_title 设备提示标题，热点上方显示名称，持续显示，仅对“设备类型热点”类型有效；
    iii. target_scene 目标场景，热点跳转的目标场景；
<krpano version="1.20.7">
    <scene name="scene_hongqi">
    <preview url="img/hongqi_1.jpg" type="SPHERE" />
    <view hlookat="0" vlookat="0" hlookatmin="-180" hlookatmax="180" vlookatmin="-90" vlookatmax="90" fovtype="MFOV" fovmin="60" fovmax="150" fov="90" />
    <hotspot name="spot_scene" url="icon/hotspot.png" ath="0" atv="0" scale="0.6" zoom="true" />
    </scene>
</krpano>
6. acion 自定义动态代码标签，类似 js 中的 function，属性：
    a. name 函数名称，全局唯一；
    b. scope 作用域类型，global，local，parent；
    c. args 参数列表；
    d. 标签内部实现，函数操作；
<krpano version="1.20.7">
    <scene name="scene_hongqi">
    <preview url="img/hongqi_1.jpg" type="SPHERE" />
    <view hlookat="0" vlookat="0" hlookatmin="-180" hlookatmax="180" vlookatmin="-90" vlookatmax="90" fovtype="MFOV" fovmin="60" fovmax="150" fov="90" />
    <hotspot name="spot_scene" url="icon/hotspot.png" ath="0" atv="0" scale="0.6" zoom="true"
             device_type="" device_title="" target_scene="scene_xiaoshang"
             onloaded="hotspot_do_animation();"
             onclick="hotspot_click();"/>
    </scene>
  <scene name="scene_xiaoshang">
    <preview url="img/hongqi_2.jpg" type="SPHERE" />
    <view hlookat="0" vlookat="0" hlookatmin="-180" hlookatmax="180" vlookatmin="-90" vlookatmax="90" fovtype="MFOV" fovmin="60" fovmax="150" fov="90" />
    </scene>
  <!-- 热点增加动画 -->
  <action name="hotspot_do_animation" scope="local">
      calc(local.xframes, (caller.imagewidth /128) BOR 0);
    calc(local.frames, xframes * ((caller.imageheight / 128) BOR 0));
    def(local.frame, integer, 0);
    calc(caller.crop, '0|0|' + 128 + '|' + 128);
    setinterval(calc('crop_anim_' + caller.name), 0.03,
    if(caller.loaded,
    inc(frame);
    if(frame GE frames, if(caller.onlastframe !== null, callwith(caller, onlastframe() ) ); set(frame,0); );
    mod(xpos, frame, xframes);
    div(ypos, frame, xframes);
    Math.floor(ypos);
    mul(xpos, 128);
    mul(ypos, 128);
    calc(caller.crop, xpos + '|' + ypos + '|' + 128 + '|' + 128);
      ,
    clearinterval(calc('crop_anim_' + caller.name));
    );
    ,10);
  </action>
  <!-- 热点切换场景 -->
  <action name="hotspot_jump_scene" scope="local" args="jump_scene">
    loadscene(get(jump_scene),null,MERGE,ZOOMBLEND(2.0, 2.0, easeInOutSine));
  </action>
  <!-- 热点显示标题，device_title 字段 -->
  <action name="hotspot_show_title">
    txtadd(tooltipname, 'tooltip_', get(name));
    addplugin(get(tooltipname)); txtadd(plugin[get(tooltipname)].parent, 'hotspot[',get(name),']');
    set(plugin[get(tooltipname)].url,'%SWFPATH%/plugins/textfield.swf');
    set(plugin[get(tooltipname)].align,top);
    set(plugin[get(tooltipname)].edge,bottom);
    set(plugin[get(tooltipname)].x,0);
    set(plugin[get(tooltipname)].y,0);
    set(plugin[get(tooltipname)].autowidth,true); 
    set(plugin[get(tooltipname)].autoheight,true);
    set(plugin[get(tooltipname)].background,false);
    set(plugin[get(tooltipname)].border,false);
    set(plugin[get(tooltipname)].css,'text-align:center; color:#FFFFFF; font-family: PingFangSC-Medium,PingFang SC; font-weight:bold; font-size:16px;');
    set(plugin[get(tooltipname)].textshadow,1);
    set(plugin[get(tooltipname)].textshadowrange,6.0);
    set(plugin[get(tooltipname)].textshadowangle,90);
    copy(plugin[get(tooltipname)].html,hotspot[get(name)].device_title);
    set(plugin[get(tooltipname)].enabled,false);
  </action>
  <!-- 热点点击显示对话框 -->
  <action name="hotspot_click">
    js(handleClickHotSpots(get(device_type),get(target_scene)));
  </action>
</krpano>

// 全局方法
function handleClickHotSpots(deviceType,targetScene) {
    if(deviceType){
    console.log('这里做弹框操作');
    } else {
    // 这里执行场景切换逻辑
    var krpano = document.getElementById('krpanoSWFObject');
    krpano.call(`hotspot_jump_scene(${targetScene})`);
    }
}

 前端js操作 krpano，进行切换场景

// 获取对象krpano
var krpano = document.getElementById("krpanoSWFObject");
// 执行一个krpano的内部动作或自定义动作,例如js操作跳转场景
krpano.call("hotspot_jump_scene('scene_hongqi');");