解像度8000 × 5000 の画像ファイル（容量50MBほど）をブラウザ（IEやchromeなど）で開く方法を探しています。

Question

質問失礼いたします。

解像度8000 × 5000 の画像ファイル（容量50MBほど）を
ブラウザ（IEやchromeなど）で開く方法を探しています。

マウスのドラッグで画像を動かす
マウスのホイールで画像をズームダウンする

雰囲気では googlemap に近い動きかと思います。

アイコン画像や文字テキストを別に用意しておき
画像を表示後、指定する場所に表示・非表示させたいです。
（アイコン画像や文字テキストを表示させるためのボタンやボックスは画面右側または左側または下側）
画像ファイルには直接書き込まずブラウザでボタンやボックス操作すると
出たり消えたりする雰囲気です。
希望するアイテムがどこにあるかを探したり絞ったりするイメージでもあります。

そのような方法やサンプルがありませんでしょうか？

ぜひともよろしくお願いいたします。

Comments

[defghi1977]

https://teratail.com/help/avoid-asking

[defghi1977]

技術的にできなくはない(canvas/SVG)けれど, 全く簡単じゃないと思うよ

[退会済みユーザー]

そういう手法、iOSが出始めの頃に流行ったなぁ…

Answer 1

画像をタイル化したら地図系ライブラリで表示可能です。
OpenSeadragon の下記ページにタイル化ツールもいろいろ置いてあります。（デスクトップアプリもあります）

【Creating Zooming Images | OpenSeadragon】
https://openseadragon.github.io/examples/creating-zooming-images/

---

ちなみに Leaflet （地図ライブラリ）にはそれを読み込むためのプラグインもあります。

【Plugins - Leaflet - a JavaScript library for interactive maps】
http://leafletjs.com/plugins.html#non-map-base-layers

---

OpenLayers （地図ライブラリ） とか Google Maps JavaScript API とかでも表示できると思いますが、少しコードを書くことになると思います。

【OpenLayers - Welcome】
http://openlayers.org/

【マップタイプ  |  Google Maps JavaScript API  |  Google Developers】
https://developers.google.com/maps/documentation/javascript/maptypes?hl=ja#CustomMapTypes