使 Folium 地图可从嵌入它的页面进行交互

Question

我正在开发一款前端使用ReactJS的应用程序。

我使用Folium生成不同类型的地图(choropleth/heatmap/markercluster(。

我的目标是能够从应用程序的其他组件控制地图的一些功能(例如，在表格中选择标记或区域时高亮显示标记或区域(。

我首先尝试在应用程序的主JS代码中检索地图id，但我意识到Folium将地图渲染到iframe中，这阻止了添加与应用程序其他部分的任何交互。我希望我可以在Branca图形之外渲染Folium地图，这似乎添加了iframe，但它似乎不起作用，而且无论如何都只是一个丑陋的破解。

我想我不是第一个愿意实现这样的目标的人，但我找不到任何解决方案。

我如何才能实现我想要做的事情？谢谢

Answer 1

好的，我已经做了，但它非常可怕。

document.getElementById('testBtn').onclick= () => {
// Get the 'window' object of the iFrame
const mapWindow = document.getElementById('mapFrame').contentWindow;
let keys = Object.keys(mapWindow);
// Folium seems to generate a random code for the map object, so I just
// looked for a property of the window object starting with 'map_'
let mapObjKey = keys.filter( name => name.startsWith("map_"))[0];
const mapObj = mapWindow[mapObjKey];
mapObj.zoomIn();
};

然后，您可以使用所有的传单方法。