Как сделать пирамиду из черепичной картинки для листовки из негеографического источника

Предположим, у меня есть негеографическое изображение вместо обычной карты. Скажем, например, рентгеновское, МРТ-сканирование или изображение микроскопа, и я хотел бы использовать буклет, чтобы я мог масштабировать, уменьшать масштаб и помещать некоторые маркеры в некоторые заранее определенные точки.

Я прочитал пример из негеографических карт, но этот случай демонстрирует использование одного изображения вместо черепицы. Я предпочел бы предпочитать плитки, так как мой образ будет довольно большим. Есть ли что-то еще, что подходит для случая, подобного тому, который я описал выше, пожалуйста? Я изучаю растровые символы, но я еще не закритировал , работает ли это для любого растрового файла только для простых карт.

javascript,d3.js,leaflet,dc.leaflet.js,

2

Ответов: 2


6 ов принято

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

Чтобы дать вам пример, вот карта PDF-карт европейских внутренних водных путей с векторной графикой, и вот ее слабая карта .

В принципе, самым разумным способом является создание стандартного набора плиток и его лифлет. То есть для производства плиток размером 256x256 для каждого уровня масштабирования.
Вы не хотите, чтобы огромные изображения были слоями, и это было тяжело для браузера. Вы также не хотите изменять размер в браузере, это приведет к низкому качеству.

К счастью, создание изображений с помощью ImageMagick довольно легко . Вот как я это делаю.

Решите, сколько уровней масштабирования вы хотите

Сначала определите, сколько уровней масштабирования вы хотите. Это зависит от карты, по моему опыту вам нужно всего 5-7 уровней масштабирования. Например, возьмем 5 уровней масштабирования. Чем больше уровней вы производите, тем выше требования к оборудованию. Подход ниже, вероятно, не подходит для более 7-8 уровней масштабирования.

Рендеринг или изменение размера исходного изображения

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

  • 256 пиксель на уровне 0
  • 512 пиксель на уровне 1
  • 1024 пиксель на уровне 2
  • 2048 пиксель на уровне 3
  • 4096 пиксель на уровне 4
  • и так далее.

Внимание: результатом этого шага являются огромные изображения. Уровень 5 будет составлять около 10 МБ, уровень 6 около 20 МБ, уровень 7 - около 40 МБ. Будьте осторожны, попробуйте открыть эти изображения в «обычных» инструментах.

Изменение размера изображения с высоким разрешением

Если ваш источник представляет собой изображение convert -resizeс высоким разрешением, просто используйте либо с : x*256*или *256*x:

convert imagessource.jpg -resize   x256 images.jpg
convert imagessource.jpg -resize   x512 images1.jpg
convert imagessource.jpg -resize  x1024 images2.jpg
convert imagessource.jpg -resize  x2048 images3.jpg
convert imagessource.jpg -resize  x4096 images4.jpg
convert imagessource.jpg -resize  x8192 images5.jpg

Если у вас есть несколько изображений с масштабированием для разных уровней масштабирования (думаю, это будет иметь место для сканирования МРТ), выберите изображение с близким увеличением.

Работа с уже сложенными изображениями

В некоторых случаях исходные изображения уже разрезаются на плитки. Это типично для «старых» клиентов карты, которые вы хотите скрыть. Это пример , плитки называются vk-X-Y.jpgи разрезаются с некоторым перекрытием. В этом случае сначала нужно обрезать изображения:

magick datavk-0-0.jpg  -crop 522x373+0x0 images	-0-0.jpg
magick datavk-1-0.jpg  -crop 522x373+0x0 images	-1-0.jpg
magick datavk-2-0.jpg  -crop 522x373+0x0 images	-2-0.jpg
magick datavk-3-0.jpg  -crop 522x373+0x0 images	-3-0.jpg
magick datavk-4-0.jpg  -crop 522x373+0x0 images	-4-0.jpg
magick datavk-5-0.jpg  -crop 650x373+0x0 images	-5-0.jpg
...

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

Затем, когда фрагменты обрезаются, добавьте их к большому изображению:

magick images	-0-0.jpg images	-1-0.jpg images	-2-0.jpg images	-3-0.jpg images	-4-0.jpg images	-5-0.jpg +append images	-0.jpg
...
magick images	-0.jpg images	-1.jpg images	-2.jpg images	-3.jpg images	-4.jpg images	-5.jpg images	-6.jpg images	-7.jpg images	-8.jpg images	-9.jpg images	-10.jpg -append images	.jpg

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

Изменение размера PDF-файлов

При рендеринге PDF-файлов я предпочитаю изменять размер с помощью density. Чтобы рассчитать плотность за уровень масштабирования (это команда Windows, измените для Linux соответственно):

identify -precision 16 -format "%%[fx:((256/max(w,h))*72)]
%%[fx:((512/max(w,h))*72)]
%%[fx:((1024/max(w,h))*72)]
%%[fx:((2048/max(w,h))*72)]
%%[fx:((4096/max(w,h))*72)]" source.pdf

Это дает вам что-то вроде:

21.89073634204276
43.78147268408551
87.56294536817103
175.1258907363421
350.2517814726841

Магия (4096/max(w,h))*72выражения проста: (размер цели / размер источника) * стандартный DPI.

Обладая плотностью изображения:

convert -verbose -density 21.89073634204276 source.pdf        images.png
convert -verbose -density 43.78147268408551 source.pdf        images1.png
convert -verbose -density 87.56294536817103 source.pdf        images2.png
convert -verbose -density 175.1258907363421 source.pdf        images3.png
convert -verbose -density 350.2517814726841 source.pdf        images4.png

Это может занять много времени на более высоких уровнях.

Вырезание изображений уровня в плитах

На этом этапе у вас должно быть одно изображение на слой. Теперь мы можем разрезать их на плитки:

convert -verbose images.png -crop 256x256 +adjoin -background white -extent 256x256 -set filename:tile "%%[fx:floor(page.x/256)]_%%[fx:floor(page.y/256)]" +repage "tiles_%%[filename:tile].png"
convert -verbose images1.png -crop 256x256 +adjoin -background white -extent 256x256 -set filename:tile "%%[fx:floor(page.x/256)]_%%[fx:floor(page.y/256)]" +repage "tiles1_%%[filename:tile].png"
convert -verbose images2.png -crop 256x256 +adjoin -background white -extent 256x256 -set filename:tile "%%[fx:floor(page.x/256)]_%%[fx:floor(page.y/256)]" +repage "tiles2_%%[filename:tile].png"
convert -verbose images3.png -crop 256x256 +adjoin -background white -extent 256x256 -set filename:tile "%%[fx:floor(page.x/256)]_%%[fx:floor(page.y/256)]" +repage "tiles3_%%[filename:tile].png"
convert -verbose images4.png -crop 256x256 +adjoin -background white -extent 256x256 -set filename:tile "%%[fx:floor(page.x/256)]_%%[fx:floor(page.y/256)]" +repage "tiles4_%%[filename:tile].png"
convert -verbose images5.png -crop 256x256 +adjoin -background white -extent 256x256 -set filename:tile "%%[fx:floor(page.x/256)]_%%[fx:floor(page.y/256)]" +repage "tiles5_%%[filename:tile].png"

Это создает такие файлы, как:

  • tiles/0_0_0.png
  • tiles/1_0_0.png
  • tiles/1_0_1.png
  • tiles/1_1_0.png
  • tiles/1_1_1.png
  • и т.п.

Это ваш статический предустановленный набор плиток размером 256x256.

Настроить листы

Теперь вам нужно только настроить Листовку. Предполагая, что файлы tile находятся в ../tilesкаталоге относительно HTML-файла, это просто:

L.tileLayer('../tiles/{z}_{x}_{y}.png', {
    maxZoom: 5,
    noWrap: true,                     
    attribution: 'Some Attribution'
}).addTo(map);

Если вы хотите установить правильную начальную точку обзора, увеличьте / переместитесь туда, где хотите, откройте консоль JavaScript в своих инструментах dev и введите:

map.getCenter();
map.getZoom();

Затем используйте печатные параметры при инициализации карты:

var map = L.map('map').setView([-26.3525, -65.0390], 3);

Чтобы добавить маркер:

L.marker([-26.3525, -65.0390], {title: "Hi there!"}).addTo(map);

Маркер останется в том же положении, даже если вы панорамируете или увеличиваете масштаб.


Вот один из примеров:


3
+500

У libvips есть операция, которая может сделать сломанный набор карт для листовки в одной команде.

Например, с этой картой PDF-карт европейских внутренних водных путей (спасибо @lexicore!) Вы можете ввести:

vips dzsave European_inland_waterways_-_2012.pdf[dpi=600] xxx --layout google

и он сделает каталог, xxxсодержащий все ваши фрагменты, готовые для загрузки на ваш сервер. Это займет около 15 секунд (на этом ноутбуке все равно).

Это быстро и требует небольшой памяти. Детали немного меняются в формате файла, но для многих форматов он может декодировать входные данные, строить все уровни пирамиды и писать выходные фрагменты, все параллельно и без необходимости загружать все входное изображение в Память. Я регулярно делаю пирамиды размером более 300 000 х 300 000 пикселей на скромном ноутбуке.

Он может делать некоторые полезные типы файлов, а также обычные tiff, PNG, JPG и т. Д., Включая такие вещи, как SVG, FITS, DICOM и OpenSlide. Это может сделать пирамиды для глубины и масштабирования.

Хорошей особенностью для хостов Windows является возможность писать плиточный набор в zip-файл, а не в файловую систему. Windows довольно медленна при создании файлов - с большой пирамидой и небольшими фрагментами вы можете потратить почти 75% времени процессора только в создании файла. Вместо этого напишите в zip-файл, и вы увидите, возможно, 3-кратное ускорение:

vips dzsave huge.tif xxx.zip --layout google

Плюс, конечно, zip проще загружать на сервер.

В руководстве libvips есть глава, представляющая dzsave и показывающая все параметры.

JavaScript, d3.js, листовки, dc.leaflet.js,
Похожие вопросы