技术咨询：如何在OpenSeadragon组件点击时添加标记？

当然可以实现！OpenSeadragon自带的事件系统和坐标转换能力，刚好能满足点击添加标记的需求。我把实现代码拆成HTML和JavaScript两部分，给你一步步演示：

HTML 部分 #

首先准备OpenSeadragon的容器，以及引入库（如果是本地部署，替换成你的文件路径即可）：

<!-- 引入OpenSeadragon库 -->
<script src="openseadragon.min.js"></script>

<!-- OpenSeadragon容器 -->
<div id="viewer" style="width: 800px; height: 600px; border: 1px solid #ccc;"></div>

JavaScript 部分 #

接下来初始化OpenSeadragon实例，监听点击事件并添加标记：

// 初始化OpenSeadragon视图
const viewer = OpenSeadragon({
    id: "viewer",
    tileSources: {
        type: "image",
        url: "your-large-image.jpg" // 替换成你的大图路径
    },
    prefixUrl: "openseadragon-images/" // 如果使用默认图标，设置资源路径
});

// 监听视图点击事件
viewer.addHandler("canvas-click", (event) => {
    // 将点击的视图坐标转换为容器内的相对坐标
    const viewerElement = viewer.element;
    const rect = viewerElement.getBoundingClientRect();
    const x = event.position.x - rect.left;
    const y = event.position.y - rect.top;

    // 创建标记元素
    const marker = document.createElement("div");
    marker.style.position = "absolute";
    marker.style.width = "20px";
    marker.style.height = "20px";
    marker.style.borderRadius = "50%";
    marker.style.backgroundColor = "rgba(255, 0, 0, 0.7)";
    marker.style.cursor = "pointer";
    marker.style.left = `${x - 10}px`; // 让标记点居中于点击位置
    marker.style.top = `${y - 10}px`;
    marker.title = "点击查看标记详情";

    // 将标记添加到OpenSeadragon容器中
    viewerElement.appendChild(marker);

    // 可选：记录标记的图像原始坐标，用于后续保存/重新加载
    const imageCoords = viewer.viewport.viewportToImageCoordinates(event.position);
    console.log("标记的图像原始坐标：", imageCoords.x, imageCoords.y);
});

关键说明 #

• 坐标转换：因为OpenSeadragon的视图会支持缩放、平移，所以必须把点击的页面坐标转换成容器内的相对坐标，才能让标记正确跟随视图的变换。
• 标记自定义：你可以完全修改标记的样式，比如换成图标、添加文字标签，甚至扩展成可拖拽、可编辑的标记组件。
• 标记持久化：如果需要保存标记，只需要记录每个标记的imageCoords（图像原始坐标），下次加载时通过imageToViewportCoordinates方法转换回视图坐标，就能重新渲染出对应位置的标记。

内容的提问来源于stack exchange，提问作者angelique000