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