Um Heatmap (ou mapa de calor) \u00e9 uma representa\u00e7\u00e3o gr\u00e1fica de dados em que os valores individuais contidos em uma matriz s\u00e3o representados como cores. “Mapa de calor” \u00e9 um termo mais recente, por\u00e9m as matrizes de sombreamento existem h\u00e1 mais de um s\u00e9culo.<\/p>\n
Voc\u00ea pode criar um heatmap para apresentar suas informa\u00e7\u00f5es na internet com o Leaflet. O plugin Leaflet.heat \u00e9 uma forma simples e r\u00e1pida de voc\u00ea agrupar pontos em uma grade.<\/p>\n
1. Instala\u00e7\u00e3o<\/strong><\/p>\n Para incluir o plugin, basta usar a leaflet-heat.js<\/a> a partir da pasta dist:<\/p>\n 2. Uso do plugin<\/strong><\/p>\n Para usar o plugin voc\u00ea precisa instanciar uma classe do tipo L.heatLayer:<\/p>\n 3. Par\u00e2metros<\/strong><\/p>\n Quando voc\u00ea est\u00e1 criando seu heatmap, como demonstrado acima, voc\u00ea precisar utilizar a classe L.heatLayer, por\u00e9m ela possui algumas op\u00e7\u00f5es de configura\u00e7\u00f5es que voc\u00ea precisa ter conhecimento, e \u00e9 o que vamos mostrar agora.<\/p>\n minOpacity <\/strong>– Opacidade m\u00ednima de in\u00edcio do heatmap Cada ponto no array de entrada pode ser um array [50.5, 30.5, 0.5] ou um objeto Leaflet LatLng.<\/p>\n O terceiro argumento opcional em cada ponto LatLng (altitude) representa a intensidade do ponto. A menos que a op\u00e7\u00e3o max seja especificada, a intensidade deve variar entre 0.0 e 1.0.<\/p>\n 4. M\u00e9todos<\/strong><\/p>\n setOptions(op\u00e7\u00f5es)<\/strong> : Define novas op\u00e7\u00f5es do mapa de calor e redesenha-o. 5. O C\u00f3digo<\/strong><\/p>\n Fonte: GitHub<\/a><\/p>\n","protected":false},"excerpt":{"rendered":" Um Heatmap (ou mapa de calor) \u00e9 uma representa\u00e7\u00e3o gr\u00e1fica de dados em que os valores individuais contidos em uma matriz s\u00e3o representados como cores. “Mapa de calor” \u00e9 um termo mais recente, por\u00e9m as matrizes de sombreamento existem h\u00e1… Continue Reading →<\/a><\/p>\n","protected":false},"author":275,"featured_media":5268,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24],"tags":[339,140,293],"class_list":["post-8236","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-gis","tag-heatmap","tag-javascript","tag-leaflet"],"_links":{"self":[{"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/posts\/8236","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=8236"}],"version-history":[{"count":5,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/posts\/8236\/revisions"}],"predecessor-version":[{"id":8241,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/posts\/8236\/revisions\/8241"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/media\/5268"}],"wp:attachment":[{"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/media?parent=8236"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/categories?post=8236"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/tags?post=8236"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\r\n<script src=\"leaflet-heat.js\"><\/script>\r\n<\/pre>\n
\r\nvar heat = L.heatLayer([\r\n\t[50.5, 30.5, 0.2], \/\/ lat, lng, intensity\r\n\t[50.6, 30.4, 0.5],\r\n\t...\r\n], {radius: 25}).addTo(map);\r\n<\/pre>\n
\nmaxZoom <\/strong>– N\u00edvel de zoom em que os pontos atingem a intensidade m\u00e1xima (conforme a intensidade \u00e9 dimensionada com zoom)
\nmax <\/strong>– Intensidade m\u00e1xima do ponto (1.0 por padr\u00e3o)
\nradius <\/strong>– raio de cada “ponto” do mapa de calor (25 por padr\u00e3o)
\nblur <\/strong>– quantidade de desfoque (15 por padr\u00e3o)
\ngradiente <\/strong>– Configura\u00e7\u00e3o do gradiente, por exemplo {0.4: ‘blue’, 0.65: ‘lime’, 1: ‘red’}<\/p>\n
\naddLatLng(latlng)<\/strong> : Adiciona um novo ponto ao mapa de calor e o redesenha.
\nsetLatLngs(latlngs)<\/strong> : Redefine os dados do mapa de calor e os redesenha.
\nredraw()<\/strong> : Redesenha o mapa de calor.<\/p>\n\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <title>Leaflet.heat demo<\/title>\r\n <link rel=\"stylesheet\" href=\"http:\/\/cdn.leafletjs.com\/leaflet\/v0.7.7\/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><script src=\"http:\/\/cdn.leafletjs.com\/leaflet\/v0.7.7\/leaflet.js\"><\/script>\r\n <style>\r\n #map { width: 800px; height: 600px; }\r\n body { font: 16px\/1.4 \"Helvetica Neue\", Arial, sans-serif; }\r\n .ghbtns { position: relative; top: 4px; margin-left: 5px; }\r\n a { color: #0077ff; }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div id=\"map\"><\/div>\r\n\r\n<script src=\"js\/leaflet-heat.js\"><\/script>\r\n<script src=\"http:\/\/leaflet.github.io\/Leaflet.markercluster\/example\/realworld.10000.js\"><\/script>\r\n\r\n<script>\r\n\r\nvar map = L.map('map').setView([-37.87, 175.475], 12);\r\n\r\nvar tiles = L.tileLayer('http:\/\/{s}.tile.osm.org\/{z}\/{x}\/{y}.png', {\r\n attribution: '© <a href=\"http:\/\/osm.org\/copyright\">OpenStreetMap<\/a> contributors',\r\n}).addTo(map);\r\n\r\naddressPoints = addressPoints.map(function (p) { return [p[0], p[1]]; });\r\n\r\nvar heat = L.heatLayer(addressPoints).addTo(map);\r\n\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n