Web GPS Template

Modelo Web-GPS

Planejando criar um aplicativo híbrido? Planeja usar um GPS nele? Então este modelo é para você!

Páginas para editar:

• marcador.js -> mantém os marcadores dentro do mapa
• nav-dialogs.js -> contém os métodos usados ​​pelo modelo de gaveta (barra lateral)
• info.js -> contém os métodos que os eventos usam quando o usuário clica ou toca no marcador dentro do mapa
• navigation.js -> controla a caixa de diálogo usada pelo aplicativo
• main.css -> layout desta página
• templates.css -> algumas opções de design (cor de fundo) que index.html e esta página compartilham

A pasta webinterface é criada automaticamente pelo plug-in qgis2web do qgis. Se você criar um novo mapa e usar o plugin qgis2web, este modelo é muito compatível. Embora eu tenha feito algumas alterações dentro do qgis2web.js para atender ao modo manual (definindo as coordenadas GPS manualmente), tenha isso em mente ao alterar o conteúdo da interface da web.

Este modelo não pesquisa nem compara localizações de coordenadas, mas você pode criar a sua própria. Basta usar estes métodos Javascript para obter sua localização atual.

Métodos e variáveis ​​JavaScript notáveis ​​para usar:

• geolocation.getPosition() -> Este método fornece a localização GPS atual do usuário
• externalGeoLocate() -> Atualiza a localização GPS atual do usuário
• manualcoords -> Suas coordenadas GPS definidas manualmente. Chame esta variável apenas se manualmode estiver definido como verdadeiro

Acho que o OpenLayers (aquele que tornou este modelo possível) tem seu próprio método de comparação de coordenadas, você também pode usá-lo!

Exemplos de códigos para comparar e pesquisar coordenadas

  if ( typeof ( geolocation . getPosition ( ) ) === "undefined" && manualmode == false ) {
    return false ;
  }

  if ( manualmode ) {
    coords = manualcoords ;
  }
  else {
    coords = geolocation . getPosition ( ) ;
  }
  
  // Assume that we have a list of coordinates (objects that contain
  // x and y values). We compare each one of them using the classic
  // formula of [distance between two points]
  // (http://www.mathwarehouse.com/algebra/distance_formula/index.php) 
  // then push it to an array called selected
  for ( var i = 0 ; i < list . length ; i ++ ) {
    var icon = list [ i ] ;
    var dist = Math . sqrt ( Math . pow ( ( coords [ 0 ] - icon . x ) , 2 ) + Math . pow ( ( coords [ 1 ] - icon . y ) , 2 ) ) ;
    
    // If distance is close to the 2500m radius, then it is included
    if ( dist <= 2500 ) {
      selected . push ( icon ) ;
    }
  } 

Visualização

Uma prévia deste modelo: clique aqui para redirecionar