Pokud potřebujete zobrazit velké množství geografických informací v přístupné formě, budete pravděpodobně používat mapu. Samozřejmě musíte poskytnout informace v takové formě, aby uživatelé mohli snadno a rychle vidět celkový obraz a, pokud to bude žádoucí, získat podrobnější informace. Překážkou mohou být stovky datových bodů shromážděných společně.
V tomto příspěvku budeme hovořit o tom, jak pomocí knihovny JavaScriptu seskupovat značky k předávání stejných informací v seskupené podobě, bez všech překryvů. Také si povíme trochu o tom, jak to funguje, abychom vám pomohli lépe pochopit, jak si můžete přizpůsobit seskupování značek ve vlastních projektech.
Proč obecně potřebujeme seskupovat značky?
Abychom to pochopili, pojďme se podívat na tuto mapu Nového Zélandu a Austrálie se skupinou roztroušených značek:
Přestože jsme ke každé značce přidali štítek, mnoho z nich je blízko u sebe. Máme méně než 25 míst, ale jsou příliš blízko u sebe, takže je nelze zobrazit na mapě bez překrývání.
Pokud vaše mapa vypadá nějak taktoo, brání zákazníkům pohodlně a správně vnímat informace, které se snažíte předložit. Řešením je shlukování značek. S jednoduchou knihovnou s otevřeným zdrojovým kódem a malou úpravou mapy můžete přidat seskupení značek, což výrazně zlepší zážitek pro vaše zákazníky.
Shlukování značek je užitečný nástroj pro vizuální konsolidaci značek, což klientům usnadňuje čtení mapy jako celku. Seskupuje značky poblíž mapy do klastru, který se zobrazuje jako jedna ikona.
Povolení seskupování značek na mapě
Seskupování značek můžete přidat pomocí několika dalších řetězců JavaScriptu. Tento příklad ukazuje, jak to provést na webových mapách, ale existuje podobný nástroj v rámci platformy Android Maps a Google Maps SDK. Chcete-li vytvořit klastr značek, nejprve se podívejme, jak vytvořit neomezené značky. Po přidání pravidelných značek do mapy může kód vypadat takto:
const pos1 = {lat: -33.727111, lng: 150.371124};
const marker1 = new google.maps.Marker({position: pos1, map: map});
const pos2 = {lat: -33.718234, lng: 150.363181};
const marker2 = new google.maps.Marker({position: pos2, map: map});
S desítkami nebo více značkami je nemožné vytvořit jednu po druhé, s vlastními proměnnými. Tyto dvě značky však stačí k shlukování v akci.
Chcete-li povolit seskupování značek, musíte v mapovém kódu provést dvě změny. Nejprve si stáhněte knihovnu clusterů značek. Pro produkční použití si knihovnu stáhněte z GitHubu a umístěte JavaScript na svůj vlastní server. Pro účely tohoto dema si jej stáhneme z webu dokumentace Mapy Google:
<script src=”https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js”>
Dále stáhněte mapu a značky do klastrové knihovny přidáním těchto řádků do proměnných markerů:
// create an array of all your markers
const markers = [marker1, marker2];
// Path for cluster icons to be appended (1.png, 2.png, etc.)
const imagePath = “https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m”;
// Enable marker clustering for this map and these markers
const markerClusterer = new MarkerClusterer(map, markers, {imagePath: imagePath});
Pro použití ve výrobě budete muset znovu umístit obrazy clusterů na své servery. Tento příklad načte m1.png, protože potřebuje pouze minimální velikost klastru.
Vytvořením instance MarkerClusterer předáte proměnnou mapy, pole značek a cestu obrázku. Po přijetí informací knihovna zobrazí ikonu clusteru s počtem bodů v clusteru:
Když kliknete na ikonu hranice clusteru, mapa se změní na úroveň, kde jsou viditelné obě značky:
Když oddálíte o několik úrovní, ikona clusteru se vrátí místo dvou značek. mapa bude na úrovni, když se budou protínat.
V této příručce klastr značek je možné rozšířit informace a příklady o další tečky.
Jak seskupování značek pracuje?
Knihovna seskupování značek je součástí nástroje pro open source mapy na GitHubu. Můžete přistupovat ke všem kódům a dokonce podle potřeby provádět vlastní změny. Pojďme se podívat na to, jak algoritmus funguje obecně.
Algoritmus nejprve rozdělí mapu do mřížky, přičemž každá část mřížky je nastavena na 60×60 pixelů. Použitím příkladu překrývajících se značek výše, to lze vizualizovat následujícím způsobem:
Ve skutečnosti nebude mřížka přesně stejná jako ta výše, protože je založena na samotných značkách. První značka se stane středem prvního sektoru. Následující značky v tomto sektoru budou přidány do klastru pro tento sektor a poté bude centrum klastru aktualizováno na základě průměru všech jeho značek. Pokud může být značka potenciálně součástí několika klastrů, bude přidána k nejbližšímu na základě vzdálenosti mezi souřadnicemi značky.
Výchozí nastavení algoritmu bude zahrnovat většinu případů použití, ale protože je kód zcela otevřený, můžete provést všechny potřebné změny.
Přizpůsobení klastrů
Existuje mnoho způsobů, jak přizpůsobit vzhled a dojem vašich klastrů. Mnoho z nich nebude vyžadovat ani úpravu základní knihovny. Místo toho existuje několik možností, které můžete nastavit při vytváření klastrů.
Nejjednodušší způsob, jak si vytvořit klastrovou mapu pro sebe, je použít vlastní ikony. V jednoduchém příkladu shlukování jsme předali parametr imagePath. Klastrová knihovna přidá na konec cesty číslo (1-5) s další příponou souboru (výchozí .png) Pomocí parametru imageExtension můžete použít jiný typ souboru. Mějte na paměti, že průhledné ikony vypadají na mapě nejlépe.
Ve výchozím nastavení jsou k vytvoření klastru zapotřebí pouze dvě značky. Toto nastavení můžete změnit pomocí možnosti minimalClusterSize. Zvýšení tohoto počtu může způsobit překryvy, ale můžete také nastavit práh překryvu
Zde jsou některé další možnosti pro práci s knihovnou:
- gridSize: počet pixelů vclusteru
- mřížcezoomOnClick: nebo zvětšení na clusteru, když
- je stisknuto maxZoom: maximalizujte před zobrazením vždy společné značky
- stylů: Pole objektů pro každý typ klastru, který zahrnuje textColor, textSize a další funkce klastru
Například můžete všechny výše uvedené možnosti použít společně následujícím způsobem:
// Options to pass along to the marker clusterer
const clusterOptions = {
imagePath: “https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m”,
gridSize: 30,
zoomOnClick: false,
maxZoom: 10,
};
// Add a marker clusterer to manage the markers.
const markerClusterer = new MarkerClusterer(map, markers, clusterOptions);
// Change styles after cluster is created
const styles = markerClusterer.getStyles();
for (let i=0; i<styles.length; i++) {
styles[i].textColor = “red”;
styles[i].textSize = 18;
}
Pokud by výše uvedené možnosti byly použity na příkladu Austrálie a Nového Zélandu, vypadala by vaše mapa takto:
Jak jste si možná všimli, existují 2 rozdíly: větší shluky (kvůli menší velikosti mřížky), čísla jsou červená a mírně větší.
Kliknutím na klastr se měřítko nezmění, ale místo toho můžete přiblížit ručně. Jednotlivé značky se budou objevovat rychleji než dříve, a to díky velikosti mřížky, která poskytuje menší šanci na překrytí značek. Jakmile dosáhnete úrovně 10 (mapa začíná na úrovni 3), zobrazí se všechny značky bez ohledu na to, jak blízko jsou.
Nyní jste se přesunuli z původní mapy na elegantně seskupenou mapu. Pomocí těchto nových znalostí můžete svým uživatelům poskytnout lepší uživatelský zážitek v mapách s mnoha značkami. Čtením kódu můžete najít ještě více způsobů, jak přizpůsobit knihovnu shluků značek.
Obraťte se prosím na náš tým pro partnery Map Google a požádejte o radu nebo technické znalosti ohledně implementace těchto a dalších funkcí. Cloudfresh navíc poskytuje podnikům možnost platit bankovním převodem tím, že připraví všechny potřebné účetní a právní dokumenty.
Objednejte konzultaci