概要

Annotorious OpenSeadragon Pluginを使って、IIIFマニフェストファイルからロードした複数画像に対するアノテーション付与を行うサンプルプログラムを作成しました。以下からお試しいただけます。

https://nakamura196.github.io/nuxt3-demo/annotorious

ソースコード

以下を参考にしてください。

https://github.com/nakamura196/nuxt3-demo/blob/main/pages/annotorious/index.vue

ポイント

npm install –force

ライブラリ@recogito/annotorious-openseadragonはopenseadragonのv5に非対応のようで、強制的にインストールする必要がありました。

npm error Could not resolve dependency:
npm error peer openseadragon@"^3.0.0 || ^4.0.0" from @recogito/annotorious-openseadragon@2.7.18
npm error node_modules/@recogito/annotorious-openseadragon
npm error   @recogito/annotorious-openseadragon@"^2.7.18" from the root project

plugins

プラグインとして、Annotoriousを読み込みました。

https://github.com/nakamura196/nuxt3-demo/blob/main/plugins/osd.client.js

ページ切り替え

ページを切り替えた際、一旦アノテーションをクリアして、該当ページのアノテーションをロードする必要がありました。

...

// Reactive object to store annotations for each page
const annotationsMap = ref<{
  [key: number]: Annotation[];
}>({});

...

// Add handler to clear and display annotations on page navigation
  viewer.addHandler("page", () => {
    anno.clearAnnotations();
    showCurrentCanvasAnnotations();
  });

  // Function to display annotations for the current canvas
  const showCurrentCanvasAnnotations = () => {
    const index = viewer.currentPage();
    const annotationsMap_ = annotationsMap.value;

    if (annotationsMap_[index]) {
      annotationsMap_[index].forEach((annotation: Annotation) => {
        anno.addAnnotation(annotation);
      });
    }
  };

...

まとめ

本プログラムを応用して、他のアプリケーションとの接続も可能かと思います。参考になりましたら幸いです。