Neste post vamos “trocar de marcha” e instalar o Leaflet localmente, depois adicionar uma camada de um arquivo GeoPackage.
1. Instalando o Leaflet
Até agora, estamos usando uma versão hospedada no servidor do Leaflet. Em outras palavras, cada vez que carregamos o mapa, é feita uma solicitação para buscar o CSS e o JavaScript do Leaflet.
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/> <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js" integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg==" crossorigin=""></script>
Existem algumas maneiras de instalar o Leaflet : baixe-o do site ou instale-o npm. Em ambos os casos, você precisará mover os arquivos leaflet.js, leaflet.css e o diretório de images para o local apropriado para o seu site.
Uma vez instalado, o arquivo HTML precisa ser alterado para refletir a localização dos arquivos:
<link rel="stylesheet" href="/stylesheets/leaflet.css" /> <script src="/js/leaflet.js"></script>
2. Usando o Plugin
Para acessar as camadas do GeoPackage, precisamos usar o plugin leaflet-geopackage. Podemos usá-lo sem instalar como fizemos anteriormente com o Leaflet:
<script src="https://unpkg.com/@ngageoint/leaflet-geopackage@2.0.5/dist/leaflet-geopackage.min.js"></script>
3. Adicionando a camada GeoPackage
O código para adicionar e estilizar a camada é:
var placer = L.geoPackageFeatureLayer([], {
geoPackageUrl: 'code/points.gpkg',
layerName: 'points',
pointToLayer: function(feature, latlng){
return L.circleMarker(latlng, {radius: 5,
stroke: false,
fillColor: '#800000',
fillOpacity: 0.6});
},
onEachFeature: function( feature, layer){
var name = feature.properties.name;
var lat = feature.properties.prim_lat_d;
var lon = feature.properties.prim_lon_1;
layer.bindPopup('Name: ' + name +
'<br/>Lat/Lon: ' + lat + ' , ' + lon);
layer.on('mouseover', function() {layer.openPopup();});
layer.on('mouseout', function() {layer.closePopup();});
}
});
A camada é criada especificando a URL (caminho) para o arquivo GeoPackage e fornecendo o nome da camada (points). O restante do código se parece muito com código visto no último post.
Na opção pointToLayer, estilizamos um pouco diferente, removendo o traço (contorno) do círculo e fornecendo uma cor vermelha escura com opacidade de 0,6.
Na opção onEachFeature é semelhante, com exceção dos nomes de campo usados para o pop-up.
A camada pointsé adicionada à lista de superposições, mas inicialmente não é visível. Quando ativado no controle de camada, o mapa se parece com isto:
4. O Código
O código completo pode ser baixado clicando aqui.
5. YouTube
Se você quiser, pode ver o processo detalhado acima no YouTube:
