Как я могу создать SDF-иконки (используемые в Mapbox) из PNG? - PullRequest
Новая
       158

Как я могу создать SDF-иконки (используемые в Mapbox) из PNG?

2 голосов
/ 07 августа 2020

Моя задача - изменить цвет значка изображения в 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), находится ниже:

enter image description here

cycle.png(OUTPUT) is below:

enter image description here

But while using the cycle.png as an Image src is not giving the finest results.

введите описание изображения здесь

Фрагмент кода: 

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

Я прошу кого-нибудь, пожалуйста, помогите мне, если я здесь что-то делаю не так, или есть ли какой-либо правильный способ создать sdf-значок для рендеринга правильно.

1 Ответ

2 голосов
/ 08 августа 2020

После нескольких дней исследований, думаю, я нашел решение. Кроме того, я хочу подвести итог этапам создания значков SDF.

Во-первых, сначала расскажем, что такое SDF простыми словами: SDF - это растровый формат, оптимизированный для отображения измененных размеров, перекрашенных , и повернутые растровые изображения. Они одноцветные.

Использование: Это мое первое взаимодействие с SDF в MAPBOX.

Причина в том, что мы не можем изменить цвет значка (если svg или обычный растр png) в слое символов, для этого вам необходимо предоставить формат SDF (специализированный png). (https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#paint -symbol-icon-color )

How to создать?

  1. 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

Что я делал не так?

Ответ: Перед выполнением команды image-sdf на png (обратите внимание: это должен быть черно-белый растровый контур). Измените размер (увеличьте) примерно до 40-50%.

Как и в моем случае, я изменил размер обычного растрового png, и результат был потрясающим. Посмотри. (Обратите внимание: я не менял ни слова в коде и использовал ту же команду image-sdf)

введите описание изображения здесь

...