带有 QtWebChannel 的 folium 弹出窗口

2023-12-23

我正在 QtWebEngineView 中显示 folium 生成的 HTML(用于 leaflet.js)。在弹出窗口中,我有一个带有单击函数的按钮,该函数应该在 python 中调用回方法。但我似乎无法让频道正常工作。我不确定我是否在 QtWebChannel 或 JS 上做错了什么,或者可能是 folium?

我已将以下 JavaScript 注入到 QWebChannel.js 的末尾,该 JavaScript 在 QWebChannel.js 的末尾加载<body>

    var jshelper;
    new QWebChannel(qt.webChannelTransport, function (channel) {
        jshelper = channel.objects.jshelper;
    });

    document.getElementById("myBtn").addEventListener("click", function(){
        jshelper.pathSelected("Test!")
    });

这是我的 Python 代码

import sys
import os

import branca
from branca.element import *

import folium
from folium import plugins

from PyQt5 import QtWebEngineWidgets, QtCore, QtWidgets, QtWebChannel
from PyQt5.QtWidgets import QMainWindow, QAction, QMenu, QApplication, QWidget, QLineEdit, QLabel, QPushButton, QGridLayout, QDockWidget


class Example(QMainWindow):

    def __init__(self):
        super().__init__()

        self.setObjectName('Main')
        QtCore.QMetaObject.connectSlotsByName(self)

        self.view = QtWebEngineWidgets.QWebEngineView()
        self.view.setObjectName('MapWidget')

        self.window  = QWidget()
        self.window.setObjectName('MainWidget')
        self.layout = QGridLayout()
        self.window.setLayout(self.layout)
        self.layout.addWidget(self.view)
        self.setCentralWidget(self.window);

        self.channel = QtWebChannel.QWebChannel(self.view.page())
        self.view.page().setWebChannel(self.channel)
        self.channel.registerObject("jshelper", self)

        self.us = folium.Map(location=[36,-108],
                    zoom_start=5, tiles='StamenWatercolor')
        fastestRoute = folium.PolyLine( ((40,-110), (50,-110)),
                    weight=5,color='blue').add_to(self.us)
        f = Figure()
        f.html.add_child(Element('<button id="myBtn">Try it</button>'))
        f.html.add_child(Element('<p>\n TEST \n</p>'))
        link = JavascriptLink('https://rawgit.com/toknowjoyman/qwebch/master/qwebchannel.js')
        f.html.add_child(Element(link.render()))
        print (f.render())
        iframe = branca.element.IFrame(html=f.render(), width=500, height=300)
        popup = folium.Popup(iframe, max_width=500)
        fastestRoute.add_child(popup)
        self.us.save("html/test.html")
        self.view.load(QtCore.QUrl().fromLocalFile(
            os.path.split(os.path.abspath(__file__))[0]+r'/html/test.html'
        ))

        self.setGeometry(100,100,1200,900)
        self.show()

    @QtCore.pyqtSlot(str)
    def pathSelected(self, lat):
      print(lat)

if __name__ == '__main__':
    sys.argv.append("--remote-debugging-port=8000")
    app = QApplication(sys.argv)
    ex = Example()
    sys.exit(app.exec_())

非常感谢您帮助解决这个问题

让我知道我是否应该为弹出窗口或 leaflet.js api 发布 folium 生成的 html


qwebchannel.js你必须把它放在第一位,然后将它注入到弹出窗口中,然后将它注册到page().

为此,我们创建一个Figure (),并在标题中添加 qwebchannel.js

principal = Figure()
js = JavascriptLink(QUrl.fromLocalFile(self.htmlPath.absoluteFilePath("qwebchannel.js")).toString())
principal.header.add_child(Element(js.render()))

Note:在 qwebchannel 中不会与该按钮建立连接,因为它不存在。

为此,弹出窗口会传递一个新的 javascript,它将调用 popup.js,我将通过他的父窗口(主窗口)访问 jshelper。

popup.js

var jshelper = parent.jshelper;

document.getElementById("myBtn").addEventListener("click", function(){
    console.log("okay");
    jshelper.pathSelected("Test!");
});

.py

f = Figure()
f.html.add_child(Element('<button id="myBtn">Try it</button>'))
f.html.add_child(Element('<p>\n TEST \n</p>'))

link = JavascriptLink(QUrl.fromLocalFile(self.htmlPath.absoluteFilePath("popup.js")).toString())
f.html.add_child(Element(link.render()))

您可以在下面找到完整的示例link https://github.com/eyllanesc/stackoverflow/tree/master/questions/47494200/html/test.html.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

带有 QtWebChannel 的 folium 弹出窗口 的相关文章

