1. 其他教程
  2. 地图绘图组件

如何使用 Plot 组件绘制地图

引言

本指南将介绍如何使用 Gradio 中的 gradio.Plot 组件绘制地理数据到地图上。Gradio 的 Plot 组件支持 Matplotlib、Bokeh 和 Plotly。本指南将以 Plotly 为例。Plotly 允许开发人员轻松地使用其地理数据创建各种地图。请点击 这里 查看一些示例。

概述

我们将使用纽约市的 Airbnb 数据集，该数据集托管在 Kaggle 上，点击 这里。为了方便使用和下载，我已将其上传到 Hugging Face Hub 上的一个数据集中 这里。利用这些数据，我们将把 Airbnb 的位置绘制在地图上，并允许根据价格和位置进行筛选。下面是我们即将构建的演示。⚡️

第一步 - 加载 CSV 数据 💾

让我们开始从 Hugging Face Hub 加载 Airbnb NYC 数据。

from datasets import load_dataset

dataset = load_dataset("gradio/NYC-Airbnb-Open-Data", split="train")
df = dataset.to_pandas()

def filter_map(min_price, max_price, boroughs):
    new_df = df[(df['neighbourhood_group'].isin(boroughs)) &
            (df['price'] > min_price) & (df['price'] < max_price)]
    names = new_df["name"].tolist()
    prices = new_df["price"].tolist()
    text_list = [(names[i], prices[i]) for i in range(0, len(names))]

在上面的代码中，我们首先将 CSV 数据加载到 pandas DataFrame 中。让我们开始定义一个函数，我们将用它作为 Gradio 应用程序的预测函数。该函数将接受最小价格和最大价格范围以及要筛选地图结果的区域列表。我们可以使用传入的值（min_price、max_price 和 boroughs 列表）来筛选 DataFrame 并创建 new_df。接下来，我们将创建 text_list，其中包含每个 Airbnb 的名称和价格，用作地图上的标签。

第二步 - 地图图形 🌐

Plotly 使处理地图变得容易。让我们看看下面如何创建地图图形。

import plotly.graph_objects as go

fig = go.Figure(go.Scattermapbox(
            customdata=text_list,
            lat=new_df['latitude'].tolist(),
            lon=new_df['longitude'].tolist(),
            mode='markers',
            marker=go.scattermapbox.Marker(
                size=6
            ),
            hoverinfo="text",
            hovertemplate='<b>Name</b>: %{customdata[0]}<br><b>Price</b>: $%{customdata[1]}'
        ))

fig.update_layout(
    mapbox_style="open-street-map",
    hovermode='closest',
    mapbox=dict(
        bearing=0,
        center=go.layout.mapbox.Center(
            lat=40.67,
            lon=-73.90
        ),
        pitch=0,
        zoom=9
    ),
)

上面，我们通过传入纬度和经度列表来绘制标记，创建了一个 Mapbox 散点图。我们还传入了名称和价格的自定义数据，以便在悬停时显示更多信息。接下来，我们使用 update_layout 指定缩放和居中等其他地图设置。

有关使用 Mapbox 和 Plotly 进行散点图的更多信息，请点击 这里。

第三步 - Gradio 应用 ⚡️

我们将使用两个 gr.Number 组件和一个 gr.CheckboxGroup 组件，允许用户指定价格范围和区域位置。然后，我们将使用 gr.Plot 组件作为我们之前创建的 Plotly + Mapbox 地图的输出。

with gr.Blocks() as demo:
    with gr.Column():
        with gr.Row():
            min_price = gr.Number(value=250, label="Minimum Price")
            max_price = gr.Number(value=1000, label="Maximum Price")
        boroughs = gr.CheckboxGroup(choices=["Queens", "Brooklyn", "Manhattan", "Bronx", "Staten Island"], value=["Queens", "Brooklyn"], label="Select Boroughs:")
        btn = gr.Button(value="Update Filter")
        map = gr.Plot()
    demo.load(filter_map, [min_price, max_price, boroughs], map)
    btn.click(filter_map, [min_price, max_price, boroughs], map)

我们使用 gr.Column 和 gr.Row 来布局这些组件，并且还将添加事件触发器，用于演示首次加载时和“更新过滤器”按钮被单击时，以触发地图更新新过滤器。

以下是完整的演示代码


import gradio as gr
import plotly.graph_objects as go
from datasets import load_dataset

dataset = load_dataset("gradio/NYC-Airbnb-Open-Data", split="train")
df = dataset.to_pandas()

def filter_map(min_price, max_price, boroughs):

    filtered_df = df[(df['neighbourhood_group'].isin(boroughs)) &
          (df['price'] > min_price) & (df['price'] < max_price)]
    names = filtered_df["name"].tolist()
    prices = filtered_df["price"].tolist()
    text_list = [(names[i], prices[i]) for i in range(0, len(names))]
    fig = go.Figure(go.Scattermapbox(
            customdata=text_list,
            lat=filtered_df['latitude'].tolist(),
            lon=filtered_df['longitude'].tolist(),
            mode='markers',
            marker=go.scattermapbox.Marker(
                size=6
            ),
            hoverinfo="text",
            hovertemplate='<b>Name</b>: %{customdata[0]}<br><b>Price</b>: $%{customdata[1]}'
        ))

    fig.update_layout(
        mapbox_style="open-street-map",
        hovermode='closest',
        mapbox=dict(
            bearing=0,
            center=go.layout.mapbox.Center(
                lat=40.67,
                lon=-73.90
            ),
            pitch=0,
            zoom=9
        ),
    )

    return fig

with gr.Blocks() as demo:
    with gr.Column():
        with gr.Row():
            min_price = gr.Number(value=250, label="Minimum Price")
            max_price = gr.Number(value=1000, label="Maximum Price")
        boroughs = gr.CheckboxGroup(choices=["Queens", "Brooklyn", "Manhattan", "Bronx", "Staten Island"], value=["Queens", "Brooklyn"], label="Select Boroughs:")
        btn = gr.Button(value="Update Filter")
        map = gr.Plot()
    demo.load(filter_map, [min_price, max_price, boroughs], map)
    btn.click(filter_map, [min_price, max_price, boroughs], map)

demo.launch()

第四步 - 部署 🤗

如果运行上面的代码，您的应用程序将在本地启动。您还可以通过将 share=True 参数传递给 launch 来获得临时共享链接。

但是，如果您想要一个永久的部署解决方案怎么办？让我们将 Gradio 应用程序部署到免费的 Hugging Face Spaces 平台。

如果您以前没有使用过 Spaces，请在此处按照先前的指南 操作。

结论 🎉

您就完成了！这就是构建地图演示所需的所有代码。

这是演示的链接 地图演示 和 完整代码（在 Hugging Face Spaces 上）

←

命名实体识别

运行后台任务

→