移花接木(5)- 自定义指南针样式

更新于 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属性要有正确的路径。

点击代码窗口最右侧按钮,在新窗口打开后复制代码

注意,这里是要求每个场景的方位保持一致。

如果方位不一致的话,则需要删除上面代码倒数第三行

然后在每个scene的onstart事件中加入

点击代码窗口最右侧按钮,在新窗口打开后复制代码

180是方位的数值,每个scene里都可能需要重新设置。

 

第二种样式:

将下面的代码复制到scene标签的外部,注意多个layer的url属性要有正确的路径。

点击代码窗口最右侧按钮,在新窗口打开后复制代码

注意,这里是要求每个场景的方位保持一致。

如果方位不一致的话,则需要删除上面代码倒数第三行

然后在每个scene的onstart事件中加入

点击代码窗口最右侧按钮,在新窗口打开后复制代码

180是方位的数值,每个scene里都可能需要重新设置。

 

第三种样式(热点):

将下面的代码复制到scene标签的外部

点击代码窗口最右侧按钮,在新窗口打开后复制代码

在每个scene的onstart属性中加入

点击代码窗口最右侧按钮,在新窗口打开后复制代码

180是方位的数值,每个scene里都可能需要重新设置。

 

1.18.6的方法

如果你要使用第一个指南针样式,请在tour.xml加入(不要在scene标签内),修改高亮部分的数字0就是修改方位。

点击代码窗口最右侧按钮,在新窗口打开后复制代码

 

如果是第二种样式,加入:

点击代码窗口最右侧按钮,在新窗口打开后复制代码

 

如果是加入文字版本的指南针,可以加入:

点击代码窗口最右侧按钮,在新窗口打开后复制代码

 

但假如我们的全景图没有对齐的话,那就需要在每个scene都要单独设置heading了,你可以在scene标签里自定义一个compass_heading属性。

点击代码窗口最右侧按钮,在新窗口打开后复制代码

 

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

其中

点击代码窗口最右侧按钮,在新窗口打开后复制代码

改为

点击代码窗口最右侧按钮,在新窗口打开后复制代码

 

在 “移花接木(5)- 自定义指南针样式” 上有 1 条评论

发表评论