【PyQt地图轨迹绘制】

已于 2024-03-31 16:14:14 修改
阅读量2.3k 收藏 31
点赞数 3
文章标签： pyqt python
于 2023-08-22 11:18:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43762434/article/details/132421645
版权

PyQt地图

一、问题引入

最近在做一个PyQt的地图实时轨迹绘制的项目，在这个过程中遇到过一些问题，比如PyQt如何加载除地图，如何在地图上根据经纬度变化面画轨迹等等。

二、加载地图

首先就是地图加载的问题，我前后采用了两种方法来加载地图，包括离线文件方式加载和动态渲染方式加载。

1.离线文件方式加载地图

离线文件方式的思路就是首先保存一份地图的离线文件，然后再在PyQt的窗口中加载出来。

from PyQt5.QtCore import *
from PyQt5.QtWidgets import *
from PyQt5.QtWebEngineWidgets import *
import sys
import os
import folium

class MainWindow(QMainWindow):
    def __init__(self):
        super(QMainWindow, self).__init__()
        self.setWindowTitle('地图显示')
        self.resize(1000, 640)

        layout = QVBoxLayout()

        self.qwebengine = QWebEngineView(self)
        layout.addWidget(self.qwebengine)

        self.container = QWidget(self)
        self.container.setLayout(layout)
        self.setCentralWidget(self.container)
        self.generate_map()

    def generate_map(self):
        location = [126.632628,45.743215]
        location.reverse()
        # 调用高德地图http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}
        Map = folium.Map(location,
                         zoom_start=16,
                         control_scale=True,
                         tiles='http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}',
                         attr='default')
        Map.add_child(folium.LatLngPopup())  # 显示鼠标点击点经纬度
        Map.add_child(folium.ClickForMarker(popup='Waypoint'))  # 将鼠标点击点添加到地图上

        # 标记一个实心圆
        folium.CircleMarker(
            location,
            radius=1,
            popup='popup',
            color='#DC143C',  # 圈的颜色
            fill=True,
            fill_color='#6495E'  # 填充颜色
        ).add_to(Map)
        Map.save("map.html")
        # 在QWebEngineView中加载网址
        path = "file:\\" + os.getcwd() + "\\map.html"
        path = path.replace('\\', '/')
        self.qwebengine.load(QUrl(path))

if __name__ == '__main__':
    app = QApplication(sys.argv)
    win = MainWindow()
    win.show()
    sys.exit(app.exec_())

运行结果
在这里插入图片描述
这种方法的思路很简单，但是过程比较繁琐，而且不好对地图添加轨迹，因为每次都要重新加载离线文件，会产生很明显的地图刷新效果，影响观感。
所以有另一种思路：不保存离线地图文件，直接将地图文件数据导入到PyQt的窗口进行显示，后续再利用JavaScrip语句操作地图数据，进行轨迹绘制，能很好的解决离线刷新的问题。

2.动态渲染方式

动态渲染的方式是利用leaflet和JavaScrip语句进行的.

import sys
from PyQt5.QtWidgets import QApplication, QMainWindow, QVBoxLayout, QWidget
from PyQt5.QtWebEngineWidgets import QWebEngineView
from PyQt5.QtCore import QUrl

class RealTimeMapApp(QMainWindow):
    def __init__(self):
        super(RealTimeMapApp, self).__init__()
        self.setWindowTitle('地图显示')
        self.resize(800, 600)

        layout = QVBoxLayout()

        self.qwebengine = QWebEngineView(self)
        layout.addWidget(self.qwebengine)

        self.container = QWidget(self)
        self.container.setLayout(layout)
        self.setCentralWidget(self.container)

        self.qwebengine.setHtml(self.generate_map_html(), baseUrl=QUrl.fromLocalFile('.'))

    def generate_map_html(self):
        html = """
        <!DOCTYPE html>
        <html>
        <head>
            <meta charset="utf-8" />
            <title>Real-time Map</title>
            <style>
                body, html, #map {
                    height: 100%;
                    margin: 0;
                }
            </style>
            <!-- 引入 Leaflet 的 CSS 和 JavaScript 文件 -->
            <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css">
            <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
        </head>
        <body>
            <div id="map" style="width: 100%; height: 100vh;"></div>
            <script>
                var mymap = L.map('map').setView([45.743215, 126.632628], 15);
                L.tileLayer("http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=2&scale=3&style=8&x={x}&y={y}&z={z}",{
                            attribution: '&copy; 高德地图',
                            maxZoom: 18,
                            minZoom: 3,
                            subdomains: "1234",
                            zoom: 3
                        }).addTo(mymap);
            </script>
        </body>
        </html>
        """
        return html

