{"id":8188,"date":"2019-04-23T07:30:20","date_gmt":"2019-04-23T10:30:20","guid":{"rendered":"http:\/\/www.fernandoquadro.com.br\/html\/?p=8188"},"modified":"2019-04-17T11:16:01","modified_gmt":"2019-04-17T14:16:01","slug":"introducao-ao-leaflet-sobreposicao-de-imagens-parte-14","status":"publish","type":"post","link":"https:\/\/www.fernandoquadro.com.br\/html\/2019\/04\/23\/introducao-ao-leaflet-sobreposicao-de-imagens-parte-14\/","title":{"rendered":"Introdu\u00e7\u00e3o ao Leaflet \u2013 Sobreposi\u00e7\u00e3o de imagens"},"content":{"rendered":"<p>Hoje terminamos nossa s\u00e9rie com uma adi\u00e7\u00e3o um tanto trivial, embora interessante, ao nosso mapa.<\/p>\n<p>O Leaflet permite adicionar uma imagem que abranja uma regi\u00e3o espec\u00edfica no mapa.<\/p>\n<p>Aqui n\u00f3s adicionamos uma foto de um pequeno alce perdido no mapa. Neste caso, n\u00e3o serve a outro prop\u00f3sito sen\u00e3o mostrar que podemos faz\u00ea-lo.<\/p>\n<p>O c\u00f3digo JavaScript necess\u00e1rio \u00e9:<\/p>\n<pre>\r\nvar imageUrl = \"\/images\/calf_moose.png\"; \r\nbounds = thetrail.getBounds();\r\nimageBounds = [[62.5, bounds._southWest.lng], [bounds._northEast.lat, bounds._northEast.lng]];\r\nL.imageOverlay(imageUrl, imageBounds).addTo(map);\r\n<\/pre>\n<p>Pegamos os limites da camada da trilha e a usamos para definir os limites da imagem, modificando um pouco a latitude inferior esquerda para que a imagem n\u00e3o ficasse distorcida.<\/p>\n<p>Tamb\u00e9m mudamos o centro e o n\u00edvel de zoom do mapa para que o alce fique vis\u00edvel quando o mapa for carregado pela primeira vez.<\/p>\n<p>Isso nos d\u00e1:<\/p>\n<p><center><br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2019\/04\/leaflet_d14_i1.png\" alt=\"\" width=\"710\" height=\"712\" class=\"aligncenter size-full wp-image-8191\" srcset=\"https:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2019\/04\/leaflet_d14_i1.png 710w, https:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2019\/04\/leaflet_d14_i1-150x150.png 150w, https:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2019\/04\/leaflet_d14_i1-300x300.png 300w, https:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2019\/04\/leaflet_d14_i1-144x144.png 144w, https:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2019\/04\/leaflet_d14_i1-600x602.png 600w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/><br \/>\n<\/center><\/p>\n<p>Isso completa nossa excurs\u00e3o de 14 dias de <a href=\"http:\/\/leafletjs.com\" rel=\"noopener\" target=\"_blank\">Leaflet<\/a>. Estes posts foram traduzidos e adaptados dos originalmente escritos no blog <a href=\"http:\/\/www.spatialgalaxy.net\/\" rel=\"noopener\" target=\"_blank\">Spatial Galaxy<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hoje terminamos nossa s\u00e9rie com uma adi\u00e7\u00e3o um tanto trivial, embora interessante, ao nosso mapa. O Leaflet permite adicionar uma imagem que abranja uma regi\u00e3o espec\u00edfica no mapa. Aqui n\u00f3s adicionamos uma foto de um pequeno alce perdido no mapa&#8230;. <a class=\"more-link\" href=\"https:\/\/www.fernandoquadro.com.br\/html\/2019\/04\/23\/introducao-ao-leaflet-sobreposicao-de-imagens-parte-14\/\">Continue Reading &rarr;<\/a><\/p>\n","protected":false},"author":275,"featured_media":8190,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24],"tags":[140,293],"class_list":["post-8188","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\/8188","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=8188"}],"version-history":[{"count":3,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/posts\/8188\/revisions"}],"predecessor-version":[{"id":8193,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/posts\/8188\/revisions\/8193"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/media\/8190"}],"wp:attachment":[{"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/media?parent=8188"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/categories?post=8188"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/tags?post=8188"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}