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に非対応のようで、強制的にインストールする必要がありました。
plugins#
プラグインとして、Annotoriousを読み込みました。
https://github.com/nakamura196/nuxt3-demo/blob/main/plugins/osd.client.js
ページ切り替え#
ページを切り替えた際、一旦アノテーションをクリアして、該当ページのアノテーションをロードする必要がありました。
まとめ#
本プログラムを応用して、他のアプリケーションとの接続も可能かと思います。参考になりましたら幸いです。