如何從 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 然后在 Z1D78DC8ED51214E5018B5114FE 上渲染后沒有給我最好的結果。

我正在使用的命令

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 庫的舊標簽來實現這一點，其中只有一個 JS 文件sdf-render.js可以將您的源 svg 轉換為 sdf 圖標。 但請注意，此標簽（v0.5.0）使用的是舊版本的 JSDOM，現在不支持，要執行此文件，您必須使用 svgdom 和 @svgdotjs/svg.js 模塊轉換此文件的代碼。

更多細節： 框出現在 Mapbox 中的圖標周圍 sdf = true

我做錯了什么？

答：在 png 上執行 image-sdf 命令之前（請注意：它必須是黑白光柵路徑）。 將其大小調整（增加）到 40-50% 左右。

就像我的情況一樣，我調整了普通光柵 png 的大小，結果非常棒。 看一看。 （請注意：我沒有更改代碼中的一個字並使用了相同的 image-sdf 命令）

Answer 2

另一件要探索的事情是給你的圖像一個尺寸。 我想使用 svg 作為我的標記圖像，並更改：

let img = new Image();
//to
let img = new Image(256, 256);

得到了更好的結果-