if __name__ == '__main__':
    app = QApplication(sys.argv)
    win = RealTimeMapApp()
    win.show()
    sys.exit(app.exec_())

运行结果：
在这里插入图片描述

三、轨迹绘制

加载完图片后就需要进行轨迹绘制了，因为采用第一种方式会有刷新的效果，因此这里不再展示第一种方式的轨迹绘制效果。
利用第二种方式加载完成地图后，根据经纬度列表，就能在地图上画出轨迹图了。这里采用随机路径的方法进行绘制，如果手头上有路径经纬度数据，也可以用手头的数据进行路径轨迹绘制。
位置坐标图需要先下载leafle相关文件，下载地址https://leafletjs.com/，下载完成后需要将文件夹内部的文件复制到项目里面。

import sys
from PyQt5.QtWidgets import QApplication, QMainWindow, QVBoxLayout, QWidget
from PyQt5.QtWebEngineWidgets import QWebEngineView
from PyQt5.QtCore import QTimer, QUrl
import random

class RealTimeMapApp(QMainWindow):
    def __init__(self):
        super(RealTimeMapApp, self).__init__()
        self.setWindowTitle('实时地图轨迹')
        self.resize(800, 600)

        layout = QVBoxLayout()

        self.qwebengine = QWebEngineView(self)
        layout.addWidget(self.qwebengine)

        self.container = QWidget(self)
        self.container.setLayout(layout)
        self.setCentralWidget(self.container)

        self.qwebengine.setHtml(self.generate_map_html(), baseUrl=QUrl.fromLocalFile('.'))

        self.new_point = None
        self.old_point = None
        self.old_label = None  # 用于保存旧点的经纬度标签对象

        self.timer = QTimer(self)
        self.timer.timeout.connect(self.update_map)
        self.timer.start(1000)  # 每秒更新一次地图

    def generate_map_html(self):
        html = """
        <!DOCTYPE html>
        <html>
        <head>
            <meta charset="utf-8" />
            <title>Real-time Map</title>
            <style>
                body, html, #map {
                    height: 100%;
                    margin: 0;
                }
            </style>
            <!-- 引入 Leaflet 的 CSS 和 JavaScript 文件 -->
            <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css">
            <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
        </head>
        <body>
            <div id="map" style="width: 100%; height: 100vh;"></div>
            <script>
                var mymap = L.map('map').setView([45.743215, 126.632628], 14);
                L.tileLayer("http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=2&scale=3&style=8&x={x}&y={y}&z={z}",{
                            attribution: '&copy; 高德地图',
                            maxZoom: 18,
                            minZoom: 3,
                            subdomains: "1234",
                            zoom: 3
                        }).addTo(mymap);
                var pathMarkers = L.layerGroup().addTo(mymap);

                var newMarkerIcon = L.icon({
                    iconUrl: 'C:/Users/22285/Desktop/test_python/leaflet/images/marker-icon.png',  // 用于新的轨迹点（注意修改路径）
                    iconSize: [16, 16],
                    iconAnchor: [8, 8]
                });

                var oldMarkerOptions = {
                    radius: 5,
                    fillColor: 'blue',
                    color: 'blue',
                    fillOpacity: 1
                };

                var oldMarker;  // 声明在外部以持久保存旧点的图标对象

                function addPoint(lat, lng, isNew) {
                    var latlng = new L.LatLng(lat, lng);
                    if (isNew) {
                        if (oldMarker) {
                            pathMarkers.removeLayer(oldMarker);  // 删除旧点的图标
                            mymap.removeLayer(oldLabel);  // 删除旧点的经纬度标签
                        }
                        oldMarker = L.marker(latlng, { icon: newMarkerIcon }).addTo(pathMarkers);
var label = L.divIcon({
  className: 'label',
  html: `<div style="white-space: nowrap; margin-left: 1em;">Lat: ${lat.toFixed(7)} Lng: ${lng.toFixed(7)}</div>`
});




                        var newLabel = L.marker(latlng, { icon: label }).addTo(pathMarkers);
                        oldLabel = newLabel;  // 保存旧点的经纬度标签对象
                    } else {
                        var marker = L.circleMarker(latlng, oldMarkerOptions).addTo(pathMarkers);
                    }
                    mymap.panTo(latlng);
                }
            </script>
        </body>
        </html>
        """
        return html

    def update_map(self):
        new_point = [45.743215 + random.uniform(-0.01, 0.01), 126.632628 + random.uniform(-0.01, 0.01)]
        if self.new_point is not None:
            self.old_point = self.new_point  # 保存上一个新点的坐标
        self.new_point = new_point

        # 使用 JavaScript 添加新的轨迹点到地图上x
        javascript = f"addPoint({new_point[0]}, {new_point[1]}, true);"
        self.qwebengine.page().runJavaScript(javascript)

        if self.old_point is not None:
            # 使用 JavaScript 添加旧的轨迹点到地图上，并连接成线
            lineCoordinates = "[[" + f"{self.old_point[0]},{self.old_point[1]}], [{new_point[0]},{new_point[1]}]]"
            javascript = f"var line = L.polyline({lineCoordinates}, {{color: 'red'}}).addTo(mymap);"
            self.qwebengine.page().runJavaScript(javascript)


if __name__ == '__main__':
    app = QApplication(sys.argv)
    win = RealTimeMapApp()
    win.show()
    sys.exit(app.exec_())

注意：图标路径需修改。
运行结果：
https://photos.wjwzww.cn/movie/20240331_160810%20-%20Trim.mp4

学习是正确的
关注
  • 3
    点赞
  • 踩
  • 31
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
LED灯光点捕获+基于QT平台绘制轨迹(1)
02-09
通过OpenCV中的blur模糊 / canny边缘检测 / findCoutours查找轮廓 / minEnclosingCircle寻找最小面积的包围圆，来跟踪LED灯的运动轨迹，也就是手写笔的书写轨迹。
python画地图轨迹图_python在openstreetmap地图上绘制路线图的实现
weixin_39906192的博客
11-27 1600
利用python进行经纬度轨迹展示嘿！各位好久不见，距离第一次发博客已经过去两年多了，本人也从本科生变成了研究生，好了书归正传，最近在做一个关于航班滑行路径轨迹的项目，目的是将航班的经纬度数据在地图上显现出来并生成一条路径，以方便日后的滑行路径优化与分析。本文所用的语言为python，使用的是folium包，数据在flightaware网站上可以找到，使用这个包之前还是需要先进行pip insta...
python利用cartopy绘制带有经纬度的地图
最新发布
qq_32649321的博客
06-26 376
【代码】python利用cartopy绘制带有经纬度的地图。
Python绘制GPS轨迹图
热门推荐
Scarlett的博客
06-16 1万+
import folium import os def draw_gps(locations1, locations2,color1,color2): """ 绘制gps轨迹图 :param locations: list, 需要绘制轨迹的经纬度信息，格式为[[lat1, lon1], [lat2, lon2], ...] :param output_path: str, 轨迹图保存路径 :param file_name: str, 轨迹图保存文件名 :re
python 3d绘图_Python制作炫酷的个人3D动态足迹图
weixin_39693438的博客
11-27 1187
点击上方【牵引小哥讲Python】，关注回复【资源】领取学习资源！以下内容来源：python数据分析之禅作者：作者小dull鸟大家周末好啊，今天给大家带来一篇3D个人足迹图制作教程，先看看成果图：下面给大家详细介绍一下制作步骤：一、准备足迹城市数据因为本次用pyecharts画3D足迹图的数据接口是列表形式：所以我们要把城市的经纬度信息找出来，如果城市比较少可以手动搜索填写，如果城市比较...
Qt加载离线地图
pzs0221的专栏
04-24 7593
一、例子 QWebEngineView加载谷歌离线地图 二、
[QT] QT加载百度离线地图（二）
qq_39295354的博客
05-11 6208
感谢小郭软件提供的离线地图下载工具，这个失效了，文章末尾会附上下载链接，使用方式参见链接 一、下载离线地图相关文件 确保文件夹baiduLX_JS-master\bmap-offline\下的tiles、tiles_hybird、tiles_satellite中是空的，我们需要下载我们自己的地图文件 如何下载地图？ （1） 双击运行BMapTool程序， （2） 切换导航到“下载地图” （3） 点击区域下载，在地图上画个框后，弹出窗口中选择瓦片级数 （4） 选择目录并点击确认后，打开下载工具 （5） 在下载
【PyQt5】在地图上绘制运行轨迹（前后端分离）
ChaoChao66666的博客
12-10 877
【代码】【PyQt5】在地图上绘制运行轨迹（前后端分离）
pyqt5 地图可视化 网页地图 folium
cj12345657582255的博客
07-04 5417
实验任务（实验题目、目的） Implement a shortest path algorithm and apply it to the national railway system.以全国主要城市为图的顶点, 铁路连接为图的边, 距离作为加权, 设计完成一个最短路径自动查找系统. 输入为出发城市和目标城市, 输出为最短路径和距离. 任务分析 实现思路 在研究、挖掘GPS位置数据、轨迹数据的过程中，地理信息的可视化展示是非常关键的一步。 folium是js上著名的地理信息可视化库leaflet.js为P
实战PyQt5: 132-一个轻量级的地图应用
seniorwizard的专栏
07-01 2165
使用PyQt中，QNetworkDiskCache提供了基本的磁盘缓存计数，实现一个轻量级的地图应用。
Pyqt5绘制基础图形
07-07
在PyQt5中，`QPainter`是一个非常重要的类，用于进行高级的图形绘制操作，如标题中提到的点、线、圆、矩形、扇形、弧形、路径和多边形等。这个资源提供了关于如何使用PyQt5进行图形绘制的基础教程。 1. **QPainter*...
Pyqt5 Qpainter绘制基础图形.doc
02-13
"PyQt5 QPainter 绘制基础图形" PyQt5 是一个基于 Qt 应用程序开发框架的 Python 绑定库，它提供了一个强大的 GUI 编程环境。QPainter 是 PyQt5 中的一个基本绘制类，负责将图形绘制到屏幕上。本文将详细介绍 PyQt5...
基于Python PyQt5实现绘制三维地形图项目源码
11-16
总的来说，"基于Python PyQt5实现绘制三维地形图项目源码"是一个综合性的实践案例，它涵盖了Python GUI编程、3D图形渲染、数据处理和用户交互等多个领域。通过学习和分析这个项目，开发者不仅可以提升Python编程技能...
pyqt5：Qpainter绘制基础图形，鼠标拖动
07-07
在PyQt5中，QPainter是一个非常重要的模块，它提供了丰富的绘图功能，可以用于在窗口、图片、打印机等画布上绘制各种图形。本文将深入讲解如何利用QPainter绘制基础图形，并结合鼠标事件实现图形的动态拖动。 首先...
python pyqt5 离线地图 界面设计
03-31
python代码 pyqt5实现界面设计 调用离线地图 可以通过输入经纬度获取位置
Python根据经纬度在地图上显示（folium）
qq_742234984的博客
05-27 5794
Python根据经纬度在地图上显示（folium）
Qt实现显示三维航迹（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
07-23 1001
Qt实现显示三维航迹（附完整源码）
pyqt graphic view绘制光谱
09-07
PyQt是一个强大的Python图形界面工具包，其中包含了一个名为Graphic View的模块，可以用于绘制光谱。 要绘制光谱，首先需要获取光谱数据。可以使用Python中的科学计算库（如NumPy）或专门的光谱处理库来读取和处理光谱数据。例如，可以使用NumPy库的loadtxt函数读取一个文本文件中的光谱数据，并将其存储为一个NumPy数组。 接下来，可以使用PyQt的Graphic View模块来创建一个绘图场景（QGraphicsScene）和一个视图窗口（QGraphicsView）。可以使用下面的代码来创建一个简单的图形视图： ``` import sys from PyQt5.QtWidgets import QApplication, QGraphicsScene, QGraphicsView from PyQt5.QtCore import Qt, QPointF from PyQt5.QtGui import QPen # 创建一个应用程序对象 app = QApplication(sys.argv) # 创建一个绘图场景 scene = QGraphicsScene() scene.setSceneRect(0, 0, 500, 300) # 创建一个视图窗口 view = QGraphicsView(scene) view.setWindowTitle("光谱绘制") view.resize(500, 300) view.show() # 绘制光谱 spectrum = [50, 100, 150, 200, 250, 200, 150, 100, 50] # 假设这是光谱数据 # 计算每个点的坐标 points = [] x_increment = 500 / (len(spectrum) - 1) y_scale = 3 for i, intensity in enumerate(spectrum): x = i * x_increment y = 300 - intensity * y_scale points.append(QPointF(x, y)) # 创建一个画笔，设置线条颜色和宽度 pen = QPen(Qt.blue) pen.setWidth(2) # 绘制光谱曲线 scene.addPolyline(points, pen) # 运行应用程序 sys.exit(app.exec_()) ``` 以上代码创建了一个500x300的视图窗口，并绘制了一条光谱曲线。光谱数据存储在`spectrum`列表中，通过计算每个数据点的坐标，然后使用`addPolyline`方法在绘图场景中绘制曲线。 可以根据实际光谱数据的特点，调整视图窗口的大小、曲线的颜色、线条的宽度等参数，以满足具体需求。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值