使 Folium map 可從嵌入它的頁面進行交互

Question

我正在開發一個使用 ReactJS 作為前端的應用程序。

我正在使用 Folium 生成不同類型的地圖（choropleth / heatmap / markercluster）。

我的目標是能夠從應用程序的其他組件控制 map 的某些功能（例如，在表單中選擇標記或區域時突出顯示它們）。

我首先嘗試在我的應用程序的主要 JS 代碼中檢索 map id，但我意識到 Folium 將地圖渲染到 iframe 中，這會阻止添加與應用程序的 rest 的任何交互性。 我希望我可以在似乎添加了 iframe 的布蘭卡人物之外渲染 Folium map，但它似乎不起作用，而且無論如何只是一個丑陋的黑客。

我想我不是第一個願意實現這樣的事情的人，但我找不到任何解決方案。

我怎樣才能實現我想要做的事情？ 謝謝。

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();
};

然后，您可以使用所有 Leaflet 方法。