0

Map ( OpenStreetMap を使用) を表示する Flask で単純なアプリケーション ( Main.py ) を作成しました。これで、車両の位置 (緯度と経度)をリアルタイムで取得 できるコード ( test.py ) ができました。

フラスコアプリケーションに（ test.py ）を実装し、 Ajax、JQueryを使用したいと考えています。( map.html )に座標を送信し、地図上に車両のマーカーを表示して、 3 秒ごとに位置 を取得したいと考えています 。.

- マップをレンダリングする Flask アプリケーション ( Main.py )

Main.py

import json
from google.transit import gtfs_realtime_pb2
from google.protobuf.json_format import MessageToDict
# Imports requests module
import requests
import time
from flask import Flask, redirect, jsonify, url_for, session, escape, request
from flask import Flask, render_template, redirect, request, url_for, jsonify
import cgi
import jsonify
from google.transit import gtfs_realtime_pb2



form = cgi.FieldStorage()
app = Flask(__name__)

@app.route('/', methods=['GET', 'POST'])
def my_map():
    return render_template('map.html')


if __name__ == "__main__":
    app.run(debug=True, use_reloader=True)

- マーカーの位置をレンダリングするための Openstreetmap を含む HTML ファイル (ハードコーディングされた緯度経度) ( map.html )

map.html

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width" />
    <title>Test</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin=""></script>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet-routing-machine@latest/dist/leaflet-routing-machine.css" />
    <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script>
    <script src="https://unpkg.com/leaflet-routing-machine@latest/dist/leaflet-routing-machine.js">
    </script>
    <script src="static/js/signUp.js"></script>
    <style>
    #mapid {
        height: 680px;
    }
    </style>
</head>

<body>
    <div id="mapid"></div>
    <div id="distancetravelled"></div>
    <script>
    var mymap = L.map('mapid').setView([Lat, Lon], 13);
    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}{r}.png', {
        attribution: '© OpenStreetMap contributors'
    }).addTo(mymap);
    var control = L.Routing.control({
        waypoints: [

            L.latLng(15.5556936, 73.856255),
            L.latLng(15.5556936, 73.856255),
        ],
        routeWhileDragging: true
    }).addTo(mymap);
    console.log(control);
    </script>
</body>

</html>

-車両の緯度と経度を表示するPython コード ( test.py ) (このコードは、完全に別のコードであるフラスコ アプリケーションには実装されていません)

test.py

# Import related to GTFS
from google.transit import gtfs_realtime_pb2
from google.protobuf.json_format import MessageToDict
# Imports requests module
import requests
import time

gps_result = {}

def run():
    # Get gps data
    feed = gtfs_realtime_pb2.FeedMessage()

    #  GTFS username and password
    username = "(confidential)"
    password = "(confidential)"

    response = requests.get('http://117/tms/data/gtfs/vehicle-positions.pb', auth=(username, password))
    feed.ParseFromString(response.content)
    feed = MessageToDict(feed)

    for entity in feed['entity']:
        data = entity['vehicle']['position']

        if entity['vehicle']['vehicle']['id'] == "ANT59":
            print(entity['vehicle']['vehicle']['id'], " = ", data)
            data.update({"route": entity['vehicle']['trip']['tripId']})
            gps_result.update({entity['vehicle']['vehicle']['id'] : data})
    print(data)

for i in range(1, 100):
    run()
    time.sleep(3)

  • test.py の出力

    {'緯度': 18.500315, '経度': 73.86604}

    {'緯度': 18.501158、'経度': 73.86779}

    {'緯度': 18.501158、'経度': 73.86779}

上記のコードをフラスコ アプリケーションに実装し、マップ上で車両のリアルタイムの位置をマークしたいと考えています。

4

0 に答える 0