如何在pyqtlet中添加自定义HTML并启用leaflet-providers插件

你原来修改site-packages源码的方案会因为依赖重装、项目迁移失效，以下是两种更稳定的实现方式：

方案1：动态注入JS代码（无需修改任何模板文件） #

该方案完全在项目业务代码中实现，不需要调整pyqtlet的默认配置：

• 将下载的leaflet-providers.js存放在项目自有静态资源目录，例如./static/plugins/
• 初始化Map实例后，先读取JS文件内容注入页面，再执行插件调用逻辑，示例代码：

# 读取插件JS内容
with open("./static/plugins/leaflet-providers.js", "r", encoding="utf-8") as f:
    plugin_content = f.read()

# 注入插件
self.map.runJavaScript(plugin_content)

# 调用插件加载图层
self.map.runJavaScript("L.tileLayer.provider('Stamen.Watercolor').addTo(map)")

如果出现调用时报L.tileLayer.provider不存在的问题，可以将图层调用逻辑放在runJavaScript的回调中，确认插件注入完成后再执行。

方案2：自定义HTML模板（适合需要加载多个插件的场景） #

如果需要加载多个leaflet插件，频繁注入JS比较繁琐，可以自定义页面模板：

• 从pyqtlet的安装目录中复制默认的map.html文件到项目自有模板目录，例如./template/custom_map.html
• 在自定义的HTML文件中，在leaflet.js引入的代码行后添加插件引入语句：

<script src="../static/plugins/leaflet-providers.js"></script>

• 初始化Map前修改默认模板路径，后续正常调用即可：

import os
from pyqtlet import Map

# 替换默认模板路径
Map._html_path = os.path.abspath("./template/custom_map.html")

# 正常初始化地图
self.map = Map()

# 直接调用插件
self.map.runJavaScript("L.tileLayer.provider('Stamen.Watercolor').addTo(map)")

两种方案都不需要修改虚拟环境中的依赖文件，所有自定义内容都跟随项目存储，适配依赖重装、项目迁移等场景。

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