{"id":8052,"date":"2019-04-01T07:30:37","date_gmt":"2019-04-01T10:30:37","guid":{"rendered":"http:\/\/www.fernandoquadro.com.br\/html\/?p=8052"},"modified":"2020-08-04T18:56:18","modified_gmt":"2020-08-04T21:56:18","slug":"introducao-ao-leaflet-geopackage-parte-6","status":"publish","type":"post","link":"https:\/\/www.fernandoquadro.com.br\/html\/2019\/04\/01\/introducao-ao-leaflet-geopackage-parte-6\/","title":{"rendered":"Introdu\u00e7\u00e3o ao Leaflet \u2013 Geopackage"},"content":{"rendered":"

Neste post vamos “trocar de marcha” e instalar o Leaflet localmente, depois adicionar uma camada de um arquivo GeoPackage.<\/p>\n

1. Instalando o Leaflet<\/strong><\/p>\n

At\u00e9 agora, estamos usando uma vers\u00e3o hospedada no servidor do Leaflet. Em outras palavras, cada vez que carregamos o mapa, \u00e9 feita uma solicita\u00e7\u00e3o para buscar o CSS e o JavaScript do Leaflet.<\/p>\n

\r\n<link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.4.0\/dist\/leaflet.css\"\r\n  integrity=\"sha512-puBpdR0798OZvTTbP4A8Ix\/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb\/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==\"\r\n  crossorigin=\"\"\/>\r\n  \r\n<script src=\"https:\/\/unpkg.com\/leaflet@1.4.0\/dist\/leaflet.js\"\r\n  integrity=\"sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S\/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg==\"\r\n  crossorigin=\"\"><\/script>\r\n<\/pre>\n
Existem algumas maneiras de instalar o Leaflet : baixe-o do site ou instale-o npm. Em ambos os casos, voc\u00ea precisar\u00e1 mover os arquivos leaflet.js, leaflet.css e o diret\u00f3rio de images para o local apropriado para o seu site.<\/p>\n
Uma vez instalado, o arquivo HTML precisa ser alterado para refletir a localiza\u00e7\u00e3o dos arquivos:<\/p>\n
\r\n<link rel=\"stylesheet\" href=\"\/stylesheets\/leaflet.css\" \/>  \r\n<script src=\"\/js\/leaflet.js\"><\/script>\r\n<\/pre>\n
2. Usando o Plugin<\/strong><\/p>\n
Para acessar as camadas do GeoPackage, precisamos usar o plugin leaflet-geopackage<\/em>. Podemos us\u00e1-lo sem instalar como fizemos anteriormente com o Leaflet:<\/p>\n
\r\n<script src=\"https:\/\/unpkg.com\/@ngageoint\/leaflet-geopackage@2.0.5\/dist\/leaflet-geopackage.min.js\"><\/script>\r\n<\/pre>\n
3. Adicionando a camada GeoPackage<\/strong><\/p>\n
O c\u00f3digo para adicionar e estilizar a camada \u00e9:<\/p>\n
\r\n\tvar placer = L.geoPackageFeatureLayer([], {\r\n\t\t  geoPackageUrl: 'code\/points.gpkg',\r\n\t\t  layerName: 'points',\r\n\t\t  pointToLayer: function(feature, latlng){\r\n\t\t\t  return L.circleMarker(latlng, {radius: 5,\r\n\t\t\t\t\t\t\t\t\t\t\tstroke: false,\r\n\t\t\t\t\t\t\t\t\t\t\tfillColor: '#800000',\r\n\t\t\t\t\t\t\t\t\t\t\tfillOpacity: 0.6});\r\n\t\t  },\r\n\t\t  onEachFeature: function( feature, layer){\r\n\t\t\t  var name = feature.properties.name;\t\t\t \r\n\t\t\t  var lat = feature.properties.prim_lat_d;\r\n\t\t\t  var lon = feature.properties.prim_lon_1;\r\n\r\n\t\t\t  layer.bindPopup('Name: ' + name +\t\t\t\t\t\t\t  \r\n\t\t\t\t\t\t\t  '<br\/>Lat\/Lon: ' + lat + ' , ' + lon);\r\n\t\t\t  layer.on('mouseover', function() {layer.openPopup();});\r\n\t\t\t  layer.on('mouseout', function() {layer.closePopup();});\r\n\t\t  }\r\n\t  });\r\n<\/pre>\n
A camada \u00e9 criada especificando a URL (caminho) para o arquivo GeoPackage e fornecendo o nome da camada (points). O restante do c\u00f3digo se parece muito com c\u00f3digo visto no \u00faltimo post.<\/p>\n
Na op\u00e7\u00e3o pointToLayer<\/em>, estilizamos um pouco diferente, removendo o tra\u00e7o (contorno) do c\u00edrculo e fornecendo uma cor vermelha escura com opacidade de 0,6.<\/p>\n
Na op\u00e7\u00e3o onEachFeature \u00e9 semelhante, com exce\u00e7\u00e3o dos nomes de campo usados \u200b\u200bpara o pop-up.<\/p>\n
A camada points\u00e9 adicionada \u00e0 lista de superposi\u00e7\u00f5es, mas inicialmente n\u00e3o \u00e9 vis\u00edvel. Quando ativado no controle de camada, o mapa se parece com isto:<\/p>\n

\n\"\"
\n<\/center><\/p>\n
4. O C\u00f3digo<\/strong><\/p>\n
O c\u00f3digo completo pode ser baixado clicando aqui<\/a>.<\/p>\n
5. YouTube<\/strong><\/p>\n
Se voc\u00ea quiser, pode ver o processo detalhado acima no YouTube:<\/p>\n

\n