Hărți montane cu date din OpenStreetMap
Transcript of Hărți montane cu date din OpenStreetMap
![Page 1: Hărți montane cu date din OpenStreetMap](https://reader034.fdocument.pub/reader034/viewer/2022051319/5892e7881a28ab46038b45f2/html5/thumbnails/1.jpg)
haihuiHărți montane cu date din OpenStreetMap
![Page 2: Hărți montane cu date din OpenStreetMap](https://reader034.fdocument.pub/reader034/viewer/2022051319/5892e7881a28ab46038b45f2/html5/thumbnails/2.jpg)
![Page 3: Hărți montane cu date din OpenStreetMap](https://reader034.fdocument.pub/reader034/viewer/2022051319/5892e7881a28ab46038b45f2/html5/thumbnails/3.jpg)
DilemaNoi
Traseul
![Page 4: Hărți montane cu date din OpenStreetMap](https://reader034.fdocument.pub/reader034/viewer/2022051319/5892e7881a28ab46038b45f2/html5/thumbnails/4.jpg)
comparație cu alte hărți
![Page 5: Hărți montane cu date din OpenStreetMap](https://reader034.fdocument.pub/reader034/viewer/2022051319/5892e7881a28ab46038b45f2/html5/thumbnails/5.jpg)
Hartă calumea
• Trasee, puncte de interes, relief
• Funcționează offline pe mobil
• Ușor de instalat, folosit
• Bulină albastră
![Page 6: Hărți montane cu date din OpenStreetMap](https://reader034.fdocument.pub/reader034/viewer/2022051319/5892e7881a28ab46038b45f2/html5/thumbnails/6.jpg)
OpenStreetMap
![Page 7: Hărți montane cu date din OpenStreetMap](https://reader034.fdocument.pub/reader034/viewer/2022051319/5892e7881a28ab46038b45f2/html5/thumbnails/7.jpg)
![Page 8: Hărți montane cu date din OpenStreetMap](https://reader034.fdocument.pub/reader034/viewer/2022051319/5892e7881a28ab46038b45f2/html5/thumbnails/8.jpg)
OpenStreetMap - data
![Page 9: Hărți montane cu date din OpenStreetMap](https://reader034.fdocument.pub/reader034/viewer/2022051319/5892e7881a28ab46038b45f2/html5/thumbnails/9.jpg)
SRTM
![Page 10: Hărți montane cu date din OpenStreetMap](https://reader034.fdocument.pub/reader034/viewer/2022051319/5892e7881a28ab46038b45f2/html5/thumbnails/10.jpg)
Pregătirea datelor
• Query Overpass API
• Altitudine din SRTM
• Filtrare și generat GeoJSON
• Transformat în TopoJSON
• Automatizare!
![Page 11: Hărți montane cu date din OpenStreetMap](https://reader034.fdocument.pub/reader034/viewer/2022051319/5892e7881a28ab46038b45f2/html5/thumbnails/11.jpg)
![Page 12: Hărți montane cu date din OpenStreetMap](https://reader034.fdocument.pub/reader034/viewer/2022051319/5892e7881a28ab46038b45f2/html5/thumbnails/12.jpg)
puncte: node[tourism~""]({{bbox}}); node[natural~""]({{bbox}});
![Page 13: Hărți montane cu date din OpenStreetMap](https://reader034.fdocument.pub/reader034/viewer/2022051319/5892e7881a28ab46038b45f2/html5/thumbnails/13.jpg)
drumuri: way["highway"~""]({{bbox}});>;
![Page 14: Hărți montane cu date din OpenStreetMap](https://reader034.fdocument.pub/reader034/viewer/2022051319/5892e7881a28ab46038b45f2/html5/thumbnails/14.jpg)
trasee: relation["route"="hiking"]({{bbox}});>;
![Page 15: Hărți montane cu date din OpenStreetMap](https://reader034.fdocument.pub/reader034/viewer/2022051319/5892e7881a28ab46038b45f2/html5/thumbnails/15.jpg)
simboluri de trasee: tag-uri de forma osmc:symbol=blue:white:blue_triangle
![Page 16: Hărți montane cu date din OpenStreetMap](https://reader034.fdocument.pub/reader034/viewer/2022051319/5892e7881a28ab46038b45f2/html5/thumbnails/16.jpg)
râuri: way["waterway"~""]({{bbox}});>;
![Page 17: Hărți montane cu date din OpenStreetMap](https://reader034.fdocument.pub/reader034/viewer/2022051319/5892e7881a28ab46038b45f2/html5/thumbnails/17.jpg)
landuse: way["landuse"~""]({{bbox}});>; way["water"~"lake|reservoir"]({{bbox}}); way["natural"~""]({{bbox}});>; way["leisure"="park"]({{bbox}});>;
![Page 18: Hărți montane cu date din OpenStreetMap](https://reader034.fdocument.pub/reader034/viewer/2022051319/5892e7881a28ab46038b45f2/html5/thumbnails/18.jpg)
DEM: gdalwarp ro.tiff fagaras.tiff -te 24.30 45.47 24.89 45.73 gdal_contour fagaras.tiff fagaras.shp -a elevation -i 100
![Page 19: Hărți montane cu date din OpenStreetMap](https://reader034.fdocument.pub/reader034/viewer/2022051319/5892e7881a28ab46038b45f2/html5/thumbnails/19.jpg)
Harta completă
![Page 20: Hărți montane cu date din OpenStreetMap](https://reader034.fdocument.pub/reader034/viewer/2022051319/5892e7881a28ab46038b45f2/html5/thumbnails/20.jpg)
![Page 21: Hărți montane cu date din OpenStreetMap](https://reader034.fdocument.pub/reader034/viewer/2022051319/5892e7881a28ab46038b45f2/html5/thumbnails/21.jpg)
Aplicație
• Script de pregătit datele (node.js, overpass, gdal, turf.js)
• Pagină web optimizată pentru mobil
• Appcache (offline)
![Page 22: Hărți montane cu date din OpenStreetMap](https://reader034.fdocument.pub/reader034/viewer/2022051319/5892e7881a28ab46038b45f2/html5/thumbnails/22.jpg)
Fișereindex.html data.json ../region.css ../d3.min.js ../topojson.min.js ../proj4.js ../ui.js
data.json: 1528 KB (475 KB gzip)
![Page 23: Hărți montane cu date din OpenStreetMap](https://reader034.fdocument.pub/reader034/viewer/2022051319/5892e7881a28ab46038b45f2/html5/thumbnails/23.jpg)
Optimizare
• Date împachetate ca TopoJSON
• Simplificat geometria la afișare
• Animație zoom cu 3d-transforms
• Browserele mobile sunt rapide!
![Page 24: Hărți montane cu date din OpenStreetMap](https://reader034.fdocument.pub/reader034/viewer/2022051319/5892e7881a28ab46038b45f2/html5/thumbnails/24.jpg)
Vise
• Mai mule regiuni, alte țări
• Click pentru informații despre punct/drum
• Învățat pe salvamontiști să contribuie la OSM
![Page 25: Hărți montane cu date din OpenStreetMap](https://reader034.fdocument.pub/reader034/viewer/2022051319/5892e7881a28ab46038b45f2/html5/thumbnails/25.jpg)
mulțumesc! întrebări?
haihui.grep.ro
is.gd/overpasscluj2015 github.com/mgax/utrechtjs-map
Alex Morega @mgax grep.ro