{"id":5566,"date":"2016-06-14T07:30:33","date_gmt":"2016-06-14T10:30:33","guid":{"rendered":"http:\/\/www.fernandoquadro.com.br\/html\/?p=5566"},"modified":"2016-08-12T15:04:44","modified_gmt":"2016-08-12T18:04:44","slug":"criando-um-aplicativo-de-rotas-com-pgrouting-parte-5","status":"publish","type":"post","link":"https:\/\/www.fernandoquadro.com.br\/html\/2016\/06\/14\/criando-um-aplicativo-de-rotas-com-pgrouting-parte-5\/","title":{"rendered":"Criando um aplicativo de rotas com pgRouting \u2013 Parte 5"},"content":{"rendered":"

Para interagir com o nosso algoritmo de roteamento vamos precisar de um cliente que possa realizar solicita\u00e7\u00f5es no padr\u00e3o OGR para nossas camadas nearest_vertex<\/i> e shortest_path<\/i> no GeoServer. <\/p>\n

Iremos implementar um cliente muito simples com este tutorial que vai deixar o usu\u00e1rio arrastar os marcadores para in\u00edcio e destino da rota e, em seguida, atualizar o mapa com uma linha indicando a rota mais curta entre os dois pontos. O cliente ser\u00e1 escrito em OpenLayers 3 com JQuery.<\/p>\n

\"route2\"<\/p>\n

N\u00f3s estaremos usando o SDK Su\u00edte para criar um modelo para a constru\u00e7\u00e3o de nossa aplica\u00e7\u00e3o. Na linha de comando vamos executar o seguinte.<\/p>\n

suite-sdk create routing ol3view<\/pre>\n
Agora n\u00f3s teremos um diret\u00f3rio com a aplica\u00e7\u00e3o b\u00e1sica para visualizar as camadas. Existem v\u00e1rios arquivos neste diret\u00f3rio, mas s\u00f3 vamos nos preocupar com index.html e src\/app\/app.js.<\/p>\n
Vamos primeiro precisar editar o arquivo index.html que carrega as bibliotecas OpenLayers e jQuery, para adicionar um componente onde possamos exibir informa\u00e7\u00f5es sobre a rota. Encontre a linha que tem <div id = “map”> e adicione a seguinte linha antes: <div id = “info”><\/div>. Esta parte do arquivo agora deve ter a seguinte apar\u00eancia:<\/p>\n
  <\/div><!--\/.navbar-collapse -->\r\n<\/div>\r\n<div id=\"info\"><\/div>\r\n<div id=\"map\">\r\n  <div id=\"popup\" class=\"ol-popup\">\r\n  <\/div>\r\n<\/div><\/pre>\n
Agora, vamos construir nossa aplica\u00e7\u00e3o javascript passo-a-passo, mas ao contr\u00e1rio do que fizemos com o arquivo index.html vamos remover os arquivos app.js e escrever um novo a partir do zero. N\u00e3o esque\u00e7a de colocar seus novos arquivos na pasta src\/app.<\/p>\n
Vamos come\u00e7ar declarando algumas vari\u00e1veis, que incluir\u00e3o o ponto inicial (center point) e o n\u00edvel de zoom para o nosso mapa.<\/p>\n
var geoserverUrl = '\/geoserver';\r\nvar center = ol.proj.transform([-70.26, 43.67], 'EPSG:4326', 'EPSG:3857');\r\nvar zoom = 12;\r\nvar pointerDown = false;\r\nvar currentMarker = null;\r\nvar changed = false;\r\nvar routeLayer;\r\nvar routeSource;\r\nvar travelTime;\r\nvar travelDist;<\/pre>\n
Vamos precisar atualizar o texto em dois elementos no documento index.html como nossas mudan\u00e7as de rota.<\/p>\n
\/\/ elements in HTML document\r\nvar info = document.getElementById('info');\r\nvar popup = document.getElementById('popup');<\/pre>\n
Quando apresentarmos as informa\u00e7\u00f5es sobre a nossa rota, teremos de formatar os dados para exibi\u00e7\u00e3o. Por exemplo, o tempo que leva para viajar ao longo de uma rota \u00e9 medido em horas, por isso vamos ter o n\u00famero de 0,25 e format\u00e1-lo para exibir 15 minutos. Fa\u00e7a alguma formata\u00e7\u00e3o de dist\u00e2ncias, nomes das estradas e cruzamentos.<\/p>\n
Nosso mapa ter\u00e1 dois marcadores para que o usu\u00e1rio possa arrast\u00e1-los para novas posi\u00e7\u00f5es e indicar o in\u00edcio e fim da rota.<\/p>\n
\"markers\"<\/p>\n
N\u00f3s vamos adicionar uma fun\u00e7\u00e3o para as camadas de sobreposi\u00e7\u00e3o chamada changeHandler<\/em> que ser\u00e1 acionada sempre que um dos marcadores for movido.<\/p>\n
\/\/ create a point with a colour and change handler\r\nfunction createMarker(point, colour) {\r\n  var marker = new ol.Feature({\r\n    geometry: new ol.geom.Point(ol.proj.transform(point, 'EPSG:4326', 'EPSG:3857'))\r\n  });\r\n  marker.setStyle(\r\n    [new ol.style.Style({\r\n      image: new ol.style.Circle({\r\n        radius: 6,\r\n        fill: new ol.style.Fill({\r\n          color: 'rgba(' + colour.join(',') + ', 1)'\r\n        })\r\n      })\r\n    })]\r\n  );\r\n  marker.on('change', changeHandler);\r\n  return marker;\r\n}\r\nvar sourceMarker = createMarker([-70.26013, 43.66515], [0, 255, 0]);\r\nvar targetMarker = createMarker([-70.24667, 43.66996], [255, 0, 0]);\r\n\/\/ create overlay to display the markers\r\nvar markerOverlay = new ol.FeatureOverlay({\r\n  features: [sourceMarker, targetMarker],\r\n});<\/pre>\n
A fun\u00e7\u00e3o para o movimento do marcador \u00e9 muito simples: vamos manter um registro do marcador que quando se move indica que a rota foi alterada.<\/p>\n
\/\/ record when we move one of the source\/target markers on the map\r\nfunction changeHandler(e) {\r\n  if (pointerDown) {\r\n    changed = true;\r\n    currentMarker = e.target;\r\n  }\r\n}<\/pre>\n
Agora que os marcadores foram criados, podemos dizer ao OpenLayers que eles podem ser modificados pela intera\u00e7\u00e3o do usu\u00e1rio:<\/p>\n
var moveMarker = new ol.interaction.Modify({\r\n  features: markerOverlay.getFeatures(),\r\n  tolerance: 20\r\n});<\/pre>\n
Vamos criar uma segunda camada, que ser\u00e1 usada para exibir um pop-up quando o usu\u00e1rio clicar em segmentos da rota, e vamos destacar os segmentos selecionados com um estilo diferente.<\/p>\n
\/\/ create overlay to show the popup box\r\nvar popupOverlay = new ol.Overlay({\r\n  element: popup\r\n});\r\n\r\n\/\/ style routes differently when clicked\r\nvar selectSegment = new ol.interaction.Select({\r\n  condition: ol.events.condition.click,\r\n  style: new ol.style.Style({\r\n      stroke: new ol.style.Stroke({\r\n        color: 'rgba(255, 0, 128, 1)',\r\n        width: 8\r\n    })\r\n  })\r\n});<\/pre>\n
A camada base para a nossa aplica\u00e7\u00e3o ser\u00e1 do OpenStreetMap, que \u00e9 suportada pelo Openlayers 3. O mapa ser\u00e1 criado com suporte para os marcadores e as diferentes intera\u00e7\u00f5es que criamos sobre ele.<\/p>\n
\/\/ set the starting view\r\nvar view = new ol.View({\r\n  center: center,\r\n  zoom: zoom\r\n});\r\n\/\/ create the map with OSM data\r\nvar map = new ol.Map({\r\n  target: 'map',\r\n  layers: [\r\n    new ol.layer.Tile({\r\n      source: new ol.source.OSM()\r\n    })\r\n  ],\r\n  view: view,\r\n  overlays: [popupOverlay, markerOverlay]\r\n});\r\nmap.addInteraction(moveMarker);\r\nmap.addInteraction(selectSegment);\r\n});<\/pre>\n
Vamos apresentar o pop-up quando o usu\u00e1rio clicar em um segmento de rota, mostrando o nome da estrada, a dist\u00e2ncia e o tempo necess\u00e1rio para atravess\u00e1-la.<\/p>\n
\/\/ show pop up box when clicking on part of route\r\nvar getFeatureInfo = function(coordinate) {\r\n  var pixel = map.getPixelFromCoordinate(coordinate);\r\n  var feature = map.forEachFeatureAtPixel(pixel, function(feature, layer) {\r\n    if (layer == routeLayer) {\r\n      return feature;\r\n    }\r\n  });\r\n  var text = null;\r\n  if (feature) {\r\n    text = '<strong>' + feature.get('name') + '<\/strong><br\/>';\r\n    text += '<p>Distance: <code>' + feature.get('distance') + '<\/code><\/p>';\r\n    text += '<p>Estimated travel time: <code>' + feature.get('time') + '<\/code><\/p>';\r\n    text = text.replace(\/ \/g, ' ');\r\n  }\r\n  return text;\r\n};\r\n\/\/ display the popup when user clicks on a route segment\r\nmap.on('click', function(evt) {\r\n  var coordinate = evt.coordinate;\r\n  var text = getFeatureInfo(coordinate);\r\n  if (text) {\r\n    popupOverlay.setPosition(coordinate);\r\n    popup.innerHTML = text;\r\n    popup.style.display = 'block';\r\n  }\r\n});<\/pre>\n
Precisamos registrar quando o usu\u00e1rio inicia ou para de arrastar um marcador para que possamos saber quando recalcular a rota. Faremos isso registrando o evento do clique do mouse.<\/p>\n
\/\/ record start of click\r\nmap.on('pointerdown', function(evt) {\r\n  pointerDown = true;\r\n  popup.style.display = 'none';\r\n});\r\n\/\/ record end of click\r\nmap.on('pointerup', function(evt) {\r\n  pointerDown = false;\r\n  \/\/ if we were dragging a marker, recalculate the route\r\n  if (currentMarker) {\r\n    getVertex(currentMarker);\r\n    getRoute();\r\n    currentMarker = null;\r\n }\r\n});<\/pre>\n
O \u00faltimo passo antes de trabalhar com a comunica\u00e7\u00e3o do cliente com o GeoServer \u00e9 criar um temporizador que ir\u00e1 acionar a cada quarto de segundo, o que nos permite atualizar a rota periodicamente ao mover um marcador para uma nova localiza\u00e7\u00e3o.<\/p>\n
\/\/ timer to update the route when dragging\r\nwindow.setInterval(function(){\r\n  if (currentMarker && changed) {\r\n    getVertex(currentMarker);\r\n    getRoute();\r\n    changed = false;\r\n  }\r\n}, 250);<\/pre>\n
No c\u00f3digo acima, podemos ver as chamadas para duas fun\u00e7\u00f5es principais: getVertex<\/i> e getRoute<\/i>. Estes dois m\u00e9todos realizam requisi\u00e7\u00f5es WFS ao GeoServer para obter informa\u00e7\u00f5es do recurso. getVertex<\/i> recupera o v\u00e9rtice mais pr\u00f3ximo na rede para a posi\u00e7\u00e3o do marcador atual, enquanto getRoute<\/i> calcula o caminho mais curto entre os dois marcadores.<\/p>\n
O m\u00e9todo getVertex<\/i> utiliza as coordenadas atuais de um marcador e os passa como par\u00e2metros x e y para o nearest_vertex<\/i>  (SQL View) que criamos no GeoServer. O requisi\u00e7\u00e3o GetFeature do WFS ser\u00e1 capturada como JSON e passada para a fun\u00e7\u00e3o loadVertex<\/i> para o processamento.<\/p>\n
\/\/ WFS to get the closest vertex to a point on the map\r\nfunction getVertex(marker) {\r\n  var coordinates = marker.getGeometry().getCoordinates();\r\n  var url = geoserverUrl + '\/wfs?service=WFS&version=1.0.0&' +\r\n      'request=GetFeature&typeName=tutorial:nearest_vertex&' +\r\n      'outputformat=application\/json&' +\r\n      'viewparams=x:' + coordinates[0] + ';y:' + coordinates[1];\r\n  $.ajax({\r\n     url: url,\r\n     async: false,\r\n     dataType: 'json',\r\n     success: function(json) {\r\n       loadVertex(json, marker == sourceMarker);\r\n     }\r\n  });\r\n}<\/pre>\n
O loadVertex<\/i> analisa a resposta do GeoServer e armazena o v\u00e9rtice mais pr\u00f3ximo como o ponto de in\u00edcio ou o fim do nosso percurso. Vamos precisar do id do v\u00e9rtice mais tarde para solicitar a rota ao pgRouting.<\/p>\n
\/\/ load the response to the nearest_vertex layer\r\nfunction loadVertex(response, isSource) {\r\n  var geojson = new ol.format.GeoJSON();\r\n  var features = geojson.readFeatures(response);\r\n  if (isSource) {\r\n    if (features.length == 0) {\r\n      map.removeLayer(routeLayer);\r\n      source = null;\r\n      return;\r\n    }\r\n    source = features[0];\r\n  } else {\r\n    if (features.length == 0) {\r\n      map.removeLayer(routeLayer);\r\n      target = null;\r\n      return;\r\n    }\r\n    target = features[0];\r\n  }\r\n}<\/pre>\n
Tudo o que fizemos at\u00e9 agora foi construir a requisi\u00e7\u00e3o final (WFS GetFeature) que vai realmente solicitar e exibir a rota. O shortest_path<\/i> (SQL View) tem tr\u00eas par\u00e2metros, o v\u00e9rtice de origem, o v\u00e9rtice destino e o custo (dist\u00e2ncia ou tempo).<\/p>\n
function getRoute() {\r\n  \/\/ set up the source and target vertex numbers to pass as parameters\r\n  var viewParams = [\r\n    'source:' + source.getId().split('.')[1],\r\n    'target:' + target.getId().split('.')[1],\r\n    'cost:time'\r\n  ];\r\n  var url = geoserverUrl + '\/wfs?service=WFS&version=1.0.0&' +\r\n      'request=GetFeature&typeName=tutorial:shortest_path&' +\r\n      'outputformat=application\/json&' +\r\n      '&viewparams=' + viewParams.join(';');\r\n  \/\/ create a new source for our layer\r\n  routeSource = new ol.source.ServerVector({\r\n    format: new ol.format.GeoJSON(),\r\n    strategy: ol.loadingstrategy.all,\r\n    loader: function(extent, resolution) {\r\n      $.ajax({\r\n        url: url,\r\n        dataType: 'json',\r\n        success: loadRoute,\r\n        async: false\r\n      });\r\n    },\r\n  });\r\n  \/\/ remove the previous layer and create a new one\r\n  map.removeLayer(routeLayer);\r\n  routeLayer = new ol.layer.Vector({\r\n    source: routeSource,\r\n    style: new ol.style.Style({\r\n      stroke: new ol.style.Stroke({\r\n        color: 'rgba(0, 0, 255, 0.5)',\r\n        width: 8\r\n      })\r\n    })\r\n  });\r\n  \/\/ add the new layer to the map\r\n  map.addLayer(routeLayer);\r\n}<\/pre>\n
A rota gerada ser\u00e1 usado para criar uma nova camada e atualizar as informa\u00e7\u00f5es da pop-up com os detalhes da rota, incluindo os locais de in\u00edcio e fim, a dist\u00e2ncia e o tempo de viagem.<\/p>\n
\/\/ handle the response to shortest_path\r\nvar loadRoute = function(response) {\r\n  selectSegment.getFeatures().clear();\r\n  routeSource.clear();\r\n  var features = routeSource.readFeatures(response)\r\n  if (features.length == 0) {\r\n    info.innerHTML = '';\r\n    return;\r\n  }\r\n  routeSource.addFeatures(features);\r\n  var time = 0;\r\n  var dist = 0;\r\n  features.forEach(function(feature) {\r\n    time += feature.get('time');\r\n    dist += feature.get('distance');\r\n  });\r\n  if (!pointerDown) {\r\n    \/\/ set the route text\r\n    var text = 'Travelling from ' + formatPlaces(source.get('name')) + '<\/strong> to ' + formatPlaces(target.get('name')) + '<\/strong>. ';\r\n    text += 'Total distance ' + formatDist(dist) + '. ';\r\n    text += 'Estimated travel time: ' + formatTime(time) + '.';\r\n    info.innerHTML = text;\r\n    \/\/ snap the markers to the exact route source\/target\r\n    markerOverlay.getFeatures().clear();\r\n    sourceMarker.setGeometry(source.getGeometry());\r\n    targetMarker.setGeometry(target.getGeometry());\r\n    markerOverlay.getFeatures().push(sourceMarker);\r\n    markerOverlay.getFeatures().push(targetMarker);\r\n  }\r\n}<\/pre>\n
Nossa aplica\u00e7\u00e3o agora est\u00e1 completa! Voc\u00ea pode test\u00e1-lo, executando o SDK no modo de depura\u00e7\u00e3o:<\/p>\n
suite-sdk debug routing<\/pre>\n
Veja como ficou o nosso mapa:<\/p>\n
\"application\"<\/p>\n
Este tutorial \u00e9 uma tradu\u00e7\u00e3o e adapta\u00e7\u00e3o livre do artigo \u201cBuilding a Routing Application\u201d publicado no site da Boundless.<\/p>\n
Fonte: Boundless<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Para interagir com o nosso algoritmo de roteamento vamos precisar de um cliente que possa realizar solicita\u00e7\u00f5es no padr\u00e3o OGR para nossas camadas nearest_vertex e shortest_path no GeoServer. Iremos implementar um cliente muito simples com este tutorial que vai deixar… Continue Reading →<\/a><\/p>\n","protected":false},"author":275,"featured_media":5551,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7,24,132,11],"tags":[208,223,250,266,212],"class_list":["post-5566","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-geoserver","category-gis","category-openlayers","category-postgis","tag-geoserver","tag-gis","tag-openlayers","tag-pgrouting","tag-postgis"],"_links":{"self":[{"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/posts\/5566","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=5566"}],"version-history":[{"count":28,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/posts\/5566\/revisions"}],"predecessor-version":[{"id":6211,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/posts\/5566\/revisions\/6211"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/media\/5551"}],"wp:attachment":[{"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/media?parent=5566"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/categories?post=5566"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/tags?post=5566"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}