Просматривайте свои данные в режиме реального времени с помощью стиля, управляемого данными.

В этом документе описывается, почему и как реализовать динамическую стилизацию Google Boundaries на основе данных с использованием API JavaScript Карт, что полезно для различных вариантов использования в разных отраслях и сегментах.

Количество такси в Нью-Йорке по почтовому индексу
Анимированное количество такси в Нью-Йорке по почтовым индексам (симуляция, покадровая съемка):
Taxi counts in NYC by Postal Code (time-lapse) Map legend

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

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

Вот несколько примеров вариантов использования, которые могут быть применимы к карте, отображающей динамические обновления данных в стиле, управляемом данными:

  • Совместное пользование поездками: обновления в режиме реального времени могут использоваться для выявления зон с высоким спросом. В этом случае некоторые поставщики услуг могут устанавливать резкие скачки цен.
  • Транспорт: обновления в режиме реального времени можно использовать для выявления районов с заторами, что поможет определить наилучшие альтернативные маршруты.
  • Выборы: В ночь выборов данные опросов в режиме реального времени можно использовать для визуализации результатов по мере их поступления.
  • Безопасность работников: обновления в режиме реального времени можно использовать для отслеживания событий по мере их развития, выявления зон повышенного риска и предоставления ситуационной осведомленности спасателям на местах.
  • Погода: обновления в режиме реального времени можно использовать для отслеживания перемещения штормов, выявления текущих опасностей, а также предоставления предупреждений и оповещений.
  • Окружающая среда: обновления в режиме реального времени можно использовать для отслеживания перемещения вулканического пепла и других загрязняющих веществ, выявления областей ухудшения состояния окружающей среды и мониторинга воздействия деятельности человека.

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

Архитектурный подход к решению

Теперь давайте рассмотрим создание карты с использованием стилизации Data-driven для визуализации динамических данных. Как было показано ранее, вариант использования — это количество такси Нью-Йорка, визуализированное по почтовому индексу. Это может быть полезно для пользователей, чтобы понять, насколько легко будет поймать такси.

Архитектура
Ниже представлена ​​схема архитектуры приложения данного подхода:
application architecture

Динамическое решение для стилизации на основе данных

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

Это решение позволяет визуализировать гипотетический набор данных о плотности такси в реальном времени вокруг Нью-Йорка по почтовому индексу. Хотя это могут быть не реальные данные, они имеют реальные приложения и дают вам представление о силе и возможностях визуализации динамических данных на карте с помощью стилизации на основе данных.

Шаг 1: Выберите данные для визуализации и прикрепите их к границе Place ID

Первый шаг — определить данные, которые вы хотите отобразить, и убедиться, что они могут быть сопоставлены с границами Google. Вы можете выполнить это сопоставление на стороне клиента, вызвав метод обратного вызова findPlaceFromQuery для каждого postalCode. Обратите внимание, что почтовые индексы в США имеют отдельные названия, но на других административных уровнях их нет. Вам нужно будет убедиться, что вы выбрали правильный идентификатор места для своего запроса в случаях, когда могут быть неоднозначные результаты.


const request = {
    query: postalCode,
    fields: ['place_id'],
};
 
function findPlaceId() {
   placesService.findPlaceFromQuery(request, function (results, status) {
      if (status === google.maps.places.PlacesServiceStatus.OK) {
         console.log(results[0]);
      }
   });
}

Если ваши данные содержат значения широты и долготы, вы также можете использовать API геокодирования с фильтрацией компонентов, чтобы преобразовать эти значения широты/долготы в значения Place ID для интересующего вас слоя объектов. В этом примере вы будете стилизовать слой объектов POSTAL_CODE.

Шаг 2: Подключитесь к данным в реальном времени

Существует множество способов подключения к источникам данных, и наилучшая реализация будет зависеть от ваших конкретных потребностей и технической инфраструктуры. В этом случае предположим, что ваши данные находятся в таблице BigQuery с двумя столбцами: «zip_code» и «taxi_count», и вы будете запрашивать их через Firebase Cloud Function .

async function queryNycTaxis() {
   // Queries the NYC Taxis dataset.

   // Create a client
   const bigqueryClient = new BigQuery();
  
   // The SQL query to run
   const sqlQuery = 'SELECT zip_code, taxi_count
      FROM \'YOUR_DATASET_ID.TABLE\' LIMIT 100';
      
   const options = {
      query: sqlQuery,
      // Location must match that of the dataset(s)
      // referenced in the query.
      location: 'US',
   };
  
   // Run the query
   const [rows] = await bigqueryClient.query(options);
  
   rows.forEach(row => {
      const postalCode = row['zip_code'];
      const taxiCount = row['taxi_count'];
   });
}

Далее вам нужно убедиться, что вы поддерживаете актуальность данных. Один из способов сделать это — вызвать указанный выше запрос с помощью веб-воркера и установить таймер для обновления данных с помощью функции setInterval . Вы можете установить интервал на соответствующее значение, например, обновлять карту каждые 15 секунд. Каждый раз, когда проходит интервал времени, веб-воркер будет запрашивать обновленные значения taxiCount для каждого postalCode.

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

Шаг 3: Оформите карту с помощью стилей на основе данных

Теперь, когда у вас есть динамические значения данных, необходимые для создания и применения визуального стиля к границам почтовых индексов в экземпляре JavaScript Карт в виде объекта JSON, пришло время придать ему некоторый стиль в виде картограммы .

В этом примере вы стилизуете карту на основе количества такси в каждом почтовом индексе, давая вашим пользователям ощущение плотности такси и доступности в их районе. Стиль будет меняться в зависимости от значений количества такси. К областям с наименьшим количеством такси будет применен фиолетовый стиль, а цветовой градиент будет проходить через красный, оранжевый и закончится на желтом такси NYC для областей с самой высокой плотностью. Для этой цветовой схемы вы примените эти цветовые значения к fillColor и strokeColor. Установка fillOpacity на 0,5 позволит вашим пользователям видеть базовую карту, а установка strokeOpacity на 1,0 позволит им различать границы многоугольников одного цвета:


const featureLayer = map.getFeatureLayer(
   google.maps.FeatureType.POSTAL_CODE
);
featureLayer.style = (featureStyleFunctionOptions) => {
   const placeFeature = featureStyleFunctionOptions.feature;
   // taxiCount per (postal_code) PlaceID 
   const taxiCount = zips[placeFeature.placeId];
   let fillColor;
   let strokeColor;
// Apply colors to features based on taxiCount values
if (taxiCount < 8) {
   fillColor = "#571845";  
   strokeColor = "#571845"; 
} else if (taxiCount < 13) {
   fillColor = "#900c3e";
   strokeColor = "#900c3e";
} else if (taxiCount < 21) {
   fillColor = "#c60039"; 
   strokeColor = "#c60039"; 
} else if (taxiCount < 34) {
   fillColor = "#fe5733";
   strokeColor = "#fe5733";
// keep else if or the whole map gets this style with else
} else if (taxiCount >= 34) { 
   fillColor = "#fec30f";
   strokeColor = "#fec30f";
}  
return {
   fillColor,
   strokeColor,
   fillOpacity: 0.5,
   strokeOpacity: 1.0,
};

Заключение

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

Следующие действия

Участники

Основной автор:

Джим Лефлар | Инженер по решениям платформы Google Maps