رسم التتبع على الخريطة GPX Trackers في React.JS

تستخدم ملفات GPX في عمليات تتبع الأنشطة ووضعها على الخريطة، ويتم تمثيلها على شكل XML ويمكن رسم هذه البيانات في المتصفح عن طريق استخدام مكتبة Leaflet.

سيكون على شكل Track segment فيه Track Points

<trkseg>
  <trkpt lat="47.644548" lon="-122.326897">
..
  </trkpt>
  <trkpt lat="47.644548" lon="-122.326897">
...
  </trkpt>
  <trkpt lat="47.644548" lon="-122.326897">
..
  </trkpt>
</trkseg>

بعد عمل parse للملف عن طريق gpxparser نستخلص منه مصفوفة إحداثيات points ويمكن المرور عليهم بحلقة و نضعهم ضمن Polyline لرسم الخط.

تضمين gpxparser يتم عن طريق:

npm install --save gpxparser

والتضمين في المكون:

let gpxParser = require('gpxparser');
أو
<script src="./js/GPXParser.js"></script>

import 'leaflet/dist/leaflet.css'
import React from 'react'
import { MapContainer, Polyline, TileLayer } from 'react-leaflet'

import 'gpxParser' from 'gpxparser';



const GpxMap = () => {

// تعريف غرض للتعامل مع الملف
const gpxData = new gpxParser()

// نمرر المسار لللمف
gpxData.parse(OUR_GPX_CONTENT) 


// جلب الإحداثيات كمصفوفة نقاط
const positions = gpxData.tracks[0].points.map(p => [p.lat, p.lon] 

return (
// مكون الخريطة
	<MapContainer
			// تحديد المركز كأول نقطة
	        center={positions[0]}
	        zoom={9}
	        scrollWheelZoom={false}
	      >
      // صورة الخرطية
      // X Y Z إحداثيات الموقع المطلوب
	        <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
      // رسم ال Tracks
            <Polyline
	            pathOptions={{ fillColor: 'red', color: 'blue' }}
	            positions={positions}
            />
	</MapContainer>

	)
}

لمعلومات أكثر عن TileLayer