Javascript 向openseadragon图像添加/定位独立覆盖图及相关错误消息

我使用与示例中提到的相同的配置和磁贴源来遵循示例

我现在正试图在第一个和第二个图像上添加覆盖层，但做起来有困难

第一张覆盖图应该放在第一张图像的顶部，第二张覆盖图应该放在第二张图像上，但不是这样

我正在将覆盖层集合添加到tileSources集合

不同页面的重叠不是独立的吗

另外，在控制台中添加覆盖层后，我得到以下错误，我不明白如何在插件的基本初始化中使用tileImage.imageToViewportRectangle

[Viewport.imageToViewportRectangle]对于多图像不准确； 改为使用TileImage.imageToViewportRectangle

代码笔示例URL：

代码笔代码：

html:

Javascript:

$( document ).ready(function(){

        var viewer = OpenSeadragon({
            id: "viewer",
            prefixUrl: "https://cdnjs.cloudflare.com/ajax/libs/openseadragon/2.3.1/images/",
            debugMode: false, //if you want to see the render grid

            collectionMode: true,
            collectionRows: 1,
            collectionTileSize: 1024,
            collectionTileMargin: 256,

            tileSources: [
                {
                    Image: {
                        xmlns: "http://schemas.microsoft.com/deepzoom/2008",
                        Url: "https://openseadragon.github.io/example-images/highsmith/highsmith_files/",
                        Format: "jpg",
                        Overlap: "2",
                        TileSize: "256",
                        Size: {
                            Height: "9221",
                            Width: "7026"
                        }
                    }
                    ,
                    overlays: [{
                        id: 'overlay1',
                        px: 100,
                        py: 0,
                        width: 200,
                        height: 200,
                        className: 'filter'
                    }]
                },
                {
                    Image: {
                        xmlns: "http://schemas.microsoft.com/deepzoom/2008",
                        Url: "https://openseadragon.github.io/example-images/highsmith/highsmith_files/",
                        Format: "jpg",
                        Overlap: "2",
                        TileSize: "256",
                        Size: {
                            Height: "9221",
                            Width: "7026"
                        }
                    },
                    overlays: [{
                        id: 'overlay2',
                        px: 100,
                        py: 0,
                        width: 500,
                        height: 500,
                        className: 'filter'
                    }]
                },
                {
                    Image: {
                        xmlns: "http://schemas.microsoft.com/deepzoom/2008",
                        Url: "https://openseadragon.github.io/example-images/highsmith/highsmith_files/",
                        Format: "jpg",
                        Overlap: "2",
                        TileSize: "256",
                        Size: {
                            Height: "9221",
                            Width: "7026"
                        }
                    }
                },
                {
                    Image: {
                        xmlns: "http://schemas.microsoft.com/deepzoom/2008",
                        Url: "https://openseadragon.github.io/example-images/highsmith/highsmith_files/",
                        Format: "jpg",
                        Overlap: "2",
                        TileSize: "256",
                        Size: {
                            Height: "9221",
                            Width: "7026"
                        }
                    }
                },
                {
                    Image: {
                        xmlns: "http://schemas.microsoft.com/deepzoom/2008",
                        Url: "https://openseadragon.github.io/example-images/highsmith/highsmith_files/",
                        Format: "jpg",
                        Overlap: "2",
                        TileSize: "256",
                        Size: {
                            Height: "9221",
                            Width: "7026"
                        }
                    }
                },
                {
                    Image: {
                        xmlns: "http://schemas.microsoft.com/deepzoom/2008",
                        Url: "https://openseadragon.github.io/example-images/highsmith/highsmith_files/",
                        Format: "jpg",
                        Overlap: "2",
                        TileSize: "256",
                        Size: {
                            Height: "9221",
                            Width: "7026"
                        }
                    }
                }
            ]
        });


})

---

看起来这是OpenSeadragon的一个bug！这是发行票：

您可以通过单独存储覆盖图并在图像打开后添加它们来解决此问题，类似于这样（假设您已经创建了查看器）：

您可以在此处看到这一点：

    body {
        margin:0;
        padding:0;
    }
    #viewer {
        width:100%;
        height: 600px;
        margin: auto;
        background-color: lightgray;
    }
    #overlay1, #overlay2 {
        width: 100px;
        height: 100px;
        background-color:powderblue;
    }

