Visualiseren van informatie rond fietstocht (1 / 1 stap)

Stap 1: Het maken van een MapView om te visualiseren fietsen activiteit

Wij gebruiken te visualiseren iemands fietsen activiteit op de top van de kaart, Leaflet.js en CouldMade. Hier gebruiken we JavaScript en HTML5 voor visualisatie en zullen we uitleggen hoe JavaScript integreren met Java in de volgende sectie. Leaflet.js is een open source JavaScript-bibliotheek voor kaart visualisatie die biedt volledige ondersteuning voor HTML5. Op de top van de kaart laag is een laag pad en paden worden opgeslagen/weergegeven een polylijn vector.

We insluiten de webpagina als onderdeel van de app met behulp van de web-weergave widget zoals beschreven in de volgende link. Op deze manier de JavaScript-functies kunnen worden aangeroepen net als methoden in Java-object vanuit andere onderdeel van het programma (wij hebben dit nodig om te veranderen van kleur van pad vectoren volgens de gegevens die we in de voorwerpen van Java verwerven). En wij volgen ook de volgende instructie voor het maken van methoden in Java-Object callable van JavaScript (dekoppeling).

Eerst tekenen we pad tussen punten die een gebruiker heeft afgelegd. Elk punt vertegenwoordigt een punt waar de GPS-locatie werd overgenomen. Andere kleur voor de paden die punten kleur verbindt vertegenwoordigt verschillende eigenschappen zoals, zoals we al eerder, verschillende snelheid van een fiets tussen punten.

Naast het visualiseren van de plaatsen die zijn afgelegd door een gebruiker, visualiseren we ook plaatsen die niet zijn reisde door gebruikers als mist, witte schaduw die verbergt de delen van de kaart. De stijl van de mist als de app die mist van de wereld heeft is een uitdaging in dit project. Er is geen native API in bijsluiter te maken als een dekking boven de basislaag, die ook gedeeltelijk door het bestaande pad moet worden gewist. De sleutel is om gebruik te maken van de TileLayer.Canvas in de bijsluiter om te renderen van elke tegel onafhankelijk controle van het alfakanaal van de witte kleur te simuleren mist. En het vereist ook de geografische coördinaten van de toewijzing van elk knooppunt op weg naar de pixels in de overeenkomstige tegels te verwijderen van de cover op de weg. De belangrijkste functies van de JS kunnen worden gevonden in PolylineTest.html in de GitHub.

Het pad dat een gebruiker heeft afgelegd kan worden opgeslagen in lokale opslag en benaderd door de Java IO-objecten. Gegevens worden opgeslagen in GeoJSON formaat, dat een overwegend JSON-stijl web standaard is voor het uitwisselen van geo-informatie via het Internet. GeoJSON-indeling kan worden geparseerd en weergegeven door de GeoJSON laag in de bijsluiter.