如何将自定义 HTML 添加到 pyqtlet？答案

【问题标题】：How can I add custom HTML to pyqtlet?如何将自定义 HTML 添加到 pyqtlet？
【发布时间】：2021-12-10 07:15:00
【问题描述】：

我的实际问题要具体得多，但我认为更一般的答案将有助于我应对未来的需求。

我实际上需要为leaflet 底层pyqtlet 启用leaflet-extras 插件。

文档说：

下载leaflet-providers.js并在包含Leaflet后将其包含在您的页面中，例如：

<head>
  ...
  <script src="http://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
  <script src="js/leaflet-providers.js"></script>
</head>

然后：

// add Stamen Watercolor to map.
L.tileLayer.provider('Stamen.Watercolor').addTo(map);

当然，这一切都是假设您正在编写一个 JavaScript 应用程序，而我在 pyqtlet 环境中。

我试图以一种非常丑陋的方式应对：

下载leaflet-providers.js到我的venv/lib/python3.8/site-packages/pyqtlet/web/modules
将<script src="modules/leaflet-providers.js"></script> 添加到我的venv/lib/python3.8/site-packages/pyqtlet/web/map.html
使用self.map.runJavaScript("L.tileLayer.provider('Stamen.Watercolor'). addTo(map)") 激活所需的tileLayer

这确实有效，但我确信有一种更简洁的方法可以实现同样的效果。

欢迎任何提示。

【问题讨论】：

标签： javascript pyqt leaflet pyqtlet

【解决方案1】：

一个简单的解决方案是读取 .js 并运行它：

with open("/path/of/leaflet-providers.js") as f:
    self.map.runJavaScript(f.read())
    self.map.runJavaScript("L.tileLayer.provider('Stamen.Watercolor'). addTo(map)")

另一个类似的选项是使用 document.createElement:

with open("/path/of/leaflet-providers.js") as f:
    code = f.read()
    SCRIPT = """
    const script = document.createElement('script');
    script.type = 'text/javascript';
    document.head.appendChild(script);
    script.text = `%s`;
    """ % (
        code,
    )
    self.map.runJavaScript(SCRIPT)
    self.map.runJavaScript(
        "L.tileLayer.provider('Stamen.Watercolor'). addTo(map)"
    )

【讨论】：

谢谢。使用第一个解决方案（似乎更简单）我会加载 javascript 代码吗？我的意思是：如果我以后需要再次使用相同的插件，我可以只使用self.map.runJavaScript("L.tileLayer.provider('Another.choice'). addTo(map)") 还是需要再次阅读leaflet-providers.js？
@ZioByte 我没有测试过，但你可能不需要上传、测试和验证。第二种我觉得不可能有这个缺点，都是简单的方法，没什么神奇的。