随机推荐

  • 车把模板中 href 标签中的 Ember 插值

    我正在尝试建立一个到谷歌地图的简单链接 并将动态地址插入到 href 字段中 我已经尝试过下面的代码以及大量其他乱七八糟的东西 但没有运气 如何在车把 href 字段中插入动态 ember 字符串 我正在使用 ember 导轨和车把 如果我
  • 将二进制路径添加到 emacs $PATH

    我尝试了以下方法 setenv PATH concat getenv PATH mybin setq exec path append exec path mybin 但这从来没有奏效 我试过M 并键入二进制名称之一 并且在使用二进制名称进
  • Select2:init后如何设置数据?

    我需要在初始化 select2 后设置一个数据数组 所以我想做这样的事情 var select select select2 select data id 1 text value1 id 1 text value1 但我收到以下错误 当附
  • 连接字符串和实体框架的问题

    我有一个数据库 sql 2008 mdf 文件 一个带有 edmx 文件的类库项目 是使用向导创建的 所以连接字符串也是由向导制作的 该项目位于 teamfoundation 服务器上 我可以在编码时使用所有向导创建的对象 但是当我运行程序
  • DisplayFormat 未应用于十进制值

    我有一个模型属性 我正在尝试使用 EditorFor 模板进行渲染 并且我正在尝试使用 DisplayFormat 属性应用格式 然而 它根本不起作用 它完全被忽略了 这是我的模板 model System Decimal Html Tex
  • IoC:如何动态创建对象

    我无法理解如何在需要动态创建对象的场景中使用 IoC 假设我有这样的课程 abstract class Field public Field ICommandStack commandStack abstract class Entity
  • 使用 python 的树莓派旋转编码器脚本

    我有一个设置 其中有一个电机以每秒约 1 转的速度转动直径 5 厘米的轴 我需要在预定的转数后停止电机 现在假设是 10 转 我使用的传感器机制只是一个磁铁和簧片开关 以下脚本可以很好地记录每次触发开关的情况 import RPi GPIO
  • Android SQLite 数据库损坏

    这个链接准确地描述了我的问题 http old nabble com Android database corruption td28044218 html a28044218 http old nabble com Android dat
  • 如何在postgresql中使用设置种子选择可重复的随机数?

    我想要实现的是为流程选择一个控制组 为此 我使用 random 为了调试 一致性 我希望能够以可重复的方式设置随机数 意思是 一旦它为用户 123 分配随机数 0 001 我就运行查询 在不同的时间 我删除以前的数据 调用相同的查询 并再次
  • 如何从应用程序设置 Azure (webapp) 接收数据到我的 webjob

    我用 C 创建了一个 Azure WebJob 我在 Azure 上有一个 Web 应用程序 我将 WebJob 添加到了我的订阅中 一切都很好 但在应用程序设置中我添加了一个新条目 例如
  • C 比较两个位图的最快方法

    有两个字符数组形式的位图数组 有数百万条记录 使用 C 来比较它们的最快方法是什么 我可以想象在 for 循环中一次使用按位运算符异或 1 个字节 关于位图的重要一点 算法运行的 1 到 10 次中 位图可能会有所不同 大多数时候它们都是一
  • async void 方法每次调用时都会创建一个新线程吗?

    我有以下场景 async void DoStuff button1 Click s p gt DoStuff 我不确定当我打电话时会发生什么async void方法 而第一次调用仍然不完整 该调用是否会在每次调用时创建一个新线程 还是会销毁
  • 将 jar 库导入 android-studio

    android studio 0 2 7 Fedora 18 Hello 我正在尝试将 jtwitter jar 添加到我的项目中 首先我尝试执行以下操作 1 Drag the jtwitter jar into the root dire
  • 使用 Wagtail 页面或 Django 模型的指南?

    例如 我想使用wagtail建立一个电子商务网站 其中一个组件是订单 我认为 order 不应该是 wagtail Page 而是简单的 Django 模型 见下面的代码 from django db import models from
  • 如何计算两个国家到国家、国家到城市、城市到城市之间的距离? [关闭]

    很难说出这里问的是什么 这个问题是含糊的 模糊的 不完整的 过于宽泛的或修辞性的 无法以目前的形式得到合理的回答 如需帮助澄清此问题以便重新打开 访问帮助中心 help reopen questions 如何计算两个国家到国家 国家到城市
  • 加载sklearn模型后无法进行预测

    我使用 Scikit Learn 创建了一个 ML 模型并保存了它 现在 当我加载模型时 我在转换和预测方面遇到了麻烦 我在 DataFrame 中有 4 个功能 前两个特征是文本特征 另外两个特征是数字特征 结果列为 1 或 0 为了训练
  • 在 Laravel 中使用列中的联接和逗号分隔值执行查询

    我有桌子orders其中有列文件 该列保存文件 ID 它们以逗号分隔 第二个表是documents 表名称 订单 orders id order details file id 1 some details 1 2 表名称 文档 id na
  • 使用 gorilla mux 提供静态 html 文件

    我正在尝试根据路线提供不同的 HTML 文件 路由器对于 工作正常 并且它服务于index html 然而 当转到 download 等任何其他路径时 它也会呈现index html 即使要提供的文件名为share html 我在这里做错了
  • NextJs:具有动态路由的静态导出

    我对文档有点困惑 不确定我是否可以尝试做的事情 Goal 静态导出 NextJS 应用程序并将其托管在 netlify 上 允许用户创建帖子并提供指向这些有效帖子的链接 例如 用户创建一个新帖子 id 为 2 这篇文章应该可以在以下位置公开
  • 带有 QtWebChannel 的 folium 弹出窗口

    我正在 QtWebEngineView 中显示 folium 生成的 HTML 用于 leaflet js 在弹出窗口中 我有一个带有单击函数的按钮 该函数应该在 python 中调用回方法 但我似乎无法让频道正常工作 我不确定我是否在 Q