OpenSeadragon单行列图块源添加独立覆盖层定位异常求助

嘿，我来帮你理清楚这个问题～首先明确说：覆盖层是具备独立性的，你遇到的问题是因为把覆盖层加到了错误的层级里，不是覆盖层本身没有独立性哦。

在那个Single-Row Tile Source Collection示例的结构里，tileSources集合是用来存放所有要展示的基础图块源（也就是你的那几张图片）的。而覆盖层不能直接作为单独的项丢进tileSources里，它需要绑定到单个具体的tile source对象上，这样才会在对应的图片上方渲染。

正确的配置方式 #

1. 找到你定义的前两个基础图块源对象
2. 分别给这两个对象添加overlays属性，把对应图片的覆盖层配置放在各自的overlays数组中

举个和示例结构匹配的代码例子：

const tileSources = [
  // 第一张图片 + 专属覆盖层
  {
    type: 'image',
    url: '你的第一张图片路径',
    width: 你的图片宽度,
    height: 你的图片高度,
    overlays: [
      {
        type: 'image',
        url: '第一张覆盖层图片路径',
        x: 0, // 覆盖层相对于基础图的X轴偏移量
        y: 0, // 覆盖层相对于基础图的Y轴偏移量
        width: 覆盖层宽度,
        height: 覆盖层高度
      }
    ]
  },
  // 第二张图片 + 专属覆盖层
  {
    type: 'image',
    url: '你的第二张图片路径',
    width: 你的图片宽度,
    height: 你的图片高度,
    overlays: [
      {
        type: 'image',
        url: '第二张覆盖层图片路径',
        x: 0,
        y: 0,
        width: 覆盖层宽度,
        height: 覆盖层高度
      }
    ]
  },
  // 剩余的其他图块源...
];

为什么之前的做法会出错？ #

当你把覆盖层直接加到tileSources集合里时，它会被当成一个独立的基础图块源来渲染，而不是叠加在你想要的那张图片上方。这就导致覆盖层没有出现在预期的位置上。

而覆盖层的独立性恰恰体现在：每个覆盖层都是绑定到特定tile source上的，只会在自己关联的图片上方显示，完全不会影响其他图片的覆盖层或展示效果。调整到正确的层级结构后，就能实现你想要的“第一张覆盖层在第一张图上、第二张覆盖层在第二张图上”的效果啦。

内容的提问来源于stack exchange，提问作者hussainb