Alcune volte mi capita di dover convertire delle tracce GPX per visualizzarle con LeafletJS.
In generale il primo lavoro e' quello di rimuovere il dato di quota tramite la app (opzione flatten)
https://wtracks.appspot.com/
per poi semplificare il percorso mediante
https://github.com/stefanocudini/gpx-simplify-optimizer
a questo punto rimane l.ultimo problema...ovvero che il formato GeoJSon usa il formato [lon,lat] mentre Leaflet usa [lat,lon]
per convertire i dati nel giusto formato e formattarli in un array javascript per poterli incollare nell'oggetto ployline di Leaflet ho scritto questo semplice codice che usa la libreria Python GeoJson (pip install geojson)
-------------------------------------------------------------------------------------------
import geojson
with open('svizzera_flat_1069nodes.geojson') as f:
data = geojson.load(f)
for feature in data['features']:
#print feature['geometry']['type']
#print feature['geometry']['coordinates']+'\n'
coo = feature['geometry']['coordinates']
for p in coo: print "["+str(p[1]) + "," + str(p[0])+"],"
Visualizzazione post con etichetta Leaflet. Mostra tutti i post
Visualizzazione post con etichetta Leaflet. Mostra tutti i post
venerdì 21 settembre 2018
mercoledì 29 aprile 2015
Mappe offline con Phonegap e Leaflet.js
Mi e' stato chiesto di sviluppare una applicazione per Android/IOS/W8 che permetta di visualizzare mappe di escursionismo in modalita' completamente offline (non e' prevista la copertura internet via cellulare nel mezzo del bosco) e con un minimo di utilizzo del posizionamento GPS
Una delle richieste e che l'utente doveva avere subito disponibile tutta la cartografia dell'area di interesse (24Km x13Km) senza la necessita' di scaricare dati
Viste le limitazioni imposte e i sistemi da supportare mi sono orientato su una applicazione HTML5 su Phonegap ed usando la libreria Leaflet.JS .
Con Leaflet e' possibile mostrare mappe dinamiche (pan/zoom) derivanti dai progetti di cartografici open e vista la tematica ho scelto come sorgente dati 4UMaps, un servizio dedicato all'escursionismo e alla mountain bike con indicazione delle isoipse e di alcuni tracciati di sentieri
Le varie mattonelle della cartografia ai vari livelli di dettaglio (su 4UMaps il livello di maggiore dettaglio e' il 15) possono essere scaricati medianti il softare MOBAC (Mobile Atlas Creator), un software Java che date le coordinate dei vertici si occupa di scaricare tutti i dati legati all'area selezionata
Il primo problema che si e' posto e' che le mappe dell'area di interesse agli zoom 13-14-15 ha una dimensione di circa 90 Mb, decisamente troppi per gli utenti che si devono scaricare tutto il pacchetto (il limite proposto per l'applicazione completa e' massima di 50 Mb).
Mediante il software Pngyu e' pero' possibile effettuare una compressione dei PNG delle mappe di un fattore del 40-50% senza perdere sensibilmente in qualita'
Per ottenere il segnale del punto GPS e' possibile utilizzare un plugin per Leaflet (Leaflet.Control.GPS)
Per sovrapporre una traccia GPS alla mappa esistono vari plugin di leaflet ma sono nati per l'uso online ed usandoli all'interno di Phonegap viene generato un errore di javascript che per problemi di sicurezza non puo' accedere ai dati sul filesystem; per ovviare a questa limitazione ho trasformato il file GPX in un file testo creando poi un polilinea con l'array dei punti ...tracce con 5000 punti sono gestite senza troppi problemi o rallentamenti)
Al termine il file html di un progetto di sentiero e' cosi' composto (nella sottocartella Maps sono contenute le immagini della cartografia divise per livello di zoom)
--------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<title>Sentiero 2</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="leaflet.css" />
<link rel="stylesheet" href="leaflet-compass.css" />
<link rel="stylesheet" href="leaflet-gps.css" />
</head>
<body>
<div id="map" style="width: 500px; height: 500px"></div>
<script src="leaflet.js"></script>
<script src="leaflet-compass.js"></script>
<script src="leaflet-gps.js"></script>
<script>
var map = L.map('map').setView([44.1496, 10.7321], 12);
L.tileLayer('Maps/{z}/{x}/{y}.png', {
maxZoom: 15,
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="http://4umaps.eu">4UMaps</a>',
id: 'examples.map-i875mjb7'
}).addTo(map);
var polygon = L.polyline([
[44.136394501,10.721472740],
[44.136398315,10.721463203],
[44.136402130,10.721356392],
[44.136432648,10.721227646],
[44.136440277,10.721220016],
[44.136497498,10.721108437],
[44.136562347,10.721001625],
..................................................................................
..................................................................................
[44.136318207,10.721796036],
[44.136318207,10.721800804],
[44.136306763,10.721786499],
[44.136322021,10.721772194],
[44.136325836,10.721771240],
]).addTo(map);
//map.addControl( new L.Control.Compass() );
map.addControl( new L.Control.Gps({autoActive:false}) );
</script>
</body>
</html>
--------------------------------------------------------
Una delle richieste e che l'utente doveva avere subito disponibile tutta la cartografia dell'area di interesse (24Km x13Km) senza la necessita' di scaricare dati
Viste le limitazioni imposte e i sistemi da supportare mi sono orientato su una applicazione HTML5 su Phonegap ed usando la libreria Leaflet.JS .
Con Leaflet e' possibile mostrare mappe dinamiche (pan/zoom) derivanti dai progetti di cartografici open e vista la tematica ho scelto come sorgente dati 4UMaps, un servizio dedicato all'escursionismo e alla mountain bike con indicazione delle isoipse e di alcuni tracciati di sentieri
Le varie mattonelle della cartografia ai vari livelli di dettaglio (su 4UMaps il livello di maggiore dettaglio e' il 15) possono essere scaricati medianti il softare MOBAC (Mobile Atlas Creator), un software Java che date le coordinate dei vertici si occupa di scaricare tutti i dati legati all'area selezionata
Il primo problema che si e' posto e' che le mappe dell'area di interesse agli zoom 13-14-15 ha una dimensione di circa 90 Mb, decisamente troppi per gli utenti che si devono scaricare tutto il pacchetto (il limite proposto per l'applicazione completa e' massima di 50 Mb).
Mediante il software Pngyu e' pero' possibile effettuare una compressione dei PNG delle mappe di un fattore del 40-50% senza perdere sensibilmente in qualita'
Per ottenere il segnale del punto GPS e' possibile utilizzare un plugin per Leaflet (Leaflet.Control.GPS)
Per sovrapporre una traccia GPS alla mappa esistono vari plugin di leaflet ma sono nati per l'uso online ed usandoli all'interno di Phonegap viene generato un errore di javascript che per problemi di sicurezza non puo' accedere ai dati sul filesystem; per ovviare a questa limitazione ho trasformato il file GPX in un file testo creando poi un polilinea con l'array dei punti ...tracce con 5000 punti sono gestite senza troppi problemi o rallentamenti)
Al termine il file html di un progetto di sentiero e' cosi' composto (nella sottocartella Maps sono contenute le immagini della cartografia divise per livello di zoom)
--------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<title>Sentiero 2</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="leaflet.css" />
<link rel="stylesheet" href="leaflet-compass.css" />
<link rel="stylesheet" href="leaflet-gps.css" />
</head>
<body>
<div id="map" style="width: 500px; height: 500px"></div>
<script src="leaflet.js"></script>
<script src="leaflet-compass.js"></script>
<script src="leaflet-gps.js"></script>
<script>
var map = L.map('map').setView([44.1496, 10.7321], 12);
L.tileLayer('Maps/{z}/{x}/{y}.png', {
maxZoom: 15,
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="http://4umaps.eu">4UMaps</a>',
id: 'examples.map-i875mjb7'
}).addTo(map);
var polygon = L.polyline([
[44.136394501,10.721472740],
[44.136398315,10.721463203],
[44.136402130,10.721356392],
[44.136432648,10.721227646],
[44.136440277,10.721220016],
[44.136497498,10.721108437],
[44.136562347,10.721001625],
..................................................................................
..................................................................................
[44.136318207,10.721796036],
[44.136318207,10.721800804],
[44.136306763,10.721786499],
[44.136322021,10.721772194],
[44.136325836,10.721771240],
]).addTo(map);
//map.addControl( new L.Control.Compass() );
map.addControl( new L.Control.Gps({autoActive:false}) );
</script>
</body>
</html>
--------------------------------------------------------
Iscriviti a:
Post (Atom)
Debugger integrato ESP32S3
Aggiornamento In realta' il Jtag USB funziona anche sui moduli cinesi Il problema risiede nell'ID USB della porta Jtag. Nel modulo...
-
In questo post viene indicato come creare uno scatterplot dinamico basato da dati ripresi da un file csv (nel dettaglio il file csv e' c... -
La scheda ESP32-2432S028R monta un Esp Dev Module con uno schermo TFT a driver ILI9341 di 320x240 pixels 16 bit colore.Il sito di riferiment... -
Questo post e' a seguito di quanto gia' visto nella precedente prova Lo scopo e' sempre il solito: creare un sistema che permet...