Javascript JS OpenSeadragon：单击组件时->；添加标记

我有一个javascript组件OpenSeadragon（），用于使用以下代码查看大型图像：

Html:

---

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

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

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

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

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
    },

});

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