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

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

Счетчики такси в Нью-Йорке по почтовому индексу
Анимированные счетчики такси в Нью-Йорке по границе почтового индекса (смоделировано, замедленно):

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

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

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

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

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

Попробуйте сейчас: посетите консоль Google Cloud и включите Maps JavaScript API .

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

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

Архитектура
Вот схема архитектуры приложения этого подхода:

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

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

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

Шаг 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 геокодирования с фильтрацией компонентов, чтобы преобразовать эти значения широты и долготы в значения идентификатора места для векторного слоя, который вы хотите стилизовать. В этом примере вы будете стилизовать векторный слой POSTAL_CODE.

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

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

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 секунд. Каждый раз, когда проходит интервал времени, веб-воркер будет запрашивать обновленные значения TaxCount для каждого postalCode.

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

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

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

В этом примере вы будете стилизовать карту на основе количества такси в каждом почтовом индексе, давая пользователям ощущение плотности и доступности такси в их районе. Стиль будет меняться в зависимости от значений количества такси. К районам с наименьшим количеством такси будет применен фиолетовый стиль, а цветовой градиент будет перемещаться через красный, оранжевый и заканчиваться желтым цветом такси Нью-Йорка для районов с наибольшей плотностью движения. Для этой цветовой схемы вы примените эти цветовые значения к 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» .
• Сделайте свою визуализацию еще дальше с помощью событий кликов для стилизации на основе данных.
• Рассмотрите возможность добавления расширенных маркеров на вашу карту.

Авторы

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

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