GeoJs 图层注释未固定在图像顶部并更改位置

Question

我有一个在 Openseadragon 中渲染的 .dzi 图像，我使用 GeoJ 在其上添加了注释。 当查看器达到最大缩放时，注释不会停留在其位置并移动。 我需要将注释完全固定，就像它们是图像的一部分一样。

const osd = OpenSeadragon({
      id: "osd",
      prefixUrl: "https://openseadragon.github.io/openseadragon/images/",
      tileSources: [
        "part.dzi",
      ],
      showNavigator: true,
      navigatorPosition: "BOTTOM_RIGHT",
      animationTime: 0,
    });

let layer = map.createLayer("annotation", {
      showLabels: false,
    });



function draw(evt: any) {
      $("#geojs .geojs-layer").css("pointer-events", "auto");
      const type = $(evt.target).data("type");
      layer.mode(type, undefined, { scaleOnZoom: true });
    }
    $(".controls-container button").on("click", draw);

结果是这样的：咯咯笑的注释改变了它们的位置。

是否有任何基于 GeoJs 和 Openseadragon 或任何其他库的解决方案可以替代它们并提供多种注释形状。

演示链接：https://ezgif.com/optimize/ezgif-1-638dd74716.gif

Answer 1

我没有任何将GeoJ连接到OSD的经验，所以我不知道是否有正确的方法来做到这一点。根据您的 CodePen，看起来也许 GeoJs 在放大时缺乏精度。您是否需要 GeoJs 而不是其他注释工具？

OSD 有许多插件可以帮助替代：https://openseadragon.github.io/#plugins

有2个注释插件。 Annotorious 是更强大的一种。还有许多覆盖插件，如 Canvas、SVG、Paper、Fabric 和 HTML。您也可以尝试https://github.com/tuvia-r/openseadragon-select-plugin。