如何从 PNG 创建 SDF-Icon（在 Mapbox 中使用）？

Question

我的任务是更改 Mapbox 中图标图像的图标颜色。mapbox 允许这样做的唯一方法是使用 sdf-icons( https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#paint-symbol-icon-color )。

通过一小时的搜索，我找不到实现这一目标的最简单方法。我发现有一个 npm 模块是https://www.npmjs.com/package/image-sdf但是在 png 上使用它的命令将其转换为 sdf 然后在地图上渲染后并没有给我最好的结果。

我正在使用的命令

image-sdf cycle-initial.png --spread 5 --downscale 1 --color black > cycle.png

cycle-initial.png(INPUT) 如下：

cycle.png(OUTPUT) 如下：

但是在使用 cycle.png 作为 Image src 时并没有给出最好的结果。

代码片段：

const img = new Image();
img.addEventListener('load', () => {
            this.mapInstance.addImage('circle-icon', img, { sdf: true });
        }, false);
img.src = cycle;

我请求是否有人，如果我在这里做错了什么，请帮助我，或者是否有任何正确的方法来创建 sdf-icon 以正确呈现。

Answer 1

经过几天的研究，我想我找到了解决方案。另外，我想总结一下SDF图标的创建步骤。

首先，简单来说什么是SDF：SDF 是一种光栅格式，它针对显示调整大小、重新着色和旋转的光栅图像进行了优化。它们是单色的。

用法： 这是我在 MAPBOX 中与 SDF 的第一次交互。

原因是我们无法更改符号层中图标的颜色（如果是 svg 或普通光栅 png），您必须提供 SDF（专用 png）格式才能实现。（https://docs.mapbox.com/mapbox- gl-js/style-spec/layers/#paint-symbol-icon-color )

如何创造？

1. npm 模块：https : //www.npmjs.com/package/image-sdf命令：

image-sdf input.png --spread 10 --downscale 1 --color black > output.png

2. Imagemagick：https : //imagemagick.org/script/download.php。ImageMagick 允许您使用一个命令执行此操作：

convert in.png -filter Jinc -resize 400% -threshold 30% \( +clone -negate -morphology Distance Euclidean -level 50%,-50% \) -morphology Distance Euclidean -compose Plus -composite -level 45%,55% -resize 25% out.png

更新

3. 还有第三种方法可以通过使用Maki Library 的旧标签来实现这一点，其中只有一个 JS 文件sdf-render.js可以将您的源 svg 转换为 sdf 图标。但请注意，这个标签（v0.5.0）使用的是现在不支持的旧版 JSDOM，要执行这个文件，你必须使用 svgdom 和 @svgdotjs/svg.js 模块转换这个文件的代码。

更多细节： 框出现在 sdf = true 上 Mapbox 中的图标周围

我做错了什么？

答：在对 png 执行 image-sdf 命令之前（请注意：它必须是黑白光栅路径）。将其大小调整（增加）到 40-50% 左右。

就像在我的情况下一样，我调整了普通光栅 png 的大小，结果非常棒。看一看。（请注意：我没有更改代码中的单词并使用相同的 image-sdf 命令）