使用deck.gl GeoJsonLayer加载SVG图标报错：无效编码图像数据

报错deck: Invalid encoded image data.的核心原因是你生成的SVG存在语法错误，导致编码后的data URI无法被deck.gl正确解析，具体问题和修复步骤如下：

1. SVG标签未正确闭合 #

你的createSVGIcon函数返回的SVG中，<svg>和<g>标签都缺少结尾的>，这会直接导致SVG结构无效：

• 原错误代码：<svg width="10" height="10" viewBox="0 0 2.6458333 2.6458333" xmlns="http://www.w3.org/2000/svg"
• 修复后：<svg width="10" height="10" viewBox="0 0 2.6458333 2.6458333" xmlns="http://www.w3.org/2000/svg">
• 同理，<g style="fill:none;stroke:#000000;" 需要改为 <g style="fill:none;stroke:#000000;">

2. 清理多余空白字符（可选但推荐） #

返回的SVG包含大量缩进和换行，虽然不影响语法，但会增加data URI的长度，建议通过trim()移除首尾空白，减少不必要的编码开销。

修复后的完整代码 #

function createSVGIcon() {
  return `
  <svg width="10" height="10" viewBox="0 0 2.6458333 2.6458333" xmlns="http://www.w3.org/2000/svg">
    <g style="fill:none;stroke:#000000;">
      <circle cx="1.3229166" cy="1.3229166" r="1.190625" /> 
      <path d="M 1.6466734,1.0981537 H 2.0416815 V 1.5476795 H 1.6493533 m -0.6463795,0 H 0.60415173 V 1.0981537 H 1.0029738" />
      <circle cx="1.3229166" cy="1.3229166" r="0.39687499" />
      <path d="M 1.3229166,0.92604163 V 0.61376006" />
      <path d="M 0.87562292,0.56136592 1.7693729,0.55388104" />
    </g>
  </svg>
  `.trim();
}

new GeoJsonLayer({
  id: 'geojson-layer',
  data: ...,
  pointType: 'icon',
  getIcon: f => {
    if (f.properties.class === 'icon_point') {
      return {
        url: `data:image/svg+xml;charset=utf-8,${encodeURIComponent(createSVGIcon())}`,
        width: 10,
        height: 10,
      };
    }
  },
});

额外验证技巧 #

如果修复后仍有问题，可以单独测试生成的SVG字符串：

• 调用createSVGIcon()获取字符串，复制到浏览器地址栏，前缀加上data:image/svg+xml;charset=utf-8,并手动编码，查看是否能正常显示图标。
• 确保getIcon返回的width和height与SVG定义的尺寸匹配。

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