UTFGrid: растровые тайлы с атрибутикой

Эта страница является черновиком статьи.

Введение

Основное назначение любого картографического web-приложения - это предоставление клиенту пространственной информации, включающей геометрическую и атрибутивную составляющие. Поэтому, в любом случае, на начальном этапе каждый разработчик должен ответить на вопрос: "Какой формат передачи данных следует использовать в конкретном случае?" Как известно, все форматы передачи пространственной информации можно разделить на векторные и растровые. Использование векторных форматов (KML, GML, GeoJSON и т.д.) с одной стороны очень удобно: в клиентском приложении сразу становятся доступными и геометрическая, и атрибутивная составляющие, что обеспечивает простоту добавления приложению интерактивности. С другой же - область применения векторных форматов довольно ограничена и определяется главным образом объёмом передаваемых данных. Например, если векторный слой содержит несколько миллионов объектов, то во-первых, клиенту придется ждать пока эти данные будут загружены браузером, а во-вторых пока они будут отрисованы. При этом попытка изменения масштабного уровня вновь потребует перерисовки объектов, что также может занять продолжительное время. Естественно, что ни о каком комфорте при работе с таким приложением речи не идёт, что делает использование векторных форматов недопустимым. В этом случае более подходящим решением является использование растров. Однако как быть с интерактивностью? То есть пользователю нужна возможность получения атрибутивной информации об объекте, на который указывает указатель мыши. Конечно, можно реализовать некоторый серверный скрипт, которому будут передаваться текущие координаты, а в ответ возвращаться нужная информация (в случае WMS слоёв можно воспользоваться стандартной возможностью любого WMS-сервера - поддержкой запросов GetFeatureInfo). Однако в данной статье мы рассмотрим другой способ решения этой задачи, предложенный компанией MapBox, известный под именем UTFGrid.

UTFGrid представляет собой стандарт, описывающий эффективный с точки зрения объёма передаваемых данных, способ кодирования атрибутивной информации объектов, представленных на растре. Данный стандарт был специально разработан для использования в Web-браузерах и может использоваться, например, для вывода всплывающих подсказок при перемещении указателя мыши. В качестве контейнера UTFGrid использует формат JSON. Рассмотрим пример данных, закодированных при помощи UTFGrid. Предположим, у нас есть некоторый растровый тайл:

Пример исходного растра

тогда его представление при помощи UTFGrid будет выглядеть следующим образом:

{
    "data": {
        "0": {
            "name": "район Богородское"
        }, 
        "1": {
            "name": "район Внуково"
        }, 
        "2": {
            "name": "Алтуфьевский район"
        }, 
        "3": {
            "name": "район Силино"
        }, 
        "4": {
            "name": "район Дорогомилово"
        }, 
        "5": {
            "name": "район Зюзино"
        }, 
        "6": {
            "name": "район Аэропорт"
        }, 
        "7": {
            "name": "район Бирюлево Восточное"
        }, 
        "8": {
            "name": "район Вешняки"
        }, 
        "9": {
            "name": "район Лефортово"
        }
    }, 
    "grid": [
        "    !                                                           ", 
        " !!!!!!                                                         ", 
        " !!!!!!!!                                          #            ", 
        "  !!!!!!!!            !                                         ", 
        " !!!!!!!!!!           !!                                        ", 
        "  !!!!! !!!         !!!!!!                                      ", 
        " !!!!!!   !        !!!!!!                                       ", 
        " !!!!!                !                                         ", 
        "    !!!         !!!            $$$$                             ", 
        "                !!!!!!          $$                              ", 
        "                !!!!!!        $$$$                              ", 
        "                !!!!!!         $$$                              ", 
        "                   !!          $$                               ", 
        "                  !!           $$ $$                            ", 
        "                  !!          %$$$$$$$                          ", 
        "                  !!!        %%%%$$$$$$$$$$$                    ", 
        "                   !!!     %%%%%%%$$$$$$$$$$$$                  ", 
        "                   !!!!!%%%%%%%%%%$$$$$$$$$$$$$                 ", 
        "                      !!!%%%%%%%%%$$$$$$$$$$$###                ", 
        "                 !!! !!!!%%%%%%%%%$$$$$$$$$$$####               ", 
        "                !!!!!!!!!!%%%%%%%%$$$$$$$$$#$$#####             ", 
        "                !!!!!!!!!!%%%%%%%%&&$$$$$$$#########            ", 
        "                !!!!!!!!!!!%%%%%%%%&&&&&&&###########           ", 
        "                 !!!!!!!!!!%%%%%%%&&&&&&&&############          ", 
        "                 !  !!!!!!!!%%%%%%&&&&&&&&############# ###     ", 
        "                   '!!!!!!!!%%%%%%%&&&&&&#################      ", 
        "                    !!!!!!!!%%%%%%%&&&&&###############         ", 
        "                   !!!!!!!!!!%%%%%%&&&&&###############         ", 
        "                 ''!!!!!!!!!!%%%%%%&&&&&###############         ", 
        "                '' !!!!!!!!!!%%%%%%&&&&&&&&&###########         ", 
        "               '' ''''''''!!!!%&&&&&&&&&&&&&&##########         ", 
        "                  ''''''''!''!%&&&&&&&&&&&&(((#########         ", 
        "                  ''''''''!'''&&&&&&&&&&&&(((#######))#         ", 
        "                   '''''!!'''''&&&&&&&&&&&&(((#####)))# )))     ", 
        "                   '''''''''''&&&&&&&&&&&&&&((((##))))))))      ", 
        "                   '''''''''&&''&&&&&&&&&&&&(((((()))))))    )  ", 
        "                   '''''''''''''&&&&&&&&((((((((((()))))))))))) ", 
        "                   ''''''''''''''&&&(((((((((((())()))))))))))  ", 
        "                    '''''''''''''((((((((((((((()))))))))))     ", 
        "                     '''''''''''(((((((((((((((())))))))))    ) ", 
        "                      '''''''''(((((((((((((((())))))))))    )))", 
        "                      ''''''''***((((((((((((()))))))) ))   ))))", 
        "                     ''''''''''****((((((((((()))))))))         ", 
        "                 '''  ''''''''********((((((())))))))))         ", 
        "                ''''''  '''''********(++(+((())))))))))         ", 
        "                ''''''   ''**********(+++++()))))++)))          ", 
        "                ''''''   '*********(((+++++++++++++)))          ", 
        "                  ''''    *********(((+++++++++++++)            ", 
        "      '                    ********++++++++++++++++             ", 
        "     ''' ''''''             *******+++++++++++++++              ", 
        "    '''' '''''              *******++++++++++++++               ", 
        "      '  ''''''              ******+++++++++++++                ", 
        "        ''''                   ****++++++++++++                 ", 
        "                                ***++++++++++                   ", 
        "                               *****  ++++++                    ", 
        "                                 ****                           ", 
        "                                 ***                            ", 
        "                              *****                             ", 
        "                           ********                             ", 
        "                           ********                             ", 
        "                              *****                             ", 
        "                               *****                            ", 
        "                               ** **                            ", 
        "                                  ***                           "
    ], 
    "keys": [
        "", 
        "3", 
        "0", 
        "2", 
        "6", 
        "4", 
        "1", 
        "9", 
        "8", 
        "5", 
        "7"
    ]
}

Как оно работает

Когда пользователь осуществляет некоторые действия (перемещает указатель мыши или кликает по карте) над тайлом, то происходит загрузка UTFGrid-файла, соответствующего этому тайлу.

http://mapbox.com/demo/visiblemap/

Техническая сторона

вы

Недостатки

выв