Visualisation d’informations autour de voyage à bicyclette (1 / 1 étapes)

Étape 1: Faire un plan pour visualiser l’activité de cyclisme

Afin de visualiser l’activité de cyclisme en haut un plan, nous utilisons Leaflet.js et CouldMade. Ici, nous utilisons JavaScript et HTML5 pour la visualisation et nous vous expliquerons comment intégrer JavaScript avec Java dans la section suivante. Leaflet.js est une bibliothèque JavaScript libre pour la visualisation de carte qui prend totalement en charge HTML5. En haut du plan calque est un calque de chemin d’accès et chemins d’accès sont stockées/rendu une polyligne de vecteur.

Nous incorporons la page Web dans le cadre de l’application en utilisant le widget d’affichage web comme décrit dans le liensuivant. De cette façon, les fonctions JavaScript peuvent être appelées comme méthodes de l’objet Java de l’autre partie du programme (nous avons besoin de cela afin de changer la couleur des vecteurs de chemin d’accès selon les données que nous acquérons en objets Java). Et nous aussi de suivre les instructions suivantes pour faire des méthodes en objet Java callable de JavaScript (lien).

Tout d’abord, nous attirons chemin entre points qu’un utilisateur a voyagé. Chaque point représente un point où la localisation GPS a été acquise. Couleur différente pour les chemins d’accès qui connecte des points couleur représente différentes propriétés, telles que, comme nous l’avons mentionné plus tôt, différente vitesse d’une bicyclette entre les points.

En plus de visualiser les lieux qui sont parcourus par un utilisateur, nous visualisons aussi les endroits qui ne sont pas voyagés par les utilisateurs dans le brouillard, ombre blanche qui masque les parties de la carte. Le style de brouillard que l’app qu'a brouillard du monde est un défi dans ce projet. Il n’y a aucune API native dans le dépliant de rendre aussi un couvercle au-dessus de la couche de base, qui devrait également être partiellement effacée par le chemin d’accès existant. La clé est d’utiliser le TileLayer.Canvas en dépliant pour restituer chaque tuile contrôler indépendamment le canal alpha de la couleur blanche pour simuler le brouillard. Et il faut aussi la cartographie des coordonnées géographiques de chaque nœud sur le chemin d’accès aux pixels dans les tuiles correspondantes retirer le couvercle sur le chemin d’accès. Les fonctions JS clés se trouvent dans PolylineTest.html dans GitHub.

Le chemin qu’a parcouru un utilisateur peut être stocké dans le stockage local et consulté par les objets Java IO. Données sont stockées au format GeoJSON, qui est une toile de JSON-style répandue standard pour l’échange d’information géographique sur Internet. GeoJSON format peut être analysé et affiché par la couche de GeoJSON en dépliant.