Para calcular a dist\u00e2ncia, precisamos incluir o Turf.js em nosso projeto. Em vez de instal\u00e1-lo localmente, basta adicionar essa linha ao cabe\u00e7alho do seu HTML:<\/p>\n
\r\n <script src='https:\/\/npmcdn.com\/@turf\/turf\/turf.min.js'><\/script>\r\n<\/pre>\nO Turf.js vem como um \u00fanico arquivo JavaScript e \u00e9 bem grande. Se voc\u00ea planeja us\u00e1-lo regularmente, considere fazer uma compila\u00e7\u00e3o personalizada que contenha apenas os recursos necess\u00e1rios. Voc\u00ea pode encontrar informa\u00e7\u00f5es sobre como fazer isso no site do Turf.js.<\/p>\n
2. Configurando o HTML<\/strong><\/p>\n
Precisamos adicionar dois dropdowns (selecionados): uma para o local \u201cde\u201d e outra para o local \u201cpara\u201d. Tamb\u00e9m criamos um bot\u00e3o “calcular” e um div para conter o resultado:<\/p>\n
\r\nCalculate distance from: \r\n <select id='fromBox'>\r\n <\/select>\r\nto: \r\n <select id='toBox'>\r\n <\/select>\r\n <input type=\"button\" id=\"calculate\" value=\"Calculate\">\r\n <div id=\"distanceResult\"><\/div>\r\n<\/pre>\n3. Calculando e exibindo a dist\u00e2ncia<\/strong><\/p>\n
Primeiro, configuramos os dois campos dropdown com a lista de marcos (markers). Para calcular a dist\u00e2ncia, obtemos as informa\u00e7\u00f5e “De” e “Para” e passamos as coordenadas como objetos turf.point<\/em> para a fun\u00e7\u00e3o de dist\u00e2ncia do Turf.js.<\/p>\n
\r\n fromBox = document.getElementById('fromBox');\r\n toBox = document.getElementById('toBox');\r\n var featuremap = {};\r\n for (var i = 0; i < trail_stops['features'].length ; i++){\r\n feature = trail_stops['features'][i];\r\n \/\/console.log(feature['properties']['name']);\r\n featuremap[feature['properties']['name']] = feature['properties'];\r\n var fromopt = document.createElement('option');\r\n fromopt.value = feature['properties']['name'];\r\n fromopt.innerHTML = feature['properties']['name'];\r\n fromBox.appendChild(fromopt);\r\n var toopt = document.createElement('option');\r\n toopt.value = feature['properties']['name'];\r\n toopt.innerHTML = feature['properties']['name'];\r\n toBox.appendChild(toopt);\r\n }\r\n\r\n document.getElementById('calculate').onclick = calculateDistance;\r\n\r\n function calculateDistance(){\r\n from = fromBox.value;\r\n to = toBox.value;\r\n fromobj = featuremap[from];\r\n toobj = featuremap[to];\r\n var fromPt = turf.point([fromobj['prim_lon_1'], fromobj['prim_lat_d']]);\r\n var toPt = turf.point([toobj['prim_lon_1'], toobj['prim_lat_d']]);\r\n var distance = turf.distance(fromPt, toPt, {units: 'kilometers'});\r\n console.log(distance)\r\n var distanceMiles = distance * 0.6214 \r\n \r\n document.getElementById('distanceResult').innerHTML = 'Distance is: ' + distance.toFixed(2) +\r\n ' kilometers (' + distanceMiles.toFixed(2) + ' miles)';\r\n }\r\n<\/pre>\nAgora vou explicar o passo a passo do c\u00f3digo acima:<\/p>\n
\n
- As linhas 1 a 16 preenchem os campos dropdown usando os dados do arquivo GeoJSON trail_stops<\/em>.<\/li>\n
- A linha 18 configura o bot\u00e3o calcular para chamar a fun\u00e7\u00e3o calculateDistance (linhas 20 a 33).<\/li>\n
- Nas linhas 21-26, obtemos os marcadores \"de\"\/\"para\" e usando o featuremap, obtemos a latitude e a longitude para criar dois objetos turf.point. O aviso turf.point \u00e9 criado especificando a longtiude (valor x) primeiro.<\/li>\n
- A linha 27 calcula a dist\u00e2ncia e a linha 28 registra-a no console.<\/li>\n
- A linha 29 converte de quil\u00f4metros em milhas.<\/li>\n
- As linhas 31 a 32 definem o texto para a div distanceResult<\/em>.<\/li>\n
- Por \u00faltimo calcula a dist\u00e2ncia e nos retorna o resultado em quil\u00f4metros e milhas, conforme a imagem abaixo:<\/li>\n<\/ul>\n
\n
\n<\/center><\/p>\n4. O C\u00f3digo<\/strong><\/p>\n
Para obter o c\u00f3digo completo, clique aqui<\/a>.<\/p>\n
5. YouTube<\/strong><\/p>\n
Se voc\u00ea quiser, pode ver esse conte\u00fado no YouTube:<\/p>\n
\n
![\"\"](\"http:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2019\/04\/leaflet_map9.png\")