{"id":8011,"date":"2019-02-28T09:25:27","date_gmt":"2019-02-28T12:25:27","guid":{"rendered":"http:\/\/www.fernandoquadro.com.br\/html\/?p=8011"},"modified":"2020-08-04T18:50:29","modified_gmt":"2020-08-04T21:50:29","slug":"introducao-ao-leaflet-trilhas-parte-3","status":"publish","type":"post","link":"https:\/\/www.fernandoquadro.com.br\/html\/2019\/02\/28\/introducao-ao-leaflet-trilhas-parte-3\/","title":{"rendered":"Introdu\u00e7\u00e3o ao Leaflet \u2013 Trilhas com GeoJSON"},"content":{"rendered":"

Para adicionar uma trilha ao nosso mapa, vamos convert\u00ea-lo de um shapefile para GeoJSON. H\u00e1 mais de uma maneira de fazer isso – voc\u00ea poderia usar ogr2ogr, mas optamos por usar o QGIS, pois ele n\u00e3o apenas o converteria, mas tamb\u00e9m transformaria o sistema de coordenadas ao mesmo tempo.<\/p>\n

1. Convertendo para GeoJSON<\/strong><\/p>\n

Com o shapefile carregado no QGIS, podemos clicar com o bot\u00e3o direito na camada e escolher a op\u00e7\u00e3o “Export -> Save Features As\u2026<\/em>”<\/p>\n

\"\"<\/center><\/p>\n

Escolhemos o sistema de coordenadas apropriado ( EPSG:4326 – WGS 84) para uso com o Leaflet e o QGIS faz a convers\u00e3o enquanto salva no GeoJSON. Isso torna nossa trilha pronta para uso no Leaflet.<\/p>\n

2. Adicionando o arquivo<\/strong><\/p>\n

O arquivo GeoJSON<\/a> precisa ser adicionado ao nosso arquivo HTML como um script, mas primeiro precisamos modific\u00e1-lo adicionando um nome de vari\u00e1vel:<\/p>\n

\r\nvar trail = {\r\n\"type\": \"FeatureCollection\",\r\n\"name\": \"rails\",\r\n\"crs\": { \"type\": \"name\", \"properties\": { \"name\": \"urn:ogc:def:crs:EPSG::3857\" } },\r\n\"features\": [\r\n...\r\n<\/pre>\n
Adicionando o var trail<\/em> ao in\u00edcio do arquivo nos permitir\u00e1 fazer refer\u00eancia a ele no Leaflet.<\/p>\n
Em seguida, adicionamos o script e agora podemos adicion\u00e1-lo ao mapa:<\/p>\n
\r\n  var trail = L.geoJSON(trail);\r\n  trail.addTo(map);\r\n<\/pre>\n
3. Estilizando a trilha<\/strong><\/p>\n
Podemos mudar a apar\u00eancia da trilha adicionando op\u00e7\u00f5es \u00e0 declara\u00e7\u00e3o L.geoJSON<\/em>:<\/p>\n
\r\n  var thetrail = L.geoJSON(trail, {\r\n      color: '#800000',\r\n      weight: 3,\r\n      dashArray: '12 8 12',\r\n  });\r\n<\/pre>\n
Isso transforma a trilha em vermelho escuro, aumentando sua largura para 3 pixels e criando uma linha tracejada.<\/p>\n
4. Adicionando r\u00f3tulo<\/strong><\/p>\n
Ao adicionar este r\u00f3tulo quando se passa o mouse sobre a trilha o mesmo \u00e9 apresentado na tela:<\/p>\n
\r\nthetrail.bindTooltip('Trilha de Brumadinho')\r\n<\/pre>\n
5. Resultado<\/strong><\/p>\n
Ap\u00f3s nossas mudan\u00e7as o resultado do nosso mapa agora \u00e9 esse:<\/p>\n

\n\"\"
\n<\/center><\/p>\n
6. C\u00f3digo<\/strong><\/p>\n
Ap\u00f3s as altera\u00e7\u00f5es realizadas acima, o nosso c\u00f3digo ficou da seguinte forma:<\/p>\n
\r\n<!DOCTYPE html>\r\n<head>\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  <script src=\"https:\/\/unpkg.com\/leaflet@1.4.0\/dist\/leaflet.js\"\r\n  integrity=\"sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S\/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg==\"\r\n  crossorigin=\"\"><\/script>\r\n  <script src=\"rails.geojson\"><\/script>\r\n<style>\r\n    #mapDIV{\r\n        height: 700px;\r\n        width: 700px;\r\n        border: solid 1px black;\r\n    }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n    <div id='mapDIV'><\/div>\r\n<script>\r\n    var map = L.map(document.getElementById('mapDIV'), {\r\n    center: [-20.1438, -44.1301],\r\n    zoom: 15\r\n    });\r\n    var basemap = L.tileLayer('http:\/\/{s}.tile.osm.org\/{z}\/{x}\/{y}.png', {\r\n        });\r\n\r\n    basemap.addTo(map);\r\n\t\r\n    var earthquakeMarker = L.marker([-20.1438, -44.1301],\r\n         {title: 'Janeiro 25, 2019 Desastre de Brumadinho'});\r\n\t\t \r\n    earthquakeMarker.bindPopup(\r\n         \"Janeiro 25, 2019<br> Desastre de Brumadinho\");\r\n\t\t \r\n    earthquakeMarker.addTo(map);\r\n \r\n    var thetrail = L.geoJSON(trail, {\r\n        color: '#800000',\r\n        weight: 3,\r\n        dashArray: '12 8 12',\r\n    });\r\n\t\r\n    thetrail.bindTooltip('Trilha de Brumadinho');\r\n    thetrail.addTo(map);\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Se voc\u00ea quiser, pode ver o processo detalhado acima no YouTube:<\/p>\n

\n