В этом документе описывается, почему и как реализовать динамические стили на основе данных для границ Google с помощью Maps JavaScript API. Это может быть полезно в различных отраслях и сегментах.
Анимированное количество такси в Нью-Йорке по границам почтовых индексов (симуляция, ускоренная съемка):
Стили на основе данных – это возможность платформы Google Карт, которая позволяет использовать многоугольники административных границ Google, применять к ним стили для показа на картах и объединять их с собственными данными, чтобы создавать информативные специальные карты, которые можно использовать для визуального анализа и лучшего понимания данных. В этом документе мы рассмотрим несколько примеров использования, которые объясняют, почему и как можно визуализировать данные на карте почти в реальном времени с помощью стилей на основе данных, интегрируя динамические фиды данных.
Стили на основе данных позволяют создавать карты, на которых показано географическое распределение данных, динамически настраивать стиль многоугольников и взаимодействовать с данными с помощью событий клика. Эти функции можно использовать для создания информативных и привлекательных карт для различных отраслей и сценариев использования.
Вот несколько примеров использования динамических данных на карте со стилями на основе данных:
- Совместные поездки. Обновления в реальном времени помогают выявлять районы с высоким спросом, где некоторые поставщики могут повышать цены.
- Транспорт. Обновления в реальном времени помогают выявлять заторы и определять лучшие альтернативные маршруты.
- Выборы. В ночь выборов данные опросов в реальном времени можно использовать для визуализации результатов по мере их поступления.
- Безопасность работников. Обновления в реальном времени можно использовать для отслеживания событий по мере их развития, выявления областей повышенного риска и предоставления ситуационной осведомленности сотрудникам на местах.
- Погода. Обновления в реальном времени позволяют отслеживать движение штормов, выявлять текущие опасности и предоставлять предупреждения и оповещения.
- Окружающая среда. Обновления в реальном времени можно использовать для отслеживания движения вулканического пепла и других загрязняющих веществ, выявления областей ухудшения состояния окружающей среды и мониторинга воздействия деятельности человека.
Во всех этих ситуациях клиенты могут получить дополнительную ценность, объединив свои фиды данных в реальном времени с границами Google, чтобы быстро и легко визуализировать свои данные на карте, что дает им возможность почти мгновенно получать информацию для принятия более обоснованных решений.
Архитектурный подход к решению
Теперь давайте рассмотрим, как создать карту со стилями на основе данных, чтобы визуализировать динамические данные. Как показано ранее, в качестве примера использования приводится количество такси Нью-Йорка, визуализированное по почтовому индексу. Это поможет пользователям понять, насколько легко будет вызвать такси.
Ниже представлена схема архитектуры приложения.
Решение для динамических стилей на основе данных
Теперь давайте рассмотрим шаги, необходимые для реализации динамической фоновой картограммы со стилями на основе данных для вашего набора данных.
Это решение позволяет визуализировать гипотетический набор данных о плотности такси в Нью-Йорке в реальном времени по почтовому индексу. Хотя это не реальные данные, они имеют реальное применение и дают вам представление о возможностях визуализации динамических данных на карте с помощью стилей на основе данных.
Шаг 1. Выберите данные для визуализации и свяжите их с идентификатором места границы
Первый шаг – определить, какие данные вы хотите показать, и убедиться, что они соответствуют границам 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]);
}
});
}
Если у вас есть значения широты и долготы, вы можете использовать Geocoding API с фильтрацией компонентов, чтобы преобразовать эти значения в идентификаторы мест для слоя объектов, который вы хотите стилизовать. В этом примере вы будете настраивать стиль слоя объектов 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. Настройте стили на основе данных
Теперь, когда у вас есть динамические значения данных, необходимые для создания и применения визуального стиля к границам почтовых индексов в экземпляре Maps JavaScript в виде объекта 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.
- Вы можете сделать визуализацию ещё более наглядной, добавив события кликов для стилей на основе данных.
- Попробуйте добавить на карту расширенные маркеры.
Авторы
Основной автор:
Джим Лефлар (Jim Leflar) | инженер по решениям платформы Google Карт