{"id":681,"date":"2026-06-11T13:55:43","date_gmt":"2026-06-11T05:55:43","guid":{"rendered":"https:\/\/projectleon.net\/make\/blog\/fleet-tracking-lora-leaflet-map-multiple-ugv-farsi\/"},"modified":"2026-06-11T13:55:44","modified_gmt":"2026-06-11T05:55:44","slug":"fleet-tracking-lora-leaflet-map-multiple-ugv-farsi","status":"publish","type":"post","link":"https:\/\/projectleon.net\/make\/blog\/fleet-tracking-lora-leaflet-map-multiple-ugv-farsi\/","title":{"rendered":"\u0633\u0627\u062e\u062a \u0633\u06cc\u0633\u062a\u0645 \u0631\u062f\u06cc\u0627\u0628\u06cc \u0646\u0627\u0648\u06af\u0627\u0646 \u0628\u0627 LoRa \u0648 \u0646\u0642\u0634\u0647 Leaflet: \u0646\u0645\u0627\u06cc\u0634 \u0686\u0646\u062f UGV \u0631\u0648\u06cc \u0646\u0642\u0634\u0647 (\u0641\u0627\u0631\u0633\u06cc)"},"content":{"rendered":"
\n\u0631\u062f\u06cc\u0627\u0628\u06cc \u0646\u0627\u0648\u06af\u0627\u0646 LoRa Leaflet \u0646\u0642\u0634\u0647 \u0686\u0646\u062f UGV\n<\/div>\n
\n

\u0633\u06cc\u0633\u062a\u0645 \u0631\u062f\u06cc\u0627\u0628\u06cc \u0646\u0627\u0648\u06af\u0627\u0646 \u0686\u06cc\u0633\u062a\u061f (\u0645\u0628\u062a\u062f\u06cc)<\/h2>\n

\u062a\u0635\u0648\u0631 \u06a9\u0646\u06cc\u062f \u06f5 UGV \u06cc\u0627 AGV \u062f\u0631 \u06cc\u06a9 \u0645\u062d\u0648\u0637\u0647 \u062f\u0627\u0631\u06cc\u062f \u0648 \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u06cc\u062f \u0647\u0645\u06cc\u0634\u0647 \u0628\u062f\u0627\u0646\u06cc\u062f \u0647\u0631 \u06a9\u062f\u0627\u0645 \u06a9\u062c\u0627\u0633\u062a. \u0627\u06cc\u0646 \u06cc\u06a9 \u0633\u06cc\u0633\u062a\u0645 \u0631\u062f\u06cc\u0627\u0628\u06cc \u0646\u0627\u0648\u06af\u0627\u0646<\/strong> \u0627\u0633\u062a. \u0647\u0631 UGV \u06cc\u06a9 \u06af\u0631\u0647 LoRa \u062f\u0627\u0631\u062f \u06a9\u0647 \u0645\u0648\u0642\u0639\u06cc\u062a GPS \u0631\u0627 \u0647\u0631 \u06f3\u06f0 \u062b\u0627\u0646\u06cc\u0647 \u0627\u0631\u0633\u0627\u0644 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n

\u06cc\u06a9 Gateway LoRa<\/strong> (Raspberry Pi + SX1278) \u062a\u0645\u0627\u0645 \u0627\u06cc\u0646 \u067e\u06a9\u062a\u200c\u0647\u0627 \u0631\u0627 \u062f\u0631\u06cc\u0627\u0641\u062a \u0645\u06cc\u200c\u06a9\u0646\u062f \u0648 \u0628\u0647 \u06cc\u06a9 \u0633\u0631\u0648\u0631 Node.js \u0645\u06cc\u200c\u0641\u0631\u0633\u062a\u062f. \u0633\u0631\u0648\u0631 \u062f\u0627\u062f\u0647 \u0631\u0627 \u062f\u0631 \u062d\u0627\u0641\u0638\u0647 \u0646\u06af\u0647 \u0645\u06cc\u200c\u062f\u0627\u0631\u062f \u0648 \u0627\u0632 \u0637\u0631\u06cc\u0642 WebSocket \u0628\u0647 \u0645\u0631\u0648\u0631\u06af\u0631 \u0645\u06cc\u200c\u0641\u0631\u0633\u062a\u062f. Leaflet.js<\/strong> \u0646\u0642\u0634\u0647 OpenStreetMap \u0631\u0627 \u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631 \u0646\u0634\u0627\u0646 \u0645\u06cc\u200c\u062f\u0647\u062f \u0648 \u0645\u0648\u0642\u0639\u06cc\u062a \u0647\u0631 UGV \u0631\u0627 \u0628\u0627 \u06cc\u06a9 \u0622\u06cc\u06a9\u0648\u0646 \u0628\u0647\u200c\u0631\u0648\u0632 \u0645\u06cc\u200c\u06a9\u0646\u062f \u2014 \u0628\u062f\u0648\u0646 \u0646\u06cc\u0627\u0632 \u0628\u0647 Refresh!<\/p>\n<\/div>\n

\n

\u0645\u062d\u0635\u0648\u0644\u06cc \u06a9\u0647 \u0645\u06cc\u200c\u0633\u0627\u0632\u06cc\u062f<\/h2>\n

\u062f\u0627\u0634\u0628\u0648\u0631\u062f \u0646\u0642\u0634\u0647 \u0632\u0646\u062f\u0647 \u0686\u0646\u062f UGV \u0628\u0627 LoRa \u0648 Leaflet.js.<\/p>\n

    \n
  • \u062a\u0639\u062f\u0627\u062f UGV:<\/strong> \u062a\u0627 \u06f2\u06f5\u06f5 \u06af\u0631\u0647 (\u0628\u0627 ID \u06cc\u06a9 \u0628\u0627\u06cc\u062a\u06cc)<\/li>\n
  • \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc:<\/strong> \u0647\u0631 \u06f3\u06f0 \u062b\u0627\u0646\u06cc\u0647<\/li>\n
  • \u0646\u0642\u0634\u0647:<\/strong> Leaflet.js \u0631\u0627\u06cc\u06af\u0627\u0646 \u0628\u0627 OSM<\/li>\n<\/ul>\n<\/div>\n

    \n\nUGV1<\/text>\nUGV2<\/text>\nUGV3<\/text>\n\n\n\n\n\n\nGateway<\/text>\n\n\n\nNode.js<\/text>\n\n\n\n\u0646\u0642\u0634\u0647 Leaflet.js<\/text>\nWebSocket \u0632\u0646\u062f\u0647<\/text>\n\u0646\u0627\u0648\u06af\u0627\u0646 UGV \u2014 LoRa \u2192 Gateway \u2192 Node.js \u2192 Leaflet \u0646\u0642\u0634\u0647<\/text>\n<\/svg><\/p>\n

    \u06a9\u062f Node.js \u2014 \u0633\u0631\u0648\u0631 Gateway<\/h2>\n
    \nconst express = require('express');\nconst { SerialPort } = require('serialport');\nconst WebSocket = require('ws');\nconst { ReadlineParser } = require('@serialport\/parser-readline');\n\nconst app = express();\nconst wss = new WebSocket.Server({ port: 8080 });\nconst fleet = {};  \/\/ { ugvId: { lat, lon, timestamp } }\n\n\/\/ \u0633\u0631\u06cc\u0627\u0644 Gateway LoRa (RPi + SX1278):\nconst port = new SerialPort({ path: '\/dev\/ttyUSB0', baudRate: 9600 });\nconst parser = port.pipe(new ReadlineParser({ delimiter: '\\n' }));\n\n\/\/ \u0641\u0631\u0645\u062a \u067e\u06a9\u062a LoRa \u0627\u0632 UGV: \"ID:01,35.744800,51.375300\"\nparser.on('data', (line) => {\n    const parts = line.trim().split(',');\n    if(parts.length === 3 && parts[0].startsWith('ID:')) {\n        const id = parts[0].split(':')[1];\n        const lat = parseFloat(parts[1]);\n        const lon = parseFloat(parts[2]);\n        if(!isNaN(lat) && !isNaN(lon)) {\n            fleet[id] = { lat, lon, ts: Date.now() };\n            \/\/ \u0627\u0631\u0633\u0627\u0644 \u0628\u0647 \u0647\u0645\u0647 \u0645\u0631\u0648\u0631\u06af\u0631\u0647\u0627:\n            wss.clients.forEach(c => {\n                if(c.readyState === WebSocket.OPEN)\n                    c.send(JSON.stringify({ id, lat, lon }));\n            });\n        }\n    }\n});\n\n\/\/ \u0635\u0641\u062d\u0647 \u0646\u0642\u0634\u0647:\napp.get('\/', (req, res) => res.sendFile(__dirname + '\/map.html'));\napp.get('\/api\/fleet', (req, res) => res.json(fleet));\napp.listen(3000, () => console.log('Fleet tracker: http:\/\/localhost:3000'));\n<\/code><\/pre>\n
    \u06a9\u062f Leaflet HTML \u2014 \u0646\u0642\u0634\u0647 \u0632\u0646\u062f\u0647<\/h2>\n
    \n<!-- map.html -->\n<link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet\/dist\/leaflet.css\">\n<script src=\"https:\/\/unpkg.com\/leaflet\/dist\/leaflet.js\"><\/script>\n<div id=\"map\" style=\"height:100vh\"><\/div>\n<script>\nconst map = L.map('map').setView([35.7448, 51.3753], 15);\nL.tileLayer('https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png').addTo(map);\n\nconst colors = ['red','blue','green','orange','purple'];\nconst markers = {};\n\nconst ws = new WebSocket('ws:\/\/localhost:8080');\nws.onmessage = (e) => {\n    const d = JSON.parse(e.data);\n    if(!markers[d.id]) {\n        const ci = Object.keys(markers).length % colors.length;\n        markers[d.id] = L.marker([d.lat, d.lon], {\n            title: 'UGV ' + d.id\n        }).addTo(map).bindPopup('UGV ' + d.id);\n    } else {\n        markers[d.id].setLatLng([d.lat, d.lon]);\n    }\n};\n<\/script>\n<\/code><\/pre>\n
    \u0686\u06a9\u200c\u0644\u06cc\u0633\u062a \u0633\u06cc\u0633\u062a\u0645<\/h2>\n\n\n\n\n\n\n\n\n
    \u0628\u0631\u0631\u0633\u06cc<\/th>\n\u062a\u0648\u0636\u06cc\u062d<\/th>\n<\/tr>\n<\/thead>\n
    Gateway \u067e\u06a9\u062a UGV \u0631\u0627 \u0645\u06cc\u200c\u06af\u06cc\u0631\u062f\u061f<\/td>\nSerial Monitor RPi<\/td>\n<\/tr>\n
    Node.js \u067e\u0627\u0631\u0633 \u0645\u06cc\u200c\u06a9\u0646\u062f\u061f<\/td>\nconsole.log fleet<\/td>\n<\/tr>\n
    \u0646\u0642\u0634\u0647 \u0631\u0648\u06cc \u0645\u0631\u0648\u0631\u06af\u0631 \u0628\u0627\u0632 \u0645\u06cc\u200c\u0634\u0648\u062f\u061f<\/td>\nhttp:\/\/localhost:3000<\/td>\n<\/tr>\n
    \u0645\u06a9\u0627\u0646\u200c\u0647\u0627 \u0628\u0647\u200c\u0631\u0648\u0632 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f\u061f<\/td>\nWebSocket test<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    \n\n\n\n\n\n\n\nUGV\u0647\u0627 GPS<\/text>\nLoRa TX<\/text>\nRPi Gateway<\/text>\nSX1278 RX<\/text>\nNode.js<\/text>\nWebSocket<\/text>\nLeaflet \u0646\u0642\u0634\u0647<\/text>\n\u0632\u0646\u062f\u0647<\/text>\n\u0646\u0627\u0648\u06af\u0627\u0646 \u2014 LoRa GPS \u2192 Node.js \u2192 WebSocket \u2192 Leaflet \u0646\u0642\u0634\u0647<\/text>\n<\/svg><\/p>\n
    \u0648\u06cc\u062f\u0626\u0648\u0647\u0627\u06cc \u0622\u0645\u0648\u0632\u0634\u06cc<\/h2>\n
    \n