Динамічна таблиця поверх Google Maps
.collapse">Зміст
Вам коли-небудь потрібно було відображати великі масиви даних із прив'язкою до карти? Мені на роботі знадобилося відображати замовлення згруповані за широтою та довготою. І не просто статичною таблицею, а динамічною з різною деталізацією для різного наближення карти.
Щоб не виникло плутанини, параметр zoom називатимемо наближенням карти, а scale – масштабом. Перший відноситься до Google Maps API, а другий до описуваної бібліотеки.
Завдання в цілому
Дані мають акумулятивну природу (у моєму випадку кожної області можна поставити у відповідність: кількість замовлень, клієнтів та середню суму). Тому дані можуть і повинні відображатись з різною деталізацією для різних наближень.
І потім потрібно передати парочку функції:
Але що саме писати усередині функцій. Спочатку розберемося, як працює GMapsTable.
Data для DataContainer
Значення ( value ) може бути число, рядок або будь-який об'єкт, якщо ви вкажете власну функцію форматування комірки таблиці. Масштаб (sale) це ціле число, що говорить, на скільки частин повинні ділитися одиниці широти і довготи. Параметр tocache вказує, чи дані для поточного масштабу повинні бути збережені і більше не запитуватись.
Тут дані покривають область від 55.0, 37.0 до 57.0, 38.0 і ділять кожну одиницю широти та довготи на 2 частини (виходить, одна клітина широти-довготи ділиться на 4 частини). Також тут зазначено, що для даного масштабу це повні дані, і вони мають бути збережені для подальшого використання.
Переклад наближення до масштабу
Наближення ( zoom ) це параметр Google Maps API, ціле число між 1 (карта світу) та 22 (вулиця).Запитувати та зберігати дані для кожної одиниці наближення незручно та недоцільно, тому GMapsTable переводить їх у масштаб (scale) — число, що вказує, на скільки частин потрібно ділити одиницю широти та довготи.
Збереження даних
Щоб відображення при зміні масштабу було миттєвим, GMapsTable зберігає набори даних для деяких масштабів. Наприклад, у мене була база даних з координатами майже з усієї України — близько 42 тисяч осередків для масштабу 10 (500 КБ, досить легко зберігається та обробляється у мене в десктопному браузері) і 17 мільйонів для масштабу 200 (кілька МБ, спричиняє значні підвисання) . Тому сервер оцінює кількість осередків всіх даних, і якщо їх небагато, відправляє дані з усієї БД, інакше лише для регіону, що запитує. Виходить такий алгоритм:
У реалізації DataLoader Ви можете сміливо ігнорувати аргументи, якщо немає потреби використовувати різну деталізацію для різних масштабів або якщо Ваші дані не покривають такий великий регіон. Просто передайте дані та їх межі за широтою та довготою та scale , на скільки розбиваєте одиниці широти-довготи. Але для повноти картини я пропоную таку поведінку функції dataLoader (або сервера, до якого вона звертається):
Список усіх параметрів
Ви можете вказати такі параметри для DataContainer:
1)scaler(zoom)— переводить наближення з GoogleMaps до масштабу для GMapsTable. Обидва цілі числа.
2)dataLoader(scale, borders)- викликається, коли потрібні нові дані. Повинен передати об'єкт даних уDataContainer.processData(data).
3)tableBeforeInit(map, table, data)- викликається перед тим, як таблиця починає заповнюватися осередками. Аргументmapце об'єкт Google Maps,table- HTML елемент створеної таблиці, аdata- наданий Вами об'єкт даних для поточного масштабу. Тут можна налаштувати таблицю, які-небудь змінні, використовуючи актуальні дані або поточні параметри карти.
4)cellFormatter(td, val)- викликається для заповнення комірки.tdце HTML element, комірка таблиці.valце дані з об'єкта даних. Тут можна легко налаштувати виведення кількох значень або заливання кольором відповідно до будь-яких параметрів.
5)boundsChangedListener(zoom)- викликається, коли змінюються межі Google Maps.
6)minZoomLevel,maxZoomLevel— змінні для мінімального та максимального наближення карти. Цілі числа між 1 (карта світу) та 22 (вулиця).
Для успішної роботи DataContainer потрібні лише перші дві функції.