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