制作导航图

导航图，就不顾名思义了。在制作室内房产家装的全景漫游时，常使用平面CAD图或平面效果图作导航，顺便也能提供个户型示意。在制作室外小区园区的全景漫游时，常使用平面设计图或者截取第三方地图作为导航图。

我们下面开始说一下制作导航图的大概步骤。

首先选择“添加图片”，添加提前制作或截取的平面导航图。

大概的位置，可以选择边角位置，也可以选择居中位置。这里我们选择右上角的位置。

位置注意设置一下锚点。

接下来“添加节点标记”。

根据我们场景的实际位置，固定节点标记的位置。

节点标记没有“实体”，实际是不显示的，实时预览和输出都不显示，所以我们要给节点标记，制作一个实体样式。

添加图片

选择实体节点图标，之所以有两个，是想制作节点激活与未激活（正在浏览与其他未浏览节点）两种状态。

然后设置节点标记。

漫游节点/标签，选择节点对应的场景。正常方式克隆，选择未激活时显示的图标，这里选蓝色小图标。克隆并激活，选择激活时显示的图标，这里选红色小图标。

制作完一个后，添加多个“节点标记”只需要复制然后改变ID和位置即可。（左侧树列表选中Mark 1，之后复制粘贴，右侧参数栏修改复制的Mark 1的ID和位置）

最后，拖动三个节点，使成为导航图片的子级。

那两个用作节点实体的小图标，可以不用在意，被克隆之后，将不再显示。当然也可以一样拖动为导航图的子级，方便管理。

基本的制作完成，实际预览一下。

下面我们再从外观上丰富一下。

添加文本。

输入文字内容，回车Enter调整文字间隔。

将文本和导航图片放进一个容器里，成组。记得设置一下容器的锚点：右上。

当然上面这几步，我们建议是直接源图片入手，即使用图片制作编辑工具，将地图截图左边添加上导航图文本，毕竟图片制作添加文本的样式远比皮肤编辑的文本样式丰富。

同缩略图导览，如果觉得导航图占位置或影响浏览，除了可以参照缩略图导览的办法，使用按钮控制显示隐藏外，我们这里再补充一个知识点：鼠标事件改变元素的位置。

记住导航图组的位置，然后将其向右移动，并记住移动完的位置。

然后给导航组容器添加动作。

 

这里使用鼠标进入、鼠标离开两个事件完成，当然也可以使用单个事件，鼠标点击来完成。如果使用鼠标点击的话，动作设置如下。

这一块只要把“格式”弄明白，我们就能理解了。

格式一共有以下几种。

设定元素位置和改变元素位置是一样的作用，结果一样，只是二者的“过程”不一样。设定元素位置的动作是瞬时的，干净利索。改变元素位置的动作是缓和的，位移的过程可见。另外这两者的动作是单向一次性动作，单向执行一次就结束了。起始点参考是目标元素的原始位置。

切换元素位置，动作过程和改变元素位置是一样的，有个位移的过场。不同的是切换元素位置是双向一次性动作。一次动作执行一次位移，下一次动作会回归原始状态，循环交替。

设定相对位置和改变相对位置，二者的动作过程分别和设定元素位置和改变元素位置是一样的。不同的是，二者的动作是单向连续的，可单向连续执行，第一次位移参考是元素的原始位置，以后的位移便是参考上一次位移后的位置结果。这个遇到具体问题时再具体的分析。另外，滚动到视图，这里也不介绍。

回头再看一下“偏移”。我们这里设置的效果其实是导航图水平的移动，所以只改变了X的值，未改变Y的值。值的大小是由我们之前让记住的移动前与移动后的差值计算而来，至于正负，看实际向哪移动，向左位移就是负值，向右位移就是正值。我们上面制作移动前是360，移动后是596，实际移动是鼠标进入左移，所以是-236。

最后说明一下，以上属于制作静态导航图，针对室外的全景漫游，在Pano2VR中我们除了使用设计图和截取三方地图外，还可以使用API动态调用读取Google地图作为导航图。如何使用谷歌地图制作导航，请在高阶教程会员文章中查看。