前端实现全景图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');");
