进阶教程（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. <scene
   name="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. <events
   onxmlcomplete="c_startup();"
3. onviewchange="rotatecompasses();"
4. />
5. <!--
   设定 heading, 添加文字方向热点-->
6. <action
   name="c_startup">
7. <!--
   设定 HEADING -->
8. copy(heading, scene[get(xml.scene)].compass_heading);
9. action(add_compass_spots);
10. </action>
11. <!--
    改变指南针表盘或指针图像的旋转 -->
12. <action
    name="rotatecompasses">
13. sub(plugin[compass_pointer].rotate, view.hlookat, heading);
14. sub(plugin[compass2_plate].rotate, heading, view.hlookat);
15. </action>
16. <!--
    指南针样式一 (右侧的) -->
17. <!--
    指南针表盘 -->
18. <plugin
    name="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. <plugin
    name="compass_pointer"
    url="compass_pointer.png"
    keep="true"
    handcursor="false"
27. parent="compass"
    zorder="1"
28. align="center"
29. />
30. <!--
    指南针玻璃效果 (flash 下有效, html5不支持 blendmode ) -->
31. <plugin
    name="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. <plugin
    name="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. <plugin
    name="compass2_plate"
    url="compass_plate.png"
    keep="true"
    handcursor="false"
46. parent="compass2"
    zorder="1"
47. align="center"
48. />
49. <!--
    固定的表针 -->
50. <plugin
    name="compass2_pointer"
    url="compass_pointer.png"
    keep="true"
    handcursor="false"
51. parent="compass2"
    zorder="2"
52. align="center"
53. />
54. <!--
    指南针2外部固定的环 -->
55. <plugin
    name="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. <plugin
    name="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. <action
    name="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. <action
    name="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>