전단지 맵을 사용하여 하이킹 여행을 시각화하십시오.
10325 단어 leafletpythongpxjavascript
GPX 트랙에서 전단지 맵으로
많은 모바일 지도 앱과 피트니스 트래커는 하이킹이나 달리기 여행을 기록하여 나중에 지도에서 트랙을 볼 수 있습니다. 또한 많은 앱에서 트랙을 GPX(GPS exchange format ) 형식으로 내보낼 수 있으므로 트랙을 다른 앱으로 가져오거나 데이터를 시각화하거나 조작하는 앱을 만들 수 있습니다.
이 짧은 기사에서는 Python 스크립트를 사용하여 GPX 파일에서 읽은 트랙을 나타내는 폴리라인이 있는 Leaflet을 사용하여 맵을 표시하는 html 페이지를 생성하는 방법을 보여줍니다.
Python 스크립트는 gpxpy -- GPX file parser 패키지를 사용하여 GPX 데이터에 기록된 모든 지점을 읽고 html 페이지에서 JavaScript로 변환하고 트랙을 Leaflet 지도에 시각화합니다.
스크린샷 아래에서 전체 Python 스크립트를 찾거나 여기에서 복제할 수 있습니다GitHub repo.
import gpxpy
import os
def main(gpxFilename, htmlFilename) -> None:
track: list = load_track(gpxFilename)
if(track != None and len(track) > 0):
generate_html(track, htmlFilename)
print("Done generating html page: ", htmlFilename)
def load_track(filename: str) -> list:
trackPoints: list = []
if(os.path.exists(filename) == False):
print(f"File not found: {filename}")
return
gpx_file = open(filename)
try:
gpx = gpxpy.parse(gpx_file)
for track in gpx.tracks:
for segment in track.segments:
for point in segment.points:
trackPoints.append(
[float(point.latitude), float(point.longitude)])
except Exception as error:
print(f"\nParsing file '{filename}' failed. Error: {error}")
gpx_file.close()
return(trackPoints)
def generate_html(track: list, file_out: str) -> None:
"""Generates a new html file with points"""
template = """
<html><head>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
<style type="text/css">
#mapId {
position: absolute;
top: 0px;
width: 1000px;
left: 0px;
height: 1000px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div id="mapId"></div>
<script>
var myMap = L.map('mapId').setView([55.641, 12.47], 13);
L.tileLayer(
'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1
}).addTo(myMap);
var track = [];
L.polyline(track, {color: 'blue'}).addTo(myMap);;
</script>
</body></html>
"""
track_points = ",".join([f"[{g_track_point[0]}, {g_track_point[1]}, 0.1]" for g_track_point in track])
track_points = f"var track=[{track_points}];"
template = template.replace("var track = [];", track_points)
f = open(file_out, "w")
f.write(template)
f.close()
if __name__ == '__main__':
main("myTrack.gpx", "myTrack.html")
여기에서 다른 좋은 기사를 살펴보십시오.
Reference
이 문제에 관하여(전단지 맵을 사용하여 하이킹 여행을 시각화하십시오.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/coderallan/gpx-track-to-leaflet-map-3m93
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
import gpxpy
import os
def main(gpxFilename, htmlFilename) -> None:
track: list = load_track(gpxFilename)
if(track != None and len(track) > 0):
generate_html(track, htmlFilename)
print("Done generating html page: ", htmlFilename)
def load_track(filename: str) -> list:
trackPoints: list = []
if(os.path.exists(filename) == False):
print(f"File not found: {filename}")
return
gpx_file = open(filename)
try:
gpx = gpxpy.parse(gpx_file)
for track in gpx.tracks:
for segment in track.segments:
for point in segment.points:
trackPoints.append(
[float(point.latitude), float(point.longitude)])
except Exception as error:
print(f"\nParsing file '{filename}' failed. Error: {error}")
gpx_file.close()
return(trackPoints)
def generate_html(track: list, file_out: str) -> None:
"""Generates a new html file with points"""
template = """
<html><head>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
<style type="text/css">
#mapId {
position: absolute;
top: 0px;
width: 1000px;
left: 0px;
height: 1000px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div id="mapId"></div>
<script>
var myMap = L.map('mapId').setView([55.641, 12.47], 13);
L.tileLayer(
'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1
}).addTo(myMap);
var track = [];
L.polyline(track, {color: 'blue'}).addTo(myMap);;
</script>
</body></html>
"""
track_points = ",".join([f"[{g_track_point[0]}, {g_track_point[1]}, 0.1]" for g_track_point in track])
track_points = f"var track=[{track_points}];"
template = template.replace("var track = [];", track_points)
f = open(file_out, "w")
f.write(template)
f.close()
if __name__ == '__main__':
main("myTrack.gpx", "myTrack.html")
Reference
이 문제에 관하여(전단지 맵을 사용하여 하이킹 여행을 시각화하십시오.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/coderallan/gpx-track-to-leaflet-map-3m93텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
