Просмотр исходного текста страницы Создание автономного картографического приложения на базе изображений без привязки

== Обработка исходного изображения ==

=== Постановка задачи ===

Исходное изображение в принципе можно подключить "как есть", в OpenLayers для этого есть класс [http://dev.openlayers.org/docs/files/OpenLayers/Layer/Image-js.html OpenLayers.Layer.Image], а в Leaflet - [http://leafletjs.com/reference.html#imageoverlay L.ImageOverlay], однако в общем случае это плохая идея, так как изображение может быть большим и пользователю придется очень долго ждать, пока оно загрузится, поэтому первое, что нужно сделать с изображением - это разбить его на тайлы. Поскольку мы хотим иметь возможность не только двигать наше изображение, но и изменять масштаб, то тайлы должны быть построены для нескольких масштабных уровней.

=== Рабочее изображения ===

Работать будем с [http://www.flickr.com/photos/idvsolutions/7439877658/sizes/o/in/photostream/ визуализацией землетрясений], произошедших с 1898 года. Подробнее об изображении [http://uxblog.idvsolutions.com/2012/06/earthquakes-since-1898.html тут]. Размер изображения - 3410 x 2058.

[[Файл:Non-geographical-imagery-03.jpg|500px|thumb|center|<center>Исходное изображение (не оригинал, размер уменьшен)</center>]]

=== Разбивка на тайлы ===

Переходим к написанию скрипта, который будет разбивать на тайлы наше изображение. Мы будем использовать инструменты стандартной библиотеки Python, а также одну стороннюю библиотеку - библиотеку для работы с изображениями - [https://pypi.python.org/pypi/PIL PIL], поэтому прежде чем продолжить работу, убедитесь, что у вас установлен PIL.

Используемая в дальнейшем схема разбивки на тайлы - как в OpenStreetMap (то есть нумерация строк и столбцов тайлов начинается с левого верхнего угла). Алгоритм разбивки изображения на тайлы достаточно прост, но имеет некоторую особенность. Представьте, что мы взяли наше изображение размера 3410 x 2058 и пытаемся разбить его на тайлы 256 x 256. Очевидно, что 3410 и 2058 не делятся без остатка на 256, а это означает, что тайлы последнего столбца и последней строки получатся не квадратными (82 x 256 и 256 x 10 соответственно). Поэтому, прежде чем переходить к нарезке тайлов, изображение должно быть приведено к такому виду, что его ширина и высота будут кратны размеру тайла. Размеры поправок вычисляются следующим образом (src_width, src_height - ширина и высота исходного изображения, tile_size - размер тайла, % - операция получения остатка от деления). В Python это записывается так:

<syntaxhighlight lang="python">
dw = tile_size - src_width % tile_size
dh = tile_size - src_height % tile_size
</syntaxhighlight>

Области расширения за счет поправок следует сделать прозрачными, в нашем коде за эту операцию будет отвечать функция ''adjustBounds''.

Одним из важных параметров процедуры разбивки на тайлы - это максимальный масштабный уровень. Рассчитывается он как логарифм по основанию 2 числа max(w,h), округленный до ближайшего большего целого, где w - ширина изображения, h - высота. В Python это записывается так:

<syntaxhighlight lang="python">
max_zoom = int(math.ceil(math.log((max(w, h) / tile_size), 2)))
</syntaxhighlight>

Если посчитать, то мы получим:

<syntaxhighlight lang="python">
max_zoom = int(math.ceil(math.log((max(3410, 2058) / 256), 2))) = 4
</syntaxhighlight>

В итоге алгоритм разбивки на тайлы сводится к циклу от самого детального масштабного уровня (в нашем случае от 4) до 0. В цикле выполняются следующие операции: на 4-м уровне берется исходное изображение, к нему применяется функция ''adjustBounds'', нарезаются тайлы и раскладываются по соответствующим каталогам, после чего размер исходного изображения (не того, к которому применена функция ''adjustBounds'') уменьшается в 2 раза и так далее. 

Полная версия скрипта:

<syntaxhighlight lang="python">
# -*- coding: utf-8 -*-
import sys
import os
import math
from PIL import Image

# source path
img_path = sys.argv[1]

# tile size
tile_size = 256

# tile directory
tile_path = 'tiles'


def adjustBounds(src_img):

    # get size of original image
    src_width, src_height = src_img.size

    # calculate size of target image (background)
    target_width = src_width + (tile_size - src_width % tile_size)
    target_height = src_height + (tile_size - src_height % tile_size)

    # create transparent background
    target_img = Image.new('RGBA', (target_width, target_height))

    # combine original image and background
    target_img.paste(src_img, (0, 0))

    return target_img


img = Image.open(img_path)
w, h = img.size[0], img.size[1]

# calculate max zoom level
max_zoom = int(math.ceil(math.log((max(w, h) / tile_size), 2)))

for z in range(max_zoom, -1, -1):

    adjusted_image = adjustBounds(img)

    numcolumns = adjusted_image.size[0] / tile_size
    numrows = adjusted_image.size[1] / tile_size

    for x in range(numcolumns):

        # create z/x/ directory
        path = os.path.join(tile_path, str(z), str(x))
        if not os.path.isdir(path):
            os.makedirs(path)

        for y in range(numrows):
            bounds = (x * tile_size, y * tile_size, (x + 1) * tile_size, (y + 1) * tile_size)
            tile = adjusted_image.crop(bounds)
            tile.save('%s/%s.png' % (path, y))

    w, h = img.size[0], img.size[1]
    img = img.resize((w / 2, h / 2), Image.ANTIALIAS)
</syntaxhighlight>

Поместим файл со скриптом (''tiling.py'') в ту же папку, где лежит исходное изображение (''earthquakes.jpg'') и запускаем обработку:

<syntaxhighlight lang="bash">
python tiling.py earthquakes.jpg 
</syntaxhighlight>

После выполнения данного скрипта в этой же папке будет создан каталог ''tiles'', в который будут помещены тайлы.