javascript - 将 JavaScript 添加到 Folium map

Question

我正在做一个使用folium和flask制作 map 的项目，我正在尝试添加我自己的javascript来为瓷砖添加一些动画以逐个显示。
问题是如何使用 python flask 将我的自定义 javascript 添加到 map 中

正如我在下面的代码中尝试过的那样:

from branca.element import Element
m = folium.Map()
map_id = m.get_name()

my_js = """
const items = document.querySelectorAll('.leaflet-interactive')
 items.forEach((one) => {
one.style.visibility = 'hidden'
 })
if (items.length > 0) {
if (items.length !== 0) {
  let i = 0
const m = setInterval(function () {
  if (i < items.length) {
    items[i].style.visibility = 'visible'
    i++
  }
  console.log('now i =' + i + ' || the  number of circle = ' + items.length)
  if (i === items.length) {
    clearInterval(m)
    console.log('now cleared')
  }
  }, 1000)
  }
  }
  """.format(map_id)
  e = Element(my_js)
  html = m.get_root()
  html.script.get_root().render()
  # Insert new element or custom JS
  html.script._children[e.get_name()] = e

m.save('mymap.html')

也尝试过这样的其他方式:

base_map.get_root().html.add_child(folium.JavascriptLink('static/custom.js'))

它注入(inject)到模板的主体，但它仍然不起作用

Answer 1

我已经找到了如何包含 JavaScript 和 CSS 外部链接以及内联 js:
首先，我们可以将CSS链接添加到页面的标题

m.get_root().header.add_child(CssLink('./static/style.css'))

然后，这是将 JavaScript 外部链接插入到 folium 的代码

m.get_root().html.add_child(JavascriptLink('./static/js.js'))

最后，添加到之前生成的 Folium 脚本中

my_js = '''
console.log('working perfectly')
'''
m.get_root().script.add_child(Element(my_js))

帮助我理解如何做到这一点的资源是阅读 throw branca 元素和检查 Folium repo

Folium repo

Branca Element