如何在Superset的Deck.gl散点图地图中添加自定义图标？

问题背景 #

我是Superset新手，用Deck.gl散点图做了一张基于Mapbox的地图，通过数据库加载位置数据，目前每个位置都是默认圆点，想换成自定义图标。我尝试了以下操作但未成功：

已尝试的代码 #

1. DATA INTERCEPTOR 代码：

data => data.map(d => ({
    ...d,
    iconUrl: "https://www.flaticon.com/free-icon/store_2639570?k=1695617505142&log-in=google"
}));

2. TOOLTIP GENERATOR 代码：

d => {
  const name = d.object.extraProps.name; 
  const iconUrl = d.object.icon;

  const tooltipHtml = `
    <div>
      <img src="${iconUrl}" alt="Custom Icon" width="32" height="32" />
      <strong>${name}</strong>
    </div>
  `;

  return tooltipHtml;
}

当前地图仍显示默认圆点，自定义图标未生效。

解决方案 #

1. 切换图层类型 #

Deck.gl的ScatterplotLayer仅支持渲染圆点，要显示图标必须切换为IconLayer：
在Superset可视化配置的图层设置里，把图层类型从ScatterplotLayer改为IconLayer。

2. 修正字段名不匹配问题 #

Data Interceptor里添加的字段是iconUrl，但Tooltip代码里取的是d.object.icon，字段名不一致，统一修改为iconUrl：

// 修正后的Tooltip Generator代码
d => {
  const name = d.object.extraProps.name; 
  const iconUrl = d.object.iconUrl; // 匹配Data Interceptor里的字段名

  const tooltipHtml = `
    <div>
      <img src="${iconUrl}" alt="自定义图标" width="32" height="32" />
      <strong>${name}</strong>
    </div>
  `;

  return tooltipHtml;
}

3. 使用正确的图标图片URL #

你用的Flaticon链接是登录跳转页，不是直接的图片地址，需要替换为图标实际的图片直链：

• 下载图标后上传到可公开访问的静态资源服务，复制图片URL；
• 或者在Flaticon获取图标直接链接（注意部分图标需要授权）。
  修正后的Data Interceptor代码示例：

data => data.map(d => ({
    ...d,
    // 替换为你的图标直链
    iconUrl: "https://example.com/your-store-icon.png"
}));

4. 配置IconLayer参数 #

切换到IconLayer后，需配置以下核心参数：

• Icon URL Field: 选择iconUrl字段；
• Size: 设置图标显示尺寸（如32）；
• Position: 保持和原散点图一致的经纬度字段映射。

内容的提问来源于stack exchange，提问作者Nihara Bamunusinghe