$( document ).ready(function(){

        var viewer = OpenSeadragon({
            id: "viewer",
            prefixUrl: "https://cdnjs.cloudflare.com/ajax/libs/openseadragon/2.3.1/images/",
            debugMode: false, //if you want to see the render grid

            collectionMode: true,
            collectionRows: 1,
            collectionTileSize: 1024,
            collectionTileMargin: 256,

            tileSources: [
                {
                    Image: {
                        xmlns: "http://schemas.microsoft.com/deepzoom/2008",
                        Url: "https://openseadragon.github.io/example-images/highsmith/highsmith_files/",
                        Format: "jpg",
                        Overlap: "2",
                        TileSize: "256",
                        Size: {
                            Height: "9221",
                            Width: "7026"
                        }
                    }
                    ,
                    overlays: [{
                        id: 'overlay1',
                        px: 100,
                        py: 0,
                        width: 200,
                        height: 200,
                        className: 'filter'
                    }]
                },
                {
                    Image: {
                        xmlns: "http://schemas.microsoft.com/deepzoom/2008",
                        Url: "https://openseadragon.github.io/example-images/highsmith/highsmith_files/",
                        Format: "jpg",
                        Overlap: "2",
                        TileSize: "256",
                        Size: {
                            Height: "9221",
                            Width: "7026"
                        }
                    },
                    overlays: [{
                        id: 'overlay2',
                        px: 100,
                        py: 0,
                        width: 500,
                        height: 500,
                        className: 'filter'
                    }]
                },
                {
                    Image: {
                        xmlns: "http://schemas.microsoft.com/deepzoom/2008",
                        Url: "https://openseadragon.github.io/example-images/highsmith/highsmith_files/",
                        Format: "jpg",
                        Overlap: "2",
                        TileSize: "256",
                        Size: {
                            Height: "9221",
                            Width: "7026"
                        }
                    }
                },
                {
                    Image: {
                        xmlns: "http://schemas.microsoft.com/deepzoom/2008",
                        Url: "https://openseadragon.github.io/example-images/highsmith/highsmith_files/",
                        Format: "jpg",
                        Overlap: "2",
                        TileSize: "256",
                        Size: {
                            Height: "9221",
                            Width: "7026"
                        }
                    }
                },
                {
                    Image: {
                        xmlns: "http://schemas.microsoft.com/deepzoom/2008",
                        Url: "https://openseadragon.github.io/example-images/highsmith/highsmith_files/",
                        Format: "jpg",
                        Overlap: "2",
                        TileSize: "256",
                        Size: {
                            Height: "9221",
                            Width: "7026"
                        }
                    }
                },
                {
                    Image: {
                        xmlns: "http://schemas.microsoft.com/deepzoom/2008",
                        Url: "https://openseadragon.github.io/example-images/highsmith/highsmith_files/",
                        Format: "jpg",
                        Overlap: "2",
                        TileSize: "256",
                        Size: {
                            Height: "9221",
                            Width: "7026"
                        }
                    }
                }
            ]
        });


})

var overlaySets = [
  [{
    id: 'overlay1',
    px: 100,
    py: 0,
    width: 200,
    height: 200,
    className: 'filter'
  }],
  [{
    id: 'overlay2',
    px: 100,
    py: 0,
    width: 500,
    height: 500,
    className: 'filter'
  }]
];

viewer.addHandler('open', function() {
  overlaySets.forEach(function(overlaySet, setIndex) {
    var tiledImage = viewer.world.getItemAt(setIndex);
    if (!overlaySet || !tiledImage) {
      return;
    }

    overlaySet.forEach(function(overlay) {
      var rect = new OpenSeadragon.Rect(overlay.px, overlay.py, overlay.width, overlay.height);
      rect = tiledImage.imageToViewportRectangle(rect);
      overlay.x = rect.x;
      overlay.y = rect.y;
      overlay.width = rect.width;
      overlay.height = rect.height;
      delete overlay.px;
      delete overlay.py;
      viewer.addOverlay(overlay);
    });
  });
});