Visualisera Information runt cykelresa (1 / 1 steg)

Steg 1: Gör en MapView att visualisera cykling aktivitet

För att visualisera sin cykling aktivitet på toppen av kartan, använder vi Leaflet.js och CouldMade. Använder här vi JavaScript och HTML5 för visualisering och vi kommer att förklara hur man integrerar JavaScript med Java i nästa avsnitt. Leaflet.js är en öppen källkod JavaScript bibliotek för kartvisualisering som fullt ut stödjer HTML5. På toppen av kartan lagret är ett sökvägen lager och sökvägar lagras/återges en vektor polylinje.

Vi bädda in webbsidan som en del av app med hjälp av web view widget som beskrivs i följande länk. Detta sätt JavaScript-funktionerna kan kallas precis som metoder i Java-objekt från andra delen av programmet (vi behöver detta för att ändra färgen på sökvägen vektorer enligt de uppgifter vi förvärvar i Java-objekt). Och vi följer även följande instruktion att göra metoder i Java-objekt inlösbara från JavaScript (länk).

Först drar vi vägen mellan punkter som en användare har rest. Varje punkt representerar en punkt där GPS-position förvärvades. Annan färg för vägarna som förbinder punkter färg representerar olika egenskaper, som vi nämnde tidigare, olika hastighet på cykel mellan punkter.

Förutom att visualisera de platser som är rest av en användare, visualisera vi även platser som inte är rest av användare som dimma, vit nyans som döljer delar av kartan. Dimma stilen som den app dimma av världen har är en utmaning i detta projekt. Det finns inget eget API i bipacksedeln att göra som ett lock över baslagret, som även bör raderas delvis av den befintliga banan. Nyckeln är att använda TileLayer.Canvas i bipacksedeln att återge varje kakel självständigt kontrollera alfakanalen i den vita färgen för att simulera dimma. Och det kräver också kartläggning geografiska koordinater för varje nod på väg till pixlar i motsvarande plattor att ta av locket på vägen. JS knappfunktionerna kan hittas i PolylineTest.html på GitHub.

Den väg som en användare har rest kan förvaras i lokal lagring och nås av objekt som Java IO. Data lagras i GeoJSON format, vilket är en utbredd JSON-stil web standard för utbyte av geografisk information över Internet. GeoJSON format kan analyseras och visas av GeoJSON lagret i bipacksedel.