将 JavaScript 添加到 Folium 地图

Question

我正在开发一个使用 folium 和 Flask 制作地图的项目，我正在尝试添加自己的 javascript 来向图块添加一些动画以使其一一出现。 问题是如何使用 python Flask 将自定义 JavaScript 添加到地图中

因为我在下面的代码中尝试过这种方式：

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'))

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

Answer 1

我已经找到了如何在内联 js 中包含 JavaScript 和 CSS 外部链接：

首先，我们可以将 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 elements 并检查 Folium repo

1. Folium 回购
2. 布兰卡元素

Answer 2

最好使用：

对于CSS

  map.get_root().header.add_child(folium.CssLink('css/style.css'))

对于JS

  map.get_root().html.add_child(folium.JavascriptLink('js/folium.js'))

仅使用

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

您可能会收到错误消息： 名称错误：名称“JavascriptLink”未定义

Answer 3

我按照你说的做了，但我仍然明白 Node.js：未捕获的引用错误：地图未定义

添加Leaflet-Ruler插件

    m.get_root().header.add_child(folium.CssLink("https://unpkg.com/[email protected]/dist/leaflet.css"))
    m.get_root().header.add_child(folium.CssLink("https://cdn.rawgit.com/gokertanrisever/leaflet-ruler/master/src/leaflet-ruler.css"))
    m.get_root().html.add_child(folium.JavascriptLink("https://unpkg.com/[email protected]/dist/leaflet.js"))
    m.get_root().html.add_child(folium.JavascriptLink("https://cdn.rawgit.com/gokertanrisever/leaflet-ruler/master/src/leaflet-ruler.js"))
    my_js = '''
    L.control.ruler().addTo(map);
    '''
    m.get_root().script.add_child(folium.Element(my_js))