首页 > 代码库 > 进阶教程(11)- 自定义指南针

进阶教程(11)- 自定义指南针

为什么说是自定义指南针,这是因为指南针的heading值(即是控制指南针正确朝向的数值)是由我们定义的。真正的指南针,其方向就是指北,你永远都不需要指定heading值,像krpano自身也有指南针插件,它是直接调用手机上的指南针来找出对应的方位,无需人工干预。但事实上我还没遇到过国内有真正把指南针插件拿来商用的案例。


但在自定义地图中。例如房地产、旅游景区中,对朝向、方向的指示是有迫切需求的。但不可能用移动设备上的指南针,因此一个虚拟的指南针更有利于用户体验。krpano的官方案例提供了三种指南针样式。它的位置在krpano-1.17.5\examples\xml-usage\compass 


三种样式分别是两种表盘和一个文字样式。表盘的一个为固定盘转动针,一个是固定针转动盘。而文字样式则是八个方向的热点显示在全景中。相比而言,从酷炫效果来说,肯定是表盘效果更赞,但文字热点明显更直观。

首先我们得把对应表盘的图片复制到我们的项目文件夹,这几乎是我们每次移花接木之前要做的必选动作了。只有把对应的图片拷贝到正确的文件夹,才能保证xml的路径能够正确地对应到文件。目前官方案例的自定义指南针的heading为0的时候就是默认向北,也就是说,如果你拍全景的时候第一张是朝正北的话,同时ptgui拼接的时候没有在X轴上移动的话,那么view.hlookat为0也就是对着正北。这么说的话,假如你拍摄的是这一组全景图全部都是对着正北,你就能确保所有场景的指南针都是heading为0,也就是你无需调整在每个场景载入时调整。但如果不是这样的话,你就需要在每个场景都要设定heading


例如



  1. <scenename="scene_a3kt"title="A户型75㎡"onstart=""thumburl="panos/a3kt.tiles/thumb.jpg"lat=""lng=""heading=""compass_heading="50">



我在这里把每个场景的heading值用scene里的自定义属性compass_heading来表示。也就是你只需要在每个scene写个数字就可以了。


然后把所有的其他玩意,包括events元素、action元素以及plugin元素写在scene标签的外面。




  1. <!-- events, 在场景开始时设定heading,在视角变化时执行action -->

  2. <eventsonxmlcomplete="c_startup();"

  3. onviewchange="rotatecompasses();"

  4. />

  5. <!-- 设定 heading, 添加文字方向热点-->

  6. <actionname="c_startup">

  7. <!-- 设定 HEADING -->

  8. copy(heading, scene[get(xml.scene)].compass_heading);

  9. action(add_compass_spots);

  10. </action>

  11. <!-- 改变指南针表盘或指针图像的旋转 -->

  12. <actionname="rotatecompasses">

  13. sub(plugin[compass_pointer].rotate, view.hlookat, heading);

  14. sub(plugin[compass2_plate].rotate, heading, view.hlookat);

  15. </action>

  16. <!-- 指南针样式一 (右侧的) -->

  17. <!-- 指南针表盘 -->

  18. <pluginname="compass"url="compass.png"keep="true"zorder="1"children="false"

  19. align="righttop"x="10"y="10"

  20. scale="1.0"scalechildren="true"

  21. destscale="1.0"

  22. onclick="switch(destscale,1.0,0.5);tween(scale,get(destscale));"

  23. heading="0"

  24. />

  25. <!-- 表针, 根据"onviewchange" 进行旋转 -->

  26. <pluginname="compass_pointer"url="compass_pointer.png"keep="true"handcursor="false"

  27. parent="compass"zorder="1"

  28. align="center"

  29. />

  30. <!-- 指南针玻璃效果 (flash 下有效, html5不支持 blendmode ) -->

  31. <pluginname="glass"devices="flash"url="glass.jpg"keep="true"enabled="false"

  32. blendmode="screen"alpha="0.5"

  33. parent="compass"zorder="2"

  34. align="center"

  35. />

  36. <!-- 指南针样式二 (左侧) -->

  37. <!-- 指南针表盘 -->

  38. <pluginname="compass2"url="compass.png"keep="true"zorder="1"children="false"

  39. align="lefttop"x="10"y="10"

  40. scale="1.0"scalechildren="true"

  41. destscale="1.0"

  42. onclick="switch(destscale,1.0,0.5);tween(scale,get(destscale));"

  43. />

  44. <!-- 表盘随着"onviewchange" 改变旋转 -->

  45. <pluginname="compass2_plate"url="compass_plate.png"keep="true"handcursor="false"

  46. parent="compass2"zorder="1"

  47. align="center"

  48. />

  49. <!-- 固定的表针 -->

  50. <pluginname="compass2_pointer"url="compass_pointer.png"keep="true"handcursor="false"

  51. parent="compass2"zorder="2"

  52. align="center"

  53. />

  54. <!-- 指南针2外部固定的环 -->

  55. <pluginname="compass2_ring"url="compass_ring.png"keep="true"handcursor="false"

  56. parent="compass2"zorder="3"

  57. align="center"

  58. />

  59. <!-- 指南针2玻璃 (flash下有效, 因为HTML5不支持 blendmode) -->

  60. <pluginname="glass2"devices="flash"url="glass.jpg"keep="true"enabled="false"

  61. blendmode="screen"alpha="0.5"

  62. parent="compass2"zorder="4"

  63. align="center"

  64. />

  65. <!-- 动态创建文字方向热点 -->

  66. <actionname="addspot">

  67. addhotspot(%1);

  68. set(hotspot[%1].url,%CURRENTXML%/hotspots.png);

  69. set(hotspot[%1].crop,%3);

  70. add(hotspot[%1].ath,%2,heading);

  71. set(hotspot[%1].atv,0);

  72. set(hotspot[%1].scale,%4);

  73. set(hotspot[%1].scale1,%4);

  74. mul(hotspot[%1].scale2,%4,2);

  75. set(hotspot[%1].zoom,true);

  76. set(hotspot[%1].onover,tween(scale,get(scale2)));

  77. set(hotspot[%1].onout,tween(scale,get(scale1)));

  78. set(hotspot[%1].onclick,lookto(get(ath),get(atv),90,smooth(),true,true));

  79. </action>

  80. <actionname="add_compass_spots">

  81. addspot(n, 0, 0|0| 76|76, 1.0);

  82. addspot(no, 45, 78|0|118|76, 0.5);

  83. addspot(o, 90, 202|0| 71|76, 1.0);

  84. addspot(so, 135, 281|0|109|76, 0.5);

  85. addspot(s, 180, 400|0| 69|76, 1.0);

  86. addspot(sw, 225, 469|0|134|76, 0.5);

  87. addspot(w, 270, 603|0| 86|76, 1.0);

  88. addspot(nw, 315, 689|0|141|76, 0.5);

  89. </action>

进阶教程(11)- 自定义指南针