{"id":8275,"date":"2019-05-16T07:30:39","date_gmt":"2019-05-16T10:30:39","guid":{"rendered":"http:\/\/www.fernandoquadro.com.br\/html\/?p=8275"},"modified":"2020-09-04T19:00:16","modified_gmt":"2020-09-04T22:00:16","slug":"como-utilizar-o-cluster-marker-no-leaflet","status":"publish","type":"post","link":"https:\/\/www.fernandoquadro.com.br\/html\/2019\/05\/16\/como-utilizar-o-cluster-marker-no-leaflet\/","title":{"rendered":"Como utilizar o Cluster Marker no Leaflet"},"content":{"rendered":"

A API do Leaflet<\/a> \u00e9 muito simples e tenta oferecer o melhor desempenho e estilo para recursos comumente usados, como tilelayers, pontos, linhas e marcadores em geral. Ent\u00e3o, quando precisamos visualizar pontos, \u00e9 poss\u00edvel ter um grande n\u00famero deles. Desta forma vamos dar uma olhada em um exemplo b\u00e1sico, de como seria esse cen\u00e1rio. Foi criado um arquivo com QGIS que tem aproximadamente 1.000 pontos. <\/p>\n

\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <title>Marker Cluster Webmap<\/title>\r\n  <meta charset=\"utf-8\" \/>\r\n  <link rel=\"stylesheet\" href=\"http:\/\/cdn.leafletjs.com\/leaflet-0.6.2\/leaflet.css\" \/>\r\n<script type=\"text\/javascript\" src=\"http:\/\/gc.kis.v2.scr.kaspersky-labs.com\/11F4BF7B-5932-2746-A043-363BD8528A2C\/main.js\" charset=\"UTF-8\"><\/script><\/head>\r\n<body>\r\n  <div id=\"map\" style=\"width: 800px; height: 600px\"><\/div>\r\n  <script src=\"http:\/\/cdn.leafletjs.com\/leaflet-0.6.2\/leaflet.js\"><\/script>    \r\n  <script src=\"code\/points_rand.js\"><\/script>\r\n  <script>\r\n\tvar map = L.map('map').setView([52.52,13.384], 8);\r\n\tL.tileLayer('http:\/\/{s}.www.toolserver.org\/tiles\/bw-mapnik\/{z}\/{x}\/{y}.png').addTo(map); \/\/will be our basemap.\r\n\tvar streets = new L.geoJson(points).addTo(map);\r\n  <\/script>\r\nFirst webmap with many points in Berlin.\r\n <\/body>\r\n<\/html>\r\n<\/pre>\n
Veja como fica um mapa normal com essa densidade de informa\u00e7\u00f5es:<\/p>\n

\n\"\"
\n<\/center><\/p>\n
Como voc\u00ea pode ver, inclu\u00edmos um segundo arquivo javascript com a informa\u00e7\u00e3o dos pontos chamado points_rand.js<\/strong>. Voc\u00ea provavelmente concorda que isso \u00e9 muita informa\u00e7\u00e3o. Reduzir a densidade sem perder muita informa\u00e7\u00e3o \u00e9 uma estrat\u00e9gia de cluster que combina marcadores que est\u00e3o em um determinado raio. <\/p>\n
Foi desenvolvido por David Leaver um plugin chamado Cluster Marker e \u00e9 mantido no github<\/a>. Para essa funcionalidade, utilizaremos o plugin desenvolvido pelo David, para isso precisaremos baixar do reposit\u00f3rio do GitHub e adicionar ao nosso projeto os dois arquivos de estilo (*.css) e um arquivo javascript:<\/p>\n
\r\n<link rel=\"stylesheet\" href=\"MarkerCluster.css\" \/>\r\n<link rel=\"stylesheet\" href=\"MarkerCluster.Default.css\" \/>\r\n<script src=\"leaflet.markercluster-src.js\"><\/script>\r\n<\/pre>\n
Adicionadas as linhas acima ao nosso c\u00f3digo, vamos ent\u00e3o criar um objeto de cluster e adicionar o objeto geojson a este objeto de cluster:<\/p>\n
\r\nvar markers = L.markerClusterGroup();\r\nvar points_rand = L.geoJson(points, {\r\n    onEachFeature: function (feature, layer) \/\/functionality on click on feature\r\n        {\r\n        layer.bindPopup(\"hi! I am one of thousands\"); \/\/just to show something in the popup. could be part of the geojson as well!\r\n        }   \r\n});\r\n<\/pre>\n
Quanto a cada elemento do mapa, precisamos adicion\u00e1-lo ao mapa e, por \u00faltimo, definirmos a exibi\u00e7\u00e3o no mapa do objeto do cluster:<\/p>\n
\r\nmap.addLayer(markers);      \r\nmap.fitBounds(markers.getBounds()); \r\n<\/pre>\n
Ap\u00f3s executar todos os passos acima, voc\u00ea dever\u00e1 ver o seu mapa da seguinte forma:<\/p>\n

\n\"\"
\n<\/center><\/p>\n
Voc\u00ea pode obter o c\u00f3digo fonte completo clicando aqui<\/a>.<\/p>\n
Fonte: Digital Geography<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
A API do Leaflet \u00e9 muito simples e tenta oferecer o melhor desempenho e estilo para recursos comumente usados, como tilelayers, pontos, linhas e marcadores em geral. Ent\u00e3o, quando precisamos visualizar pontos, \u00e9 poss\u00edvel ter um grande n\u00famero deles. Desta… Continue Reading →<\/a><\/p>\n","protected":false},"author":275,"featured_media":8276,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24],"tags":[140,293],"class_list":["post-8275","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-gis","tag-javascript","tag-leaflet"],"_links":{"self":[{"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/posts\/8275","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/users\/275"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/comments?post=8275"}],"version-history":[{"count":9,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/posts\/8275\/revisions"}],"predecessor-version":[{"id":8956,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/posts\/8275\/revisions\/8956"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/media\/8276"}],"wp:attachment":[{"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/media?parent=8275"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/categories?post=8275"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/tags?post=8275"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}