You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在NiceGUI中获取并展示Folium地图的GeoJson点击数据

在NiceGUI中捕获Folium/Leaflet地图点击事件的GeoJson数据问题

我无法在NiceGUI界面的终端或屏幕控件中展示Folium/Leaflet地图点击事件的GeoJson数据。目前通过Folium API可以借助ui.notifications显示点击坐标,但没法在终端或ui.label里展示。我的核心需求是获取GeoJson自身的数据,既能在地图弹窗/提示框显示,也能在ui.label中展示并作为变量处理。不清楚在NiceGUI中嵌入HTML形式的地图时,该如何处理事件来捕获所需数据,以下是我的两次尝试代码:

第一次尝试代码

from nicegui import ui
import pyperclip
import requests
import folium

minnesota = [46.20622620486913, -94.82008523749973]
mn_counties = requests.get("https://github.com/andrewrfrench/minnesota/raw/fc5ae5b28bed642f0caefc675d13e541bdd517ed/mn_counties.geojson").json()

m = folium.Map(location=minnesota, zoom_start=5, tiles='cartodbpositron', attr='Map from CartoDB')
folium.GeoJson(mn_counties).add_to(m)
m.add_child(folium.ClickForLatLng())

ui.html(m._repr_html_())

coords = pyperclip.paste()
print(coords)

ui.run()

第二次实现弹窗和提示框的代码

from nicegui import ui
import folium
from folium.plugins import LocateControl
from branca.colormap import linear

minnesota = [46.20622620486913, -94.82008523749973]

m = folium.Map(location=minnesota, zoom_start=8, tiles='cartodbpositron', attr='Map from CartoDB')
LocateControl().add_to(m)
geojson_data = 'D_05_Basement_Geology_2023_WFL1_-8067690297665795411.geojson' # 本地地质数据集文件

popup = folium.GeoJsonPopup(
    fields=['UNITDESC', 'UNIT_COM']
    )

tooltip = folium.GeoJsonTooltip(
    fields=['ERA', 'DESCRIPTN'],
    aliases=['Era: ', 'Type: ']
    )

geo = folium.GeoJson(geojson_data, popup=popup, tooltip=tooltip, name="Hello", 
                     style_function=lambda feature: {
                    "fillColor": "#ffff00",
                    "color": "black",
                    "weight": 2,
                    "dashArray": "5, 5",
                    }).add_to(m)

m.save('m.html')

内容的提问来源于stack exchange,提问作者DrewGIS

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.12 16:35:18