如何向QWebEngineView中嵌入的已渲染folium地图添加圆形标记？

实现方案 #

Folium底层基于Leaflet.js实现，你当前每次重新保存地图并调用setHtml的逻辑会触发全页面重绘，自然会有刷新问题。你不需要改动Folium侧的地图对象，直接通过QWebEngineView的JS执行能力调用页面内已有的Leaflet接口添加标记即可，全程无刷新，性能足以支撑每秒1次的实时打点需求。

修改后的完整代码 #

import sys
import io
import folium
from PyQt5.QtCore import Qt
from PyQt5.QtWidgets import QApplication, QWidget, QVBoxLayout, QMainWindow, QPushButton
from PyQt5.QtWebEngineWidgets import QWebEngineView


class Window(QMainWindow):
    def __init__(self):
        super().__init__()

        coordinate = (41.8828, 12.4761)

        self.m = folium.Map(
            zoom_start = 18,
            location = coordinate,
            control_scale=True,
            tiles = None
        )

        folium.raster_layers.TileLayer(
            tiles='http://mt1.google.com/vt/lyrs=m&h1=p1Z&x={x}&y={y}&z={z}',
            name='Standard Roadmap',
            attr = 'Google Map',
        ).add_to(self.m)

        folium.raster_layers.TileLayer(
            tiles='http://mt1.google.com/vt/lyrs=s&h1=p1Z&x={x}&y={y}&z={z}',
            name='Satellite Only',
            attr = 'Google Map',
        ).add_to(self.m)

        folium.raster_layers.TileLayer(
            tiles='http://mt1.google.com/vt/lyrs=y&h1=p1Z&x={x}&y={y}&z={z}',
            name='Hybrid',
            attr = 'Google Map',
        ).add_to(self.m)      

        folium.LayerControl().add_to(self.m)

        folium.Marker(coordinate).add_to(self.m)
                                
        self.data = io.BytesIO()
        self.m.save(self.data, close_file=False)

        widget=QWidget()
        vbox = QVBoxLayout()

        buttun1 = QPushButton("Insert Marker")
        buttun1.clicked.connect(self.insert_marker)

        self.webView = QWebEngineView()
        self.webView.setHtml(self.data.getvalue().decode())
        self.webView.setContextMenuPolicy(Qt.NoContextMenu)
    
        vbox.addWidget(buttun1)
        vbox.addWidget(self.webView)
        widget.setLayout(vbox)
        
        self.setCentralWidget(widget)
        
        self.setWindowTitle("App")
        
        self.setMinimumSize(1000, 600)
        self.showMaximized()

    def insert_marker(self):
        # 示例坐标，实际使用时替换为串口读取到的坐标即可
        lat, lng = 41.8829, 12.4766
        # 直接执行Leaflet原生JS代码添加标记，无刷新
        js_code = f"""
        L.circleMarker([{lat}, {lng}], {{
            radius: 2,
            weight: 5
        }}).addTo(map);
        """
        self.webView.page().runJavaScript(js_code)
       

App = QApplication(sys.argv)
window = Window()
sys.exit(App.exec())

说明 #

1. 代码中map是Folium生成HTML页面时默认创建的全局Leaflet地图实例变量，可直接调用
2. 你后续从串口获取到新的地理坐标后，直接替换insert_marker方法中的lat和lng变量即可完成标记新增
3. 该方案的更新延迟在毫秒级，完全满足每秒1次的实时更新需求

内容的提问来源于stack exchange，提问作者Amir