Динамична таблица в горната част на Google Maps
.collapse">Съдържание
Случвало ли ви се е да показвате големи количества данни с препратка към карта? На работа имах нужда да покажа поръчки, групирани по географска ширина и дължина. И не просто статична таблица, а динамична, с различни детайли за различни приближения на картата.
За да избегнем объркване, ще наричаме параметъра за мащабиране приближение на картата и ще мащабираме мащаба. Първият се отнася за API на Google Maps, а вторият за описаната библиотека.
Задачата като цяло
Данните имат кумулативен характер (в моя случай всяка област може да бъде съпоставена: броят на поръчките, клиентите и средната сума). Следователно данните могат и трябва да се показват с различни детайли за различни приближения.
И тогава трябва да преминете няколко функции:
Но какво точно да пишем вътре във функциите. Първо, нека разберем как работи GMapsTable.
Данни за DataContainer
Стойността ( value ) може да бъде число, низ или произволен обект, ако зададете своя собствена функция за форматиране на клетки от таблица. Мащабът (продажба) е цяло число, което казва на колко части трябва да бъдат разделени единиците за географска ширина и дължина. Параметърът tocache указва дали данните за текущия мащаб трябва да бъдат запазени и да не се изискват отново.
Тук данните обхващат зоната от 55.0, 37.0 до 57.0, 38.0 и разделят всяка единица за ширина и дължина на 2 части (оказва се, че една клетка за ширина-дължина е разделена на 4 части). Той също така посочва, че за този мащаб това са пълни данни и трябва да бъдат запазени за бъдещи справки.
Преобразуване на увеличение в мащаб
Zoom е параметър на API на Google Maps, цяло число между 1 (карта на света) и 22 (улица).Неудобно и непрактично е да се изискват и съхраняват данни за всяка единица за приближение, така че GMapsTable ги превежда в мащаб ( scale ) - число, което показва на колко части трябва да бъде разделена единица за географска ширина и дължина.
Запазване на данни
За да гарантира, че дисплеят при мащабиране е мигновен, GMapsTable съхранява набори от данни за някои (или всички) мащаби. Например имах база данни с координати от почти цяла България - около 42 хиляди клетки за мащаб 10 (500 KB, доста лесно се съхраняват и обработват в десктоп браузъра ми) и 17 милиона за мащаб 200 (няколко MB, причинява значително забавяне). Следователно сървърът оценява броя на клетките на всички данни и ако има малко от тях, изпраща данни от цялата база данни, в противен случай само за заявения регион. Оказва се, че този алгоритъм:
Във вашата реализация на dataLoader можете спокойно да пренебрегнете аргументите, ако не е необходимо да използвате различна детайлност за различни мащаби или ако вашите данни не покриват толкова голям регион. Просто предайте данните и техните граници в географска ширина и дължина и мащабирайте на колко единици ширина-дължина разделяте. Но за пълнота предлагам това поведение на функцията 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 елемент, клетка от таблица.valса данните от вашия обект с данни. Тук можете лесно да персонализирате показването на множество стойности или да запълните с цвят в съответствие с всякакви параметри.
5)boundsChangedListener(zoom)- извиква се при промяна на границите на Google Maps.
6)minZoomLevel,maxZoomLevel— променливи за минимално и максимално приближение на картата. Цели числа между 1 (карта на света) и 22 (улица).
Само първите две функции са необходими, за да може DataContainer да работи успешно.