添加漫游地图

了解如何将地图添加到虚拟游览中。

漫游地图可以作为图像或地图图块(例如 Google 地图或 Mapbox)获取。游览地图中的默认地图是内部使用的世界地图。要将地图添加到您的项目(在皮肤中),请使用绿色加号添加地图。要在网站上显示 Google 地图,需要获取 API 密钥。

检查哪些内置皮肤支持地图。

在触摸设备上,可以使用 1 根手指移动地图,使用 2 根手指放大和缩小。

添加 OpenStreetMaps

OpenStreetMap 是一个开源地图提供商,您可以在开放许可下免费使用。Pano2VR 使用 Leaflet API 来显示地图。

  1. 打开游览地图。

  2. 单击绿色加号按钮,然后选择添加地图

    Add Map.
    添加地图。
    Map added.
    添加了地图。

    如果游览节点具有位置数据,则它们将在地图上由图钉表示。活动节点将显示红色引脚,其他节点将显示蓝色。GPS 可能不准确。如果是这样,请将引脚拖动到其准确位置。

    ★ 如果图像没有位置数据,请转到此处了解如何添加位置数据

  3. 在属性面板中,将显示新地图的设置。在地图提供程序列表中,选择 OpenStreetMaps

    Map Properties
    地图属性

  4. 打开皮肤或创建新皮肤。

  5. 在蒙皮编辑器中,添加 Map 元素。选择绘制地图。,然后为地图绘制形状。地图元素将填充占位符内容。生成项目后,将出现地图。

  6. 将地图锚定到右上角。

    Anchor the map.
    锚定地图。

  7. 接下来,从组件工具箱中,添加 Map Element Map Pin

  8. 在树或画布中选择地图元素,然后转到地图面板。对于 Map,选择 First Map in Project。对于 API,选择 Leaflet

  9. 接下来,找到“ 克隆为标记” 设置。从列表中,选择 map_pin

    Map element settings.
    映射元素设置。

  10. 保存皮肤。

  11. 返回主程序窗口,添加 Web 输出(如果尚未添加)并选择刚刚添加地图的皮肤。

  12. 生成 Web 输出。

添加 Google 地图

  1. 打开游览地图
  2. 添加 GPS 并将 北 设置为每个节点图像(如果尚未添加)。如果节点具有位置数据,则它们将在游览地图中作为引脚可见。如果节点没有 GPS,您可以在此处了解如何添加它。★ 提示:保存项目。
  3. 打开皮肤或创建新皮肤。
  4. 皮肤编辑器(组件工具箱) 中,添加 地图剪影(Map Silhouette) 按钮并将其添加到皮肤中。在我们的示例中,我们将其锚定到右下角。此组件有一个按钮,用于打开和关闭视图中心的地图。
  5. 在树中,选择 地图元素(Map Element)。(见于 map_container
  6. 转到地图设置。对于地图,选择任一 Google 地图。
  7. 添加您的 Google API 密钥。Google 需要一个非免费的 API 密钥,您需要注册该密钥。
  8. 保存皮肤。
  9. 返回主程序窗口,添加 Web 输出(如果尚未添加)并选择刚刚添加地图的皮肤。
  10. 生成 Web 输出。

★ 如果您在地图中看到此警告,则表示您忘记执行第 7 步或输入的 API 密钥有误。

The warning one gets when an API key is missing.
缺少 API 密钥时收到的警告。

将地图添加为图像

任何图像都可以用作地图。在本练习中,我们的图像将没有位置数据,地图将是图像。当地图是图像时,您可以使用游览地图的平面图设置添加它,也可以将其直接添加到皮肤中。

通过漫游地图添加地图

  1. 打开游览地图
  2. 单击绿色加号按钮并选择添加添加平面图。 系统将提示您打开图像文件。
  3. 在地图属性中,选择相应的图像格式。我们的例子是巴布亚新几内亚。可选:将 ID 更改为更有意义的 ID。
    Floor Plan properties
    平面图属性
  4. 背景颜色更改为透明。
  5. 将节点拖动到游览地图中地图上的相应位置。这会将节点添加为引脚。根据需要拖动引脚。★【提示】按住 Alt 或 Option 键可移动蓝色非活跃的图钉。(活动引脚为红色,是查看器中当前选定的节点。
  6. 按住 N 键并拖动全景图来校正节点的视图。在游览地图中观察雷达波束。或者,您可以在游览地图中拖动雷达波束。
  7. 链接节点
  8. 打开皮肤编辑器并添加 地图元素(Map Element)。
    The map element added to the skin.
    添加到皮肤的地图元素。
  9. 在地图属性中,选择平面图作为地图类型,然后从列表中选择在游览地图中添加的平面图。
  10. 选择简单平面图
  11. [可选]将雷达大小设置为 100 像素。在我们的示例中,如果保持默认大小,梁将在平面图的边缘被切断。
  12. “对齐” 更改为居中
  13. 在矩形设置中,将边框设置为 0。
    Floor plan settings used for the map image in the Skin Editor.
    用于蒙皮编辑器中地图图像的平面图设置。
  14. 保存皮肤并生成输出。您的项目中不应该有带有交互式图钉和雷达波束的地图或平面图。

从这里,您可以通过添加自定义图钉、显示和隐藏地图、添加工具提示等来进一步自定义地图。

通过皮肤编辑器添加

  1. 打开皮肤编辑器
  2. 组件工具箱中,找到并添加带有雷达轮廓的地图图钉
  3. 将节点从游览浏览器拖动到画布中的地图上(在 Mac 上,您需要先弹出游览浏览器,然后将皮肤编辑器置于焦点中。这将添加地图引脚。要优化放置,请务必先在画布中单击以取消选择所有内容,然后选择图钉并拖动。
    Tour Browser detached from main program window to allow dragging nodes in to the skin’s canvas.
    浏览浏览器与主程序窗口分离,以允许将节点拖入皮肤的画布。
    Node Markers added to the map.
    节点标记已添加到地图中。
  4. 保存皮肤。
  5. 生成输出。

从这里,您可以通过添加自定义图钉、显示和隐藏地图、添加工具提示等来进一步自定义地图。

另请参阅...

上次修改时间:2022 年 1 月 30 日