Visualización de información alrededor de viaje en bicicleta (1 / 1 paso)

Paso 1: Hacer un MapView para visualizar la actividad de ciclismo

Para visualizar la actividad ciclista sobre un mapa, se utilizan Leaflet.js y CouldMade. Aquí utilizamos JavaScript y HTML5 para visualización y explicaremos cómo integrar JavaScript con Java en la siguiente sección. Leaflet.js es una biblioteca JavaScript de código abierto para la visualización del mapa que es totalmente compatible con HTML5. Sobre el mapa de capa es una capa de camino, y caminos se almacenan/representan una polilínea vectorial.

Nos incruste la página web como parte de la aplicación con el widget de vista web como se describe en el siguiente enlace. Esta manera, las funciones de JavaScript pueden ser llamadas como métodos en objetos Java desde otra parte del programa (necesitamos esto para cambiar el color de los vectores de la ruta de acceso según los datos que adquirimos en objetos Java). Y también seguimos las siguientes instrucciones para hacer métodos en objetos Java accesible desde JavaScript (enlace).

Primero dibujamos la trayectoria entre los puntos que un usuario ha viajado. Cada punto representa un punto donde fue adquirida la ubicación GPS. Diverso color de los caminos que conecta puntos color representa diferentes propiedades tales como, como mencionamos anteriormente, diferentes velocidad de una bicicleta entre puntos.

Además de visualizar los lugares que son recorridos por un usuario, también visualizamos a lugares que no son viajó por los usuarios como niebla, sombra blanca que esconde partes del mapa. El estilo de niebla como la niebla del mundo tiene la aplicación es un reto en este proyecto. No hay ninguna API nativa en folleto para hacer como una cubierta sobre la capa base, que también debe ser parcialmente borrada por la ruta existente. La clave está en utilizar el TileLayer.Canvas en folleto para representar cada azulejo controlar independientemente el canal alfa del color blanco para simular niebla. Y también requiere mapeado de coordenadas geográfica de cada nodo de la ruta de acceso a los píxeles correspondientes azulejos quitar la tapa en el camino. Las principales funciones JS pueden encontrarse en PolylineTest.html en GitHub.

El camino que ha recorrido un usuario puede ser guardado en un almacenamiento local y haciendo los objetos Java IO. Los datos se almacenan en formato GeoJSON, que es una web de JSON-estilo prevaleciente estándar para el intercambio de información geográfica sobre Internet. Formato GeoJSON puede analiza y muestra la capa GeoJSON en folleto.