更新于 2020.11.19 krpano 1.20.9
演示
说明
为什么说是自定义指南针,这是因为指南针的heading值(即是控制指南针正确朝向的数值)是由我们定义的。真正的手机上的指南针,其方向就是指正北,你永远都不需要指定heading值,像krpano自身也有指南针插件,它是直接调用手机上的指南针来找出对应的方位,无需人工干预。但事实上少有真正把compass插件拿来商用的案例。
但在包含有本地自定义地图的漫游中。例如房地产、旅游景区,对朝向、方向的指示是有需求的。但通常浏览者不是真正地在景区或样板间内浏览,不可能也无需使用移动设备的指南针,因此虚拟指南针更有利于用户体验。krpano的官方案例提供了三种指南针样式。它的位置在下载包的(对应1.18.6与1.19、1.20)
krpano-1.18.6\examples\xml-usage\compass
krpano-1.20.9\viewer\examples\compass\compass.xml
提示:如果不明白下载包路径是什么,请查看 循序渐进(3)- krpano下载包的使用说明
三种样式分别是两种表盘和一个文字样式。表盘的一个为固定盘转动针,一个是固定针转动盘。而文字样式则是八个方向(东南西北、东南、东北、西北、西南)的热点显示在全景中。相比而言,从视觉效果来说,肯定是表盘效果更赞,但文字热点更直观。
第三方指南针插件:N氏指南针
使用方法
复制图中所示6张图片到项目文件夹vtour的根目录或你自己的定义的目录,注意路径
首先我们得把对应表盘的图片复制到我们的项目文件夹(1.20、1.19、1.18的图片略有不同,但只要记得把所有图片都复制肯定就没错,这里我们直接复制到vtour的根目录下,当然你可以复制到其它地方,但注意代码中关于url的路径的正确性),这几乎是我们每次移花接木之前要做的必选动作了。只有把对应的图片拷贝到正确的文件夹,才能保证xml的路径能够正确地对应到文件。
目前官方案例的自定义指南针的heading为0的时候就是默认向北,也就是说,如果你拍全景的时候第一张是朝正北的话,同时ptgui拼接的时候没有在x轴上移动的话,那么view.hlookat为0也就是对着正北。这么说的话,假如你拍摄的是这一组全景图全部都是对着正北,你就能确保所有场景的指南针都是heading为0,也就是你无需调整在每个场景载入时调整。但如果不是这样的话,你就需要在每个scene都要设定方位heading。在本例中假定我们的全景图在拼接时已经统一了方位。详情请看:PTGUI:校正水平与调整方位
1.20、1.19的方法
本教程的方法与官网案例有所区别,是针对于多个scene共用同一个指南针。(keep属性为true)
将1.20 案例里的图片都复制到项目的根目录下。
第一种样式:
将下面的代码复制到scene标签的外部,注意多个layer的url属性要有正确的路径。
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!-- 表盘不动 表针动 --> <layer name="compass1" url="compass_bg.png" keep="true" align="lefttop" x="10" y="10" children="false" scalechildren="true" destscale="1.0" onclick="switch(destscale,1.0,0.5);tween(scale,get(destscale));"> <layer name="compass1_plate" url="compass_plate.png" keep="true" align="center" zorder="1" /> <layer name="compass1_pointer" url="compass_pointer.png" keep="true" align="center" zorder="2" /> <layer name="compass1_ring" url="compass_ring.png" keep="true" align="lefttop" zorder="3" /> </layer> <!-- 视野改变事件 --> <events name="compass_events" keep="true" onviewchange="compass_update_rotate();" /> <!-- 更新指南针旋转数值 --> <action name="compass_update_rotate"> set(global_heading, 180); calc(plugin[compass1_pointer].rotate, view.hlookat - global_heading); </action> |
如果方位不一致的话,则需要删除上面代码倒数第三行
1 |
set(global_heading, 180); |
然后在每个scene的onstart事件中加入
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 |
onstart="set(global_heading, 180);" |
第二种样式:
将下面的代码复制到scene标签的外部,注意多个layer的url属性要有正确的路径。
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!-- 表针不动表盘动 --> <layer name="compass2" url="compass_bg.png" keep="true" align="righttop" x="10" y="10" children="false" scalechildren="true" destscale="1.0" onclick="switch(destscale,1.0,0.5);tween(scale,get(destscale));"> <layer name="compass2_plate" url="compass_plate.png" keep="true" align="center" zorder="1" /> <layer name="compass2_pointer" url="compass_pointer.png keep="true" " align="center" zorder="2" /> <layer name="compass2_ring" url="compass_ring.png" keep="true" align="lefttop" zorder="3" /> </layer> <!-- 视野改变事件 --> <events name="compass_events" keep="true" onviewchange="compass_update_rotate();" /> <!-- 更改指南针旋转数值 --> <action name="compass_update_rotate"> set(global_heading, 180); calc(plugin[compass2_plate].rotate, global_heading - view.hlookat); </action> |
如果方位不一致的话,则需要删除上面代码倒数第三行
1 |
set(global_heading, 180); |
然后在每个scene的onstart事件中加入
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 |
onstart="set(global_heading, 180);" |
第三种样式(热点):
将下面的代码复制到scene标签的外部
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!-- 动态添加指南热点 --> <action name="add_compass_spots"> addspot(n, calc(0 + global_heading), 0|0| 76|76, 1.0); addspot(no, calc(45 + global_heading), 78|0|118|76, 0.5); addspot(o, calc(90 + global_heading), 202|0| 71|76, 1.0); addspot(so, calc(135 + global_heading), 281|0|109|76, 0.5); addspot(s, calc(180 + global_heading), 400|0| 69|76, 1.0); addspot(sw, calc(225 + global_heading), 469|0|134|76, 0.5); addspot(w, calc(270 + global_heading), 603|0| 86|76, 1.0); addspot(nw, calc(315 + global_heading), 689|0|141|76, 0.5); </action> <action name="addspot"> addhotspot(%1); set(hotspot[%1].url, '%CURRENTXML%/hotspots.png'); set(hotspot[%1].crop, '%3'); set(hotspot[%1].ath, %2); set(hotspot[%1].atv, 0); set(hotspot[%1].scale, %4); set(hotspot[%1].scale1, %4); calc(hotspot[%1].scale2, %4 * 2); set(hotspot[%1].zoom,true); set(hotspot[%1].onover, tween(scale,get(scale2)); ); set(hotspot[%1].onout, tween(scale,get(scale1)); ); set(hotspot[%1].onclick, lookto(get(ath),get(atv),90); ); </action> |
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 |
set(global_heading, 180);add_compass_spots(); |
1.18.6的方法
如果你要使用第一个指南针样式,请在tour.xml加入(不要在scene标签内),修改高亮部分的数字0就是修改方位。
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<!-- events, 在场景开始时设定heading,在视角变化时执行action --> <events name="compassevent" keep="true" onxmlcomplete="set(heading, 0);" onviewchange="rotatecompasses();" /> <!-- 改变指南针表盘或指针图像的旋转 --> <action name="rotatecompasses"> sub(plugin[compass_pointer].rotate, view.hlookat, heading); </action> <!-- 指南针样式一 (右侧的) --> <!-- 指南针表盘 --> <plugin name="compass" url="compass.png" keep="true" zorder="1" children="false" align="righttop" x="10" y="10" scale="1.0" scalechildren="true" destscale="1.0" onclick="switch(destscale,1.0,0.5);tween(scale,get(destscale));" heading="0" /> <!-- 表针, 根据"onviewchange" 进行旋转 --> <plugin name="compass_pointer" url="compass_pointer.png" keep="true" handcursor="false" parent="compass" zorder="1" align="center" /> <!-- 指南针玻璃效果 (flash下有效, html5不支持blendmode ) --> <plugin name="glass" devices="flash" url="glass.jpg" keep="true" enabled="false" blendmode="screen" alpha="0.5" parent="compass" zorder="2" align="center" /> |
如果是第二种样式,加入:
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<!-- events, 在场景开始时设定heading,在视角变化时执行action --> <events name="compassevent" keep="true" onxmlcomplete="set(heading, 0);" onviewchange="rotatecompasses();" /> <!-- 改变指南针表盘或指针图像的旋转 --> <action name="rotatecompasses"> sub(plugin[compass2_plate].rotate, heading, view.hlookat); </action> <!-- 指南针样式一 (右侧的) --> <!-- 指南针表盘 --> <plugin name="compass2" url="compass.png" keep="true" zorder="1" children="false" align="lefttop" x="10" y="10" scale="1.0" scalechildren="true" destscale="1.0" onclick="switch(destscale,1.0,0.5);tween(scale,get(destscale));" /> <!-- 表盘随着"onviewchange" 改变旋转 --> <plugin name="compass2_plate" url="compass_plate.png" keep="true" handcursor="false" parent="compass2" zorder="1" align="center" /> <!-- 固定的表针 --> <plugin name="compass2_pointer" url="compass_pointer.png" keep="true" handcursor="false" parent="compass2" zorder="2" align="center" /> <!-- 指南针2外部固定的环 --> <plugin name="compass2_ring" url="compass_ring.png" keep="true" handcursor="false" parent="compass2" zorder="3" align="center" /> <!-- 指南针2玻璃 (flash下有效, 因为HTML5不支持 blendmode) --> <plugin name="glass2" devices="flash" url="glass.jpg" keep="true" enabled="false" blendmode="screen" alpha="0.5" parent="compass2" zorder="4" align="center" /> |
如果是加入文字版本的指南针,可以加入:
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<!-- events, 在场景开始时设定heading,在视角变化时执行action --> <events name="compassevent" keep="true" onxmlcomplete="set(heading, 0);action(add_compass_spots);" /> <!-- 动态创建文字方向热点 --> <action name="addspot"> addhotspot(%1); set(hotspot[%1].url,%CURRENTXML%/hotspots.png); set(hotspot[%1].crop,%3); add(hotspot[%1].ath,%2,heading); set(hotspot[%1].atv,0); set(hotspot[%1].scale,%4); set(hotspot[%1].scale1,%4); mul(hotspot[%1].scale2,%4,2); set(hotspot[%1].zoom,true); set(hotspot[%1].onover,tween(scale,get(scale2))); set(hotspot[%1].onout,tween(scale,get(scale1))); set(hotspot[%1].onclick,lookto(get(ath),get(atv),90,smooth(),true,true)); </action> <action name="add_compass_spots"> addspot(n, 0, 0|0| 76|76, 1.0); addspot(no, 45, 78|0|118|76, 0.5); addspot(o, 90, 202|0| 71|76, 1.0); addspot(so, 135, 281|0|109|76, 0.5); addspot(s, 180, 400|0| 69|76, 1.0); addspot(sw, 225, 469|0|134|76, 0.5); addspot(w, 270, 603|0| 86|76, 1.0); addspot(nw, 315, 689|0|141|76, 0.5); </action> |
但假如我们的全景图没有对齐的话,那就需要在每个scene都要单独设置heading了,你可以在scene标签里自定义一个compass_heading属性。
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 |
<scene name="scene_a3kt" title="A户型75㎡" onstart="" thumburl="panos/a3kt.tiles/thumb.jpg" lat="" lng="" heading="" compass_heading="50"> |
所有的其他玩意,包括events元素、action元素以及plugin元素写在scene标签的外面。
其中
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 2 3 |
<events name="compassevent" keep="true" onxmlcomplete="set(heading, 0);action(add_compass_spots);" /> |
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 2 3 |
<events name="compassevent" keep="true" onxmlcomplete="copy(heading, scene[get(xml.scene)].compass_heading);action(add_compass_spots);" /> |
在 “移花接木(5)- 自定义指南针样式” 上有 1 条评论