Вот мой опыт в том, как создавать слабые карты из таких источников, как PDF-файлы или изображения с высоким разрешением или не скользкие карты . В любом случае я хотел написать статью об этом, поэтому пусть этот ответ будет наброском еще не написанной статьи.
Чтобы дать вам пример, вот карта PDF-карт европейских внутренних водных путей с векторной графикой, и вот ее слабая карта .
В принципе, самым разумным способом является создание стандартного набора плиток и его лифлет. То есть для производства плиток размером 256x256 для каждого уровня масштабирования.
Вы не хотите, чтобы огромные изображения были слоями, и это было тяжело для браузера. Вы также не хотите изменять размер в браузере, это приведет к низкому качеству.
К счастью, создание изображений с помощью ImageMagick довольно легко . Вот как я это делаю.
Решите, сколько уровней масштабирования вы хотите
Сначала определите, сколько уровней масштабирования вы хотите. Это зависит от карты, по моему опыту вам нужно всего 5-7 уровней масштабирования. Например, возьмем 5 уровней масштабирования. Чем больше уровней вы производите, тем выше требования к оборудованию. Подход ниже, вероятно, не подходит для более 7-8 уровней масштабирования.
Рендеринг или изменение размера исходного изображения
Затем выполните рендеринг или изменение размера изображения для каждого уровня масштабирования. Вы должны создавать изображения с одним из размеров, равным:
256пиксель на уровне 0512пиксель на уровне 11024пиксель на уровне 22048пиксель на уровне 34096пиксель на уровне 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.pngtiles/1_0_0.pngtiles/1_0_1.pngtiles/1_1_0.pngtiles/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);Маркер останется в том же положении, даже если вы панорамируете или увеличиваете масштаб.
Вот один из примеров:
- https://github.com/highsource/unece-maps