创建地图标记

节点标记是外观元素,可用于指示节点在平面图、图像或地图上的位置。它们是地图标记。节点标记和标签可以结合使用来激活动作和媒体。

添加节点标记

按照以下步骤使用节点标记在地图图像 (图像文件)上显示全景图的位置。这适用于地图是平面图或任何其他类型的非街道地图的地图。为此,我们将使用一个组件。

  1. 创建导览

  2. 打开皮肤编辑器

  3. 下载并安装此组件

  4. 添加带有自定义图像的标签模板 。添加节点标记

  5. 最简单的方法是添加名为 Map Pin with Radar 的组件之一。添加此组件时,您将看到一个名为 hide_template 的容器。在该容器中,有一个节点标记,它已被制作成标记模板(只需将 ID 更改为 markertemplate)。

  6. 外部图像 (您的地图)添加到皮肤。这是节点标记的放置位置。

  7. 将节点从游览浏览器拖动到蒙皮编辑器中地图上的位置。将添加一个节点标记。标记图像和文本来自标签模板 。如果你使用了 地图引脚与雷达(Map Pin with Radar) 组件,则标记将使用这些图像。如果您想使用自己的图标/图像,请转到下一个部分。

  8. 保存皮肤。

  9. 输出项目。

有多个位置和地图?继续使用多节点映像

普遍更改所有标记图像

模板的图像可以随时更改。如果已经添加了标记模板中的节点标记,这将普遍更改所有标记图像。

  1. “皮肤编辑器” 中,选择其中一个模板标记图像(marker_activemarker_normal)。

  2. 展开 SVG 图像面板并选择图像旁边的更改 ,然后导航到新的图像文件。选择“ 打开 ”。

现在,所有节点标记图像都将更改。

使用多节点映像

有时需要为一组不同的全景图使用不同的标记图像。对于此示例,我们将对不同的位置/地图使用不同的图像。

这些步骤是添加节点标记的延续。

  1. 将另一个地图/图像添加到皮肤中。

  2. 将用于标记的图像拖到画布上;一个用于活动状态,一个用于正常状态。

  3. “位置” 面板中为图像指定有意义的 ID。

  4. 通过将图像拖到容器上,使容器的子级称为 hide_template

  5. 选择标签模板并展开“ 节点标记 ”窗格。然后,为以下内容选择新图像:

    • 正常克隆

    • 关闭为活动

  6. 现在拖入将使用这些图像的新全景图/节点。

新全景图现在应该使用新的标记图像。

激活元素

节点标记可用于根据触发器激活皮肤中的元素 。此示例将说明如何根据标签显示和隐藏按钮。这样,您也可以将节点标记的强大功能用于非专业项目。

  1. 对于将触发更改的每个全景图,请在用户数据面板添加一个标记 。我们的示例将标签 sound 添加到每个添加了声音的全景图中。

  2. 皮肤编辑器中,添加一个元素,该元素将由上一步中添加的标签触发。我们在控制器中添加了播放和暂停按钮

  3. 在元素的 “外观” 面板中,取消选择“ 可见 ”,以使其保持隐藏状态,直到触发为止。(否则,它将在启动时显示。

  4. 添加新的节点标记。

  5. 展开 节点标记(Node Marker) 面板,然后在 游览节点/标记(Tour Node/Tag) 部分中,添加添加到全景图的标记(键入或从用户数据面板拖动标记)。在我们的示例中,我们添加了声音标签。

    Tag added to Node Marker.
    标签已添加到节点标记。

  6. 在“动作”窗格中,添加以下动作:

    • 来源 :激活; 动作 :可见性/显示元素; 目标 :播放按钮

    • 来源 :停用; 动作 :可见性/隐藏元素; 目标 :播放按钮

    Actions added to the Node Marker.
    添加到节点标记的动作。

  7. 保存皮肤并输出项目。

在地图上显示热点的工具提示

在地图中显示节点的标题(或热点工具提示)也很有用。一种方法是在地图和热点中显示节点的标题。

你可以在本教程中看到地图引脚组件的应用:

https://www.youtube.com/watch?v=a0DCxdIz5TQ

只需复制带有 Radar 组件 hide_template 的 Map Pin 即可获得此功能。或者你可以自己实现它:

将逻辑块添加到 markertemplate 文本框的 Visible 参数中:

触发 比较 价值 操作
鼠标悬停在父级上 =
鼠标悬停 =

可见 = True

这个表达式说:当鼠标悬停在其父级(markertemplate)或自身上时显示文本。

展开高级窗格,并将 {} 添加到热点代理 ID 字段。

将节点拖入到地图中。

现在,你将看到该地图引脚的文本框的热点代理 ID 填充了 {node 1}(或你添加的任何节点)。

将大括号添加到热点代理 ID 中,在皮肤和热点之间创建了链接。您可以使用节点 ID 来代替使用热点 ID。

另请参阅...

上次修改时间:2023 年 10 月 6 日