ADN Open CIS
Сообщество программистов Autodesk в СНГ

Просмотр больших OCR/Terrain изображений в приложении Forge Viewer

Во время посещения клиента Forge в Брисбене, Австралия, меня спросили ... «может ли Forge-Viewer отображать большие растровые изображения, например, сканированный документ или большую карту местности?»   Да, может, и вот как ...  

Forge Viewer имеет встроенный просмотрщик Leaflet .

ДЭМО - Terrain

ДЭМО - документ PDF

Исходный код GitHub

Используя средство Forge Viewer для больших изображений, давайте воспользуемся встроенными инструментами разметки и измерения - это та же самая функция, что и в BIM360 для просмотра PDF-файлов.

Как это работает?

1. Создание плиток

Большие изображения разбиваются на «плитки» растровых изображений, на разных «Уровнях разрешения», образуя так называемую «плиточную пирамиду».

Вот диаграмма «плиточной пирамиды»...

Давайте углубимся...

На вершине пирамиды, уровень 0, одна плитка, она показывает размытую версию изображения «карта мира», с низким разрешением.

Как пример, карта местности (левое изображение): 

Следующий уровень вниз, уровень 1 (среднее изображение), карта мира разбивается на четыре плитки, а разрешение выше, менее размыто.

Аналогично, уровень 2 (правое изображение), теперь у нас есть 16 плиток.  Четче, более подробно.

Мы продолжаем движение, создавая много уровней и больше деталей изображения.

2. Просмотр плиток

Когда браузер хочет просмотреть город - например, Париж, с карт Google - он не загружает всю карту мира и каждую плиту в «плиточную пирамиду».  Оно слишком большое.

Вместо этого браузер определяет правильный уровень в пирамиде и загружает только плитки, характерные для Парижа, с разрешением, соответствующим нашему разрешению экрана.

3. Более быстрый дизайн интерфейса (UX)

Для более быстрой загрузки зритель может загружать некачественный «предварительный просмотр» «плиток Парижа», прежде чем загружать финальные фрагменты.  Это легко сделать с черепицей-пирамидой.  

ДЭМО - документ PDF

Скажем, «Парижские плитки» находятся на уровне 14.  Сначала загрузите одиночную 256x256 плитку в Париже, возможно, уровня 12, и растяните ее, чтобы заполнить экран (размытый).  Теперь переключитесь на набор плитки «13-го уровня», который является более резким.  Наконец, уровень 14 снова более чёткий.

Вы можете увидеть это в анимации выше.  Forge Viewer показывает PDF-файл, сделанный из "плиточных изображений".  Он загружает уровень 10, затем 11, 12 и, наконец, оседает на 13-м уровне, чтобы соответствовать видовому экрану и плотности пикселей MacBook Retina.  С правой стороны у меня открыта консоль отладки сети, показывающая как передаются изображения.  Я установил производительность сетевой нагрузки в «медленная 3G», чтобы замедлить работу, поэтому вы можете увидеть эффект.

 Плитка с разрешением 256x256 пикселей загружается и растягивается в соответствии с холстом (правое изображение), а затем растянутая плитка заменяется четырьмя 256x256 пиксельными плитками (левое изображение).

> Как создать собственную плиточную пирамиду

1. Потянув карту местности

Чтобы предоставить некоторый образец контента для моей демонстрации, я собираюсь вытащить плитку-пирамиду из OpenTopoMap,  в частности, карту местности, так что я могу продемонстрировать инструмент измерения.

Вот сценарий bash, который я использовал ...

Скрипт только загружает часть TopoMapплиток  в локальную папку.  Каждая плитка 256x256, но полная ширина и высота ландшафта достигает 6k x 6k пикселей, для этого набора образцов (область окружения, окружающая Чикаго на максимальном уровне 13).

Теперь я изменяю  bubble.json, чтобы указать на новую папку, содержащую все эти фрагменты изображения.  И я тоже поднял разрешение пикселей.

Когда я открываю файл index.html , и указываю documentId в файле topo/bubble.json, теперь я вижу карту местности!

Я могу увеличивать и уменьшать масштаб, чтобы получить больше деталей рельефа. Я также могу добавить разметку и измерения.

Вот живая ДЭМО - Terrain
 

Примечание: Я использую window.location.hash, чтобы указать имя папки. То есть, topo/ является папкой, поэтому я использую #topo в URL.

2. Преобразование большого изображения (сканирование OCR)

Скажем, вы просмотрели большой документ (OCR) и теперь имеете действительно большой файл размером 6k на 6k TIFF.  Это 200 МБ - это размер, который слишком велик и неуклюж для быстрой загрузки в браузере, а также... вы хотите добавить разметку и измерения.

Итак, сначала преобразуем отсканированное изображение TIFF в jpeg-плиточную пирамиду, как мы это делали с двумя примерами выше (PDF и Terrain). Я буду использовать  imagemagick  для этого.

Из командной строки я печатаю...

Затем я создаю файл bubble.json.  Это сообщает Forge Viewer, где находится папка с изображениями, а также маска, например: out/z/y/x.jpg. Также я установил разрешение пикселей, как это сделано в демоверсии.

Я открываю ./index.html#out файл и мой отсканированный документ OCR - он быстро загружается, и я могу измерять и выполнять разметку.

Автономные разметка и измерение 

В этот пример включены файлы, чтобы перевести это 2D-демо в «офлайн», включая инструменты разметки и измерения.  См. файлы, перечисленные в репозитории GitHub.

Примечания:

• измените CSS, чтобы создать настраиваемый пользовательский интерфейс разметки.
• Вам нужно будет выполнить калибровку измерения, чтобы начать производить измерения.

Источник: https://forge.autodesk.com/blog/viewing-large-ocrterrain-images-forge-viewer