Web GPS Template

Modèle Web-GPS

Vous envisagez de créer une application hybride ? Vous envisagez d'utiliser un GPS? Alors ce modèle est fait pour vous !

Pages à modifier :

• Marker.js -> contient les marqueurs à l'intérieur de la carte
• nav-dialogs.js -> contient les méthodes utilisées par le modèle de tiroir (barre latérale)
• info.js -> contient les méthodes utilisées par les événements lorsque l'utilisateur clique ou appuie sur le marqueur à l'intérieur de la carte
• navigation.js -> contrôle la boîte de dialogue utilisée par l'application
• main.css -> mise en page de cette page
• templates.css -> quelques choix de conception (couleur d'arrière-plan) que partagent index.html et cette page

Le dossier webinterface est créé automatiquement par le plug-in qgis2web de qgis. Si vous créez une nouvelle carte et utilisez le plugin qgis2web, ce modèle est très compatible. Bien que j'aie apporté quelques modifications à l'intérieur de qgis2web.js afin de répondre au mode manuel (définition manuelle des coordonnées GPS), gardez cela à l'esprit lorsque vous modifiez le contenu de l'interface Web.

Ce modèle ne recherche ni ne compare les emplacements de coordonnées, mais vous pouvez créer le vôtre. Utilisez simplement ces méthodes Javascript pour obtenir votre position actuelle.

Méthodes et variables JavaScript notables à utiliser :

• geolocation.getPosition() -> Cette méthode donne la position GPS actuelle de l'utilisateur
• externalGeoLocate() -> Met à jour la position GPS actuelle de l'utilisateur
• manualcoords -> Vos coordonnées GPS définies manuellement. Appelez cette variable uniquement si le mode manuel est défini sur true

Je pense qu'OpenLayers (celui qui a rendu ce modèle possible) a sa propre méthode de comparaison des coordonnées, vous pouvez également l'utiliser !

Exemples de codes pour comparer et rechercher des coordonnées

  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 ) ;
    }
  } 

Aperçu

Un aperçu de ce modèle : cliquez ici pour rediriger