如何从 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（输出）如下：

但是当使用 cycle.png 作为图像源时并没有给出最好的结果。

代码片段：

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

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

Answer 1

经过几天的研究，我想我找到了解决办法。另外，我想 sum-up SDF 图标的创建步骤。

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

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

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

如何创建？

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

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

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

更新

还有第三种方法可以实现这一点，使用旧的 tag of Maki Library, Where there is only one JS file sdf-render.js 可以将源 svg 转换为 sdf 图标。但请注意，此标签 (v0.5.0) 使用的是现在不支持的旧版本 JSDOM，要执行此文件，您必须使用 svgdom 和 @svgdotjs/svg.js 模块转换此文件的代码。

更多详情：

我做错了什么？

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

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

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

How can I create SDF-Icon's (used in Mapbox) from PNG?

javascript

mapbox

glyphicons

mapbox-gl-js