javascript - JS OpenSeadragon：点击组件时 -> 添加标记

Question

我有一个 javascript 组件 OpenSeadragon ( openseadragon.github.io ) 用于使用以下代码查看大图像：

html:

<img id="pushpin" src="pushpin.png">
<div id="openseadragon" style="width: 800px; height: 600px;"></div>

Javascript：

var viewer = OpenSeadragon({
    id: "openseadragon",
    prefixUrl: "node_modules/openseadragon/build/openseadragon/images/",
    tileSources: "images/test/test.dzi",
    overlays: [{
        id: 'pushpin',
        x: 0.5,
        y: 0.5
    }],
    gestureSettingsMouse:   {
        clickToZoom: false
    },

});

我的问题是：单击组件时是否可以添加标记？

Answer 1

是的，您应该能够执行以下操作：

viewer.addHandler('canvas-click', function(event) {
  var viewportPoint = viewer.viewport.pointFromPixel(event.position);
  viewer.addOverlay('pushpin', viewportPoint);
});

我还没有测试过该代码，所以它可能不太正确，但这是基本思想。