Javascript SceneNode（层）、深度缩放合成器和Seadragon Ajax

我正在使用DeepZoom Composer将不同的图像层叠在另一个图像的上面，上面的每一层都更小。（类似于）

是否有一种简单的方法可以使用Seadragon Ajax 0.8.9放大顶部的每个分层图像（容器显示顶部分层图像的精确比例为1:1），而不是手动创建控件覆盖并指定单击行为来缩放/平移整个构图上的分层区域

更新： 我还尝试使用SparseImageSceneGraph.xml值将zoomTo设置为：

<x>0.0663816754801515</x>
<y>0.0850837639496624</y>
<Width>0.0322681051707401</Width>
<Height>0.0322681051707415</Height>
<ZOrder>2</ZOrder>

但它与第二级图像有一点出入

还尝试：

var x = 0.066381675480155;
var y = 0.085083763949665;
var w = 0.0322681051707403;
var h = 0.0322681051707407;
var rect = new Seadragon.Rect(x,y,w,h); 
viewer.viewport.fitBounds(rect);

但这也是第二层图像。（即使第二个图像部分可见）

第二次更新

我现在正在研究使用OpenSeaDragon来测试我想要实现的目标，以下是我所拥有的：

viewer = new OpenSeadragon.Viewer("container");

$.extend(true, OpenSeadragon.options, {
    autoHideControls: false,
    defaultZoomLevel : 1,
    visibilityRatio : 1.1,
    constrainDuringPan : true,
    minZoomImageRatio : 1,
    maxZoomPixelRatio : 30,
    animationTime: 1.5,
    tileSources: [{
        id: 'example-overlay',
         x: 0,
         y: 0,
         width: 0.015, 
         height: 0.015,
         className: 'highlight'
    }]  
});         

viewer.showNavigator = false;
viewer.open("test4/GeneratedImages/dzc_output.xml");
viewer.clearControls(); 

---

我无法使用上面的方法显示覆盖图，我做错了什么？是否有一个使用xml（dzi）初始化OpenSeadragon的好例子，该xml（dzi）包含所有覆盖和覆盖的相关点击事件？任何代码示例都将不胜感激

看起来这肯定是可能的，而且你似乎走在了正确的轨道上。也许这些数字的偏差有某种规律

顺便说一下，Seadragon Ajax自0.8.9以来已经有了很大的发展，现在是OpenSeadragon：

---

也许你现在想做的已经可以用了？如果没有，你可以在那里提交一个bug。。。它正在积极地开发中。

看起来它确实应该是可能的，而且看起来你走在了正确的轨道上。也许这些数字的偏差有某种规律

顺便说一下，Seadragon Ajax自0.8.9以来已经有了很大的发展，现在是OpenSeadragon：

---

也许你现在想做的已经可以用了？如果没有，你可以在那里提交一个bug。。。它正在积极开发。

有了新的OpenSeadragon，有没有办法删除右上方的位置框以及重叠图像（而不是使用css类设置背景图像）？当然。。。在您的

openseadagon.Viewer

选项中包括

showNavigator:false

，以隐藏导航框。您可以通过

OpenSeadragon.Drawer.addOverlay（）

添加简单图像和其他HTML对象。使用新的OpenSeadragon，有没有办法删除右上方的位置框以及覆盖图像（而不是使用css类设置背景图像）？确定。。。在您的

openseadagon.Viewer

选项中包括

showNavigator:false

，以隐藏导航框。您可以通过

openseadagon.Drawer.addOverlay（）

添加简单图像和其他HTML对象。

viewer = new OpenSeadragon.Viewer("container");

$.extend(true, OpenSeadragon.options, {
    autoHideControls: false,
    defaultZoomLevel : 1,
    visibilityRatio : 1.1,
    constrainDuringPan : true,
    minZoomImageRatio : 1,
    maxZoomPixelRatio : 30,
    animationTime: 1.5,
    tileSources: [{
        id: 'example-overlay',
         x: 0,
         y: 0,
         width: 0.015, 
         height: 0.015,
         className: 'highlight'
    }]  
});         

viewer.showNavigator = false;
viewer.open("test4/GeneratedImages/dzc_output.xml");
viewer.clearControls();