这里是我正在尝试的代码,但无法正常工作
class App extends Component {
state =
{
id: "OSD",
getImageURL: 'http://cdm16022.contentdm.oclc.org/utils/ajaxhelper',
osdConfig: {
setStrings: [{ name: 'Tooltips.Home', value: 'Reset' }],
defaultZoomLevel: 0,
tileSources: [
{
Image: {
xmlns: "http://schemas.microsoft.com/deepzoom/2008",
Url: "https://openseadragon.github.io/example-images/highsmith/highsmith_files/",
Format: "jpg",
Overlap: "0",
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: "1",
TileSize: "256",
Size: {
Height: "621",
Width: "526"
}
}
}
],
},
pages: [
{
id: 0,
},
{
id: 1,
}
],
};
render() {
return (
<div>
<Slider click={this.clickSlider} />
<div className="wrapper">
</div>
<ReactOpenSeadragon {...this.state} />
</div>
);
}
}
export default App;
答案 0 :(得分:1)
我对ReactOpenSeadragon不熟悉,但是我在OpenSeadragon级别上有一些观察。除非您以某种方式放置它们,否则这两个tileSource将直接堆叠在彼此之上。最简单的方法是将collectionMode: true
添加到您的选项(使它们彼此相邻显示)或sequenceMode: true
(使它们显示为页面,您可以使用UI中的箭头按钮导航到它们)。
另外defaultZoomLevel: 0
似乎有误; zoom永远不能为0。也许现在就将其完全删除。