如何从 Taipy 海图上的点检索信息

Question

在我们的 Taipy 应用程序中，我们集成了地图。在此地图上，有多个可用点，代表不同的位置或数据点。当用户与这些点之一交互时，会显示一个包含某些信息的悬停图层。

但是，除了悬停图层中已经呈现的详细信息之外，如何能够在交互时从此时获取其他信息。

from taipy import Gui

import pandas as pd
import numpy as np

cities = [
    {"name": "Tokyo", "lat": 35.6839, "lon": 139.7744, "population": 39105000},
    {"name": "Jakarta", "lat": -6.2146, "lon": 106.8451, "population": 35362000},
    {"name": "Xinyang", "lat": 32.1264, "lon": 114.0672, "population": 6109106},
]

# Convert to Pandas DataFrame
data = pd.DataFrame(cities)

solve = np.linalg.solve([[data["population"].min(), 1], [data["population"].max(), 1]], [5, 60])
data["size"] = data["population"].apply(lambda p: p*solve[0]+solve[1])

# Add a column holding the bubble hover texts
# Format is "<city name> [<population>]"
data["text"] = data.apply(lambda row: f"{row['name']} [{row['population']}]", axis=1)

marker = {
    "size": "size"
}

layout = {
    "dragmode": "zoom",
    "mapbox": { "style": "open-street-map"}
}

map = "<|{data}|chart|type=scattermapbox|mode=markers|lat=lat|lon=lon|marker={marker}|text=text|layout={layout}|>"


Gui(map).run()

Answer 1

您正在寻找的是图表的 'selected' 属性。您可以将此属性与 chart 中的 Python 变量绑定。这允许您检索已选择的点的索引，然后使用此信息执行您想要的操作。

看一下下面的代码，它创建了一个具有此属性的地图。当用户选择一个点时，会调用 on_change 回调。该函数中的一些打印语句表明我们检索了索引，然后可以找到关联的数据。

from taipy import Gui

import pandas as pd
import numpy as np

cities = [
    {"name": "Tokyo", "lat": 35.6839, "lon": 139.7744, "population": 39105000},
    {"name": "Jakarta", "lat": -6.2146, "lon": 106.8451, "population": 35362000},
    {"name": "Xinyang", "lat": 32.1264, "lon": 114.0672, "population": 6109106},
]

# Convert to Pandas DataFrame
data = pd.DataFrame(cities)

solve = np.linalg.solve([[data["population"].min(), 1], [data["population"].max(), 1]], [5, 60])
data["size"] = data["population"].apply(lambda p: p*solve[0]+solve[1])

# Add a column holding the bubble hover texts
# Format is "<city name> [<population>]"
data["text"] = data.apply(lambda row: f"{row['name']} [{row['population']}]", axis=1)

marker = {
    "size": "size"
}

layout = {
    "dragmode": "zoom",
    "mapbox": { "style": "open-street-map"}
}

selected_points = []

map = "<|{data}|chart|type=scattermapbox|mode=markers|lat=lat|lon=lon|marker={marker}|text=text|layout={layout}|selected={selected_points}|>"

def on_change(state, var_name, var_value):
    print("on_change", var_name, var_value)
    print(data.loc[state.selected_points,:])

Gui(map).run()