Пользователь
0,0
рейтинг
28 апреля 2011 в 00:03

Пример хороплет-карты на основе Яндекс-карт


О том, что такое хороплет было кратко рассказано в статье Тематические карты.

В этой статье я решил дать небольшой практический пример реализации хороплет-карты на основе службы Яндекс.Карты. Можно сказать, это то, что можно сделать «за пять минут».

Пример имеет и некоторую познавательную ценность, т.к. представлены относительно свежие данные по проценту безработицы по регионам РФ.

Еще раз повторю, что такое хороплет. Хороплет — это карта, на которой для различных областей штриховкой, точками различной густоты или окраской различной степени насыщенности показывается интенсивность какого-либо показателя. Областями в этом случае обычно являются объекты административно-территориального деления.

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

Сейчас для Российской Федерации Яндекс возвращает список, состоящий из 81 региона, от Алтайского края до Ярославской области. Каждая запись о регионе включает его название и один или несколько полигонов, которые описывают границы.

В качестве полезных данных возьмем столбец «Уровень безработицы, в %» из таблицы «Экономическая активность населения в возрасте 15-72 лет (по данным выборочных обследований населения по проблемам занятости в среднем декабрь 2010г. — февраль 2011г.)» с сайта www.gks.ru. Выберем способ отображения показателя в виде окраски, переходящей от светлой с 0% до насыщенной красной в значении 10%. Все регионы которые имеют значение больше 10% будут отображаться одним стилем заливки.

Теперь у нас есть все части необходимого нам построения: картографическая основа, границы регионов, данные по регионам и шкала интенсивностей. Сводим их вместе и получаем примерно такой результат:



Демонстрация доступна по ссылке: http://static.streetjournal.org/choropleth.html, а JavaScript-код можно посмотреть по ссылке: http://static.streetjournal.org/choropleth.js.

При щелчке по региону будет выводиться комментарий.

Стоит обратить внимание, что в Internet Explorer при загрузке данных могут наблюдаться торможения, поэтому при его использовании следует немного подождать при открытии страницы. Google Chrome с используемым объемом данных работает хорошо.
@streetjournal
карма
10,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое

Комментарии (11)

  • +7
    Ингушетия и Чечня заслуживают отдельного цвета заливки
  • +1
    Кривые и не стыкующиеся границы — на стороне яндекса, как я понял.
    Очень хороший пример, спасибо
  • 0
    Спасибо, интересная тема.

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

    А всплывающие подсказки при наведении мышки — просто разметил картинку (map) и повесил обработчик на наведение мышки.

    Самая долгая часть работы была разметка границ регионов :)

    Зато теперь эту же карту можно быстро и удобно вставлять в pdf в некоторых отчетах, потому что она представляет из себя готовую завершенную картинку.
    • 0
      У вас анализ картинки или в редакторе на тайлы нарезали?
      • +2
        Cидел в редакторе размечал границы регионов и потом по каждому региону составлялся массив вида:
                    array(
                                        'name'=>'Тверская область',
                                        'fill_coords'=>array(  
                                                                array('x'=>109,'y'=>148)
                                                            ),
                                        'border_coords'=>array(
                                                                array('x'=>83,'y'=>145),
                                                                array('x'=>88,'y'=>142),                                                        
                                                                array('x'=>89,'y'=>135),
                                                                array('x'=>103,'y'=>141),
                                                                array('x'=>106,'y'=>140),
                                                                array('x'=>109,'y'=>143),
                                                                array('x'=>122,'y'=>153),
                                                                array('x'=>116,'y'=>158),
                                                                array('x'=>117,'y'=>163),
                                                                array('x'=>113,'y'=>166),
                                                                array('x'=>102,'y'=>161),
                                                                array('x'=>103,'y'=>157),
                                                                array('x'=>95,'y'=>156),
                                                                array('x'=>90,'y'=>151),
                                                                array('x'=>86,'y'=>151)
                                                                ),
                                        'region_ids'=>array('58')
                                        ),
        

        При этом заодно проверял целостность границ на шаблоне, чтобы при заливке не получалось что 2 региона разом зальются.

        fill_coords это точка на карте, в которую нужно лить цвет (imagefill), их может быть несколько, например, когда в регион входят острова.

        border_coords — координаты границы региона, из них составляется многоугольник для map (area shape=«poly»)

        region_ids — id регионов из базы данных (например москва и московская область в БД лежат как 2 разных региона, но на карте это одна область).

        Ушел где-то 1 полный рабочий день на это дело, но в целом результатом доволен.
  • +2
    Все-таки, лучше использовать слово «Картограмма» — оно устоялось и в российской географии, и в картографии.
  • +1
    И еще комментарий по сути — отличный скрипт. Осталось еще генератор сделать. Чтобы можно было закачивать .xls (.csv) и получать на выходе код для вставки.
  • +4
    О_О Республика Ингушетия (безработица 46.9%) Чем они там ваще занимаются?..
    • 0
      детей делают. высокая рождаемость, теперь почти не ограничивается детской смертностью, благодаря развитию здравоохранения. 57% сельского населения как-никак.
  • 0
    Как лучше сделать разбивку города по районам?
  • 0
    Отличная реализация!
    Расскажите об этом проекте в клубе API Яндекс.Карт, пожалуйста: clubs.ya.ru/mapsapi/

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