如何在 deck.gl 的图标层中使用 svg

Question

我的测试代码

     const layer = 
    new IconLayer({
      id: 'icon-layer',
      data,
      getIcon: d=> ({data : 'data/test.svg', width:128, height:128}),
      getSize: d => Math.max(2, Math.min(d.contributions / 1000 * 25, 25)),
      pickable: true,
      sizeScale: 15,
      getPosition: d => [127.14467,31.39953]
    });

我收到一个错误。

icon-manager.js:366 DOMException: The source image cannot be decoded.

如何在 deck.gl 的图标层中使用 svg?

Answer 1

根据 API reference，getIcon 回调的返回对象必须包含 url 属性。来自文档：

getIcon: d => ({
  url: d.avatar_url,
  width: 128,
  height: 128,
  anchorY: 128
}),

在您的示例中，您需要将 url 属性重命名为 data。

Answer 2

您可以将自己的 svg 上传到 deck.gl，它不必只是 url。

看看这个：

Answer 3

我检查了 svg 文件。 svg文件中除英文和数字外的所有语言不得包含。例如：韩国人、日本人…… 如果只有英文版，就可以。

如何在 deck.gl 的图标层中使用 svg

how to Using svg in iconlayer of deck.gl

javascript

node.js

svg

deck.gl