Визуализация: Геокарта

Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

Обзор

Геокарта — это карта страны, континента или региона с цветами и значениями, присвоенными определенным регионам. Значения отображаются в виде цветовой шкалы, и вы можете указать дополнительный текст для областей. Карта отображается в браузере с помощью встроенного Flash-плеера. Обратите внимание, что карту нельзя прокручивать или перетаскивать, но ее можно настроить для разрешения масштабирования.

Примеры

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

Пример регионов

Стиль регионов заполняет целые регионы (обычно страны) цветами, соответствующими назначенным вами значениям. Укажите стиль регионов, назначив options['dataMode'] = 'regions' в своем коде.

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="regions_div" style="width: 900px; height: 500px;"></div> google.charts.load('current', { 'packages':['geomap'], // Note: you will need to get a mapsApiKey for your project. // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings 'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY' }); google.charts.setOnLoadCallback(drawMap); function drawMap() { var data = google.visualization.arrayToDataTable([ ['Country', 'Popularity'], ['Germany', 200], ['United States', 300], ['Brazil', 400], ['Canada', 500], ['France', 600], ['RU', 700] ]); var options = {}; options['dataMode'] = 'regions'; var container = document.getElementById('regions_div'); var geomap = new google.visualization.GeoMap(container); geomap.draw(data, options); }; <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="regions_div" style="width: 900px; height: 500px;"></div> google.charts.load('current', { 'packages':['geomap'], // Note: you will need to get a mapsApiKey for your project. // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings 'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY' }); google.charts.setOnLoadCallback(drawMap); function drawMap() { var data = google.visualization.arrayToDataTable([ ['Country', 'Popularity'], ['Germany', 200], ['United States', 300], ['Brazil', 400], ['Canada', 500], ['France', 600], ['RU', 700] ]); var options = {}; options['dataMode'] = 'regions'; var container = document.getElementById('regions_div'); var geomap = new google.visualization.GeoMap(container); geomap.draw(data, options); };
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {
        'packages':['geomap'],
        // Note: you will need to get a mapsApiKey for your project.
        // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
        'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
      });
      google.charts.setOnLoadCallback(drawMap);

      function drawMap() {
        var data = google.visualization.arrayToDataTable([
          ['Country', 'Popularity'],
          ['Germany', 200],
          ['United States', 300],
          ['Brazil', 400],
          ['Canada', 500],
          ['France', 600],
          ['RU', 700]
        ]);

        var options = {};
        options['dataMode'] = 'regions';

        var container = document.getElementById('regions_div');
        var geomap = new google.visualization.GeoMap(container);

        geomap.draw(data, options);
      };
    </script>
  </head>
  <body>
    <div id="regions_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Пример маркеров

Стиль «маркеры» отображает круг, размер и цвет которого соответствуют значению, над указанными вами областями.

<html>
<head>
  <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
  <script type='text/javascript'>
   google.charts.load('current', {'packages': ['geomap']});
   google.charts.setOnLoadCallback(drawMap);

    function drawMap() {
      var data = google.visualization.arrayToDataTable([
        ['City', 'Popularity'],
        ['New York', 200],
        ['Boston', 300],
        ['Miami', 400],
        ['Chicago', 500],
        ['Los Angeles', 600],
        ['Houston', 700]
      ]);

      var options = {};
      options['region'] = 'US';
      options['colors'] = [0xFF8747, 0xFFB581, 0xc06000]; //orange colors
      options['dataMode'] = 'markers';

      var container = document.getElementById('map_canvas');
      var geomap = new google.visualization.GeoMap(container);
      geomap.draw(data, options);
    };

  </script>
</head>

<body>
    <div id='map_canvas'></div>
</body>

</html>

Загрузка

Имя пакета google.charts.load"geomap"

  google.charts.load('current', {'packages': ['geomap']});

Имя класса визуализации геокарты — google.visualization.GeoMap

  var visualization = new google.visualization.GeoMap(container);

Формат данных

Поддерживаются два формата адресов, каждый из которых поддерживает разное количество столбцов и разные типы данных для каждого столбца. Все адреса в таблице должны использовать один или другой; нельзя смешивать типы.

  • Формат 1: широта/долгота местоположения. Этот формат работает только в том случае, если для параметра dataMode установлено значение «маркеры». Если используется этот формат, вам не нужно включать Javascript Google Map. Местоположение вводится в двух столбцах плюс два необязательных столбца:
    1. [ Число, обязательно ] Широта. Положительные числа — север, отрицательные — юг.
    2. [ Число, обязательно ] Долгота. Положительные числа — это восток, отрицательные — запад.
    3. [ Число, необязательно ] Числовое значение, отображаемое, когда пользователь наводит курсор на эту область. Если используется столбец 4, этот столбец является обязательным.
    4. [ Строка, необязательно ] Дополнительный строковый текст, отображаемый, когда пользователь наводит курсор на эту область.
  • Формат 2: Адрес, название страны, названия регионов или коды городских агломераций США. Этот формат работает с параметром dataMode , установленным либо на «маркеры», либо на «регионы». Местоположение вводится в один столбец плюс два необязательных столбца:
    1. [ Строка, обязательная ] Расположение на карте. Принимаются следующие форматы:
      • Конкретный адрес (например, «1600 Pennsylvania Ave»).
      • Название страны в виде строки (например, «Англия»), код ISO-3166 в верхнем регистре или его эквивалент на английском языке (например, «GB» или «United Kingdom»).
      • Кодовое название региона ISO-3166-2 в верхнем регистре или его эквивалент на английском языке (например, «US-NJ» или «New Jersey»). Примечание . Регионы можно указать, только если для параметра dataMode установлено значение «регионы».
      • Код города . Это трехзначные коды метро, ​​​​используемые для обозначения различных регионов; Поддерживаются только коды США. Обратите внимание, что это не то же самое, что телефонные коды городов.
    2. [ Число, необязательно ] Числовое значение, отображаемое, когда пользователь наводит курсор на эту область. Если используется столбец 3, этот столбец является обязательным.
    3. [ Строка, необязательно ] Дополнительный строковый текст, отображаемый, когда пользователь наводит курсор на эту область.

Примечание. На карте может отображаться не более 400 записей; если ваш DataTable или DataView содержит более 400 строк, будут показаны только первые 400. Самыми быстрыми режимами являются dataMode='regions' с местоположениями, указанными в виде кодов ISO, и dataMode='markers' с элементами широты/долготы. Самый медленный режим — это dataMode='markers' со строковым адресом.

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

dataTable = new google.visualization.DataTable();
dataTable.addRows(1);
dataTable.addColumn('number', 'LATITUDE', 'Latitude');
dataTable.addColumn('number', 'LONGITUDE', 'Longitude');
dataTable.addColumn('number', 'VALUE', 'Value'); // Won't use this column, but still must define it.
dataTable.addColumn('string', 'HOVER', 'HoverText');

dataTable.setValue(0,0,47.00);
dataTable.setValue(0,1,-122.00);
dataTable.setValue(0,3,"Hello World!");

Параметры конфигурации

Имя Тип По умолчанию Описание
region нить 'Мир'

Область для отображения на карте. (Также будут отображаться окружающие области.) Может быть либо кодом страны (в верхнем регистре в формате ISO-3166 ), либо одной из следующих строк:

  • world - (Весь мир)
  • us_metro - (США, городские районы)
  • 005 - (Южная Америка)
  • 013 - (Центральная Америка)
  • 021 - (Северная Америка)
  • 002 - (Вся Африка)
  • 017 - (Центральная Африка)
  • 015 - (Северная Африка)
  • 018 - (Южная Африка)
  • 030 - (Восточная Азия)
  • 034 - (Южная Азия)
  • 035 - (Азиатско-Тихоокеанский регион)
  • 009 - (Океания)
  • 145 - (Ближний Восток)
  • 143 - (Средняя Азия)
  • 151 - (Северная Азия)
  • 154 - (Северная Европа)
  • 155 - (Западная Европа)
  • 039 - (Южная Европа)

Geomap не поддерживает прокрутку или перетаскивание, а только ограниченное масштабирование. Базовое уменьшение масштаба можно включить, установив свойство showZoomOut .

dataMode нить 'регионы'

Как отображать значения на карте. Поддерживаются два значения:

  • regions - окрашивает весь регион в соответствующий цвет. Эту опцию нельзя использовать с адресами широты/долготы. См. пример регионов .
  • markers — отображает точку над областью, цвет и размер которой указывают значение. См. Пример маркеров .
width нить «556 пикселей» Ширина визуализации. Если единицы измерения не указаны, единицей измерения по умолчанию являются пиксели.
height нить «347 пикселей» Высота визуализации. Если единицы измерения не указаны, единицей измерения по умолчанию являются пиксели.
colors Массив чисел RGB в формате 0xRRGGBB [0xE0FFD4, 0xA5EF63, 0x50AA00, 0x267114] Цветовой градиент для назначения значениям в визуализации. У вас должно быть как минимум два значения; градиент будет включать все ваши значения, а также вычисленные промежуточные значения, при этом самый светлый цвет будет наименьшим значением, а самый темный цвет — самым высоким.
showLegend логический истинный Если true, отобразить легенду для карты.
showZoomOut логический ЛОЖЬ Если true, отобразить кнопку с меткой, заданной свойством zoomOutLabel . Обратите внимание, что при нажатии на эту кнопку ничего не происходит , кроме создания события zoomOut . Чтобы обрабатывать масштабирование, перехватите это событие и измените параметр region . Вы можете указать showZoomOut , только если параметр region меньше, чем мировоззрение. Одним из способов включения поведения масштабирования может быть прослушивание события regionClick , изменение свойства region на соответствующий регион и перезагрузка карты.
zoomOutLabel нить 'Уменьшить' Метка для кнопки масштабирования.

Методы

Метод Тип возврата Описание
draw(data, options) Никто Рисует карту. Может вернуться до завершения рисования (см drawingDone() ).
getSelection() Массив элементов выбора Стандартная getSelection() . Выбранные элементы являются строками. Этот метод работает, только если для параметра dataMode установлено значение «regions». Вы можете выбрать только регион с присвоенным значением.
setSelection( selection ) Никто Стандартная setSelection() . Обрабатывает выбор как выбор строки и поддерживает выбор нескольких строк. Можно выбрать только регионы с присвоенными значениями.

События

Имя Описание Характеристики
error Запускается, когда возникает ошибка при попытке отобразить диаграмму. идентификатор, сообщение
select

Запускается, когда пользователь щелкает область с назначенным значением. Чтобы узнать, что было выбрано, вызовите getSelection() . Доступно, только если для параметра dataMode установлено значение «регионы».

Примечание . Из-за определенных ограничений событие select не возникает, если вы обращаетесь к странице в браузере как к файлу (например, «file://»), а не с сервера (например, «http://www» ).

Никто
regionClick

Вызывается при щелчке области. Работает как для регионов, так и для маркеров dataMode . Однако в режиме маркера это не будет выбрано для конкретной страны, назначенной в опции «регион» (если указана конкретная страна).

Примечание . Из-за определенных ограничений событие regionClick не возникает, если вы обращаетесь к странице в браузере как к файлу (например, «file://»), а не с сервера (например, «http://www» ).

Объект с одним свойством, region , представляющим собой строку в формате ISO-3166, описывающую выбранную область.
zoomOut

Вызывается при нажатии кнопки уменьшения масштаба. Чтобы обрабатывать масштабирование, перехватите это событие и измените параметр region .

Примечание . Из-за определенных ограничений событие zoomOut не генерируется, если вы обращаетесь к странице в браузере как к файлу (например, «file://»), а не с сервера (например, «http://www» ).

Никто
drawingDone Вызывается, когда геокарта закончила рисовать. Никто

Политика данных

Местоположение геокодировано Google Maps. Любые данные, не требующие геокодирования, не отправляются ни на какой сервер. Пожалуйста, ознакомьтесь с Условиями использования Google Maps для получения дополнительной информации об их политике в отношении данных.

Заметки

Из-за настроек безопасности Flash это (и все визуализации на основе Flash) может работать неправильно при доступе из местоположения файла в браузере (например, file:///c:/webhost/myhost/myviz.html), а не из URL-адрес веб-сервера (например, http://www.myhost.com/myviz.html). Обычно это проблема только тестирования. Вы можете решить эту проблему, как описано на веб-сайте Macromedia .