Слеза, включая значок в Mapbox-gl - PullRequest
Новая
       81

Слеза, включая значок в Mapbox-gl

0 голосов
/ 23 апреля 2020

В моем коде JS я хотел бы создать маркер слезинки и добавить к нему значок, используя addLayer при добавлении набора плиток, меняя значок в зависимости от некоторых значений свойств.

При добавлении слоя там является настройкой изображения значка в параметрах макета для выбора значка. С этим я могу выбрать маркер слезинки Маки-15 или выбрать один из других значков маки, которые поддерживаются в настоящее время.

Что бы я хотел сделать, поместите другие значки поверх слезы и раскрасьте слезинка для маркера classi c icon-on-to-of-teardrop.

Я также обнаружил, что цвет значка в опциях рисования для этой слезинки maki ничего не делает - он каждый раз получается черным. 

const layerDefinition = {
    'id': layer.id,
    'type': 'symbol',
    'source': layer.name,
    'source-layer': layer.name,
    'layout': {
      'icon-image':  'marker-15' ,
      'icon-size': 1
    },
    'paint': {
      'icon-color': "red"
    }
  }

map.addLayer(layerDefinition, insertLayerId)

1 Ответ

0 голосов
/ 24 апреля 2020

Вам нужно будет создать значок SVG для каждой комбинации цвета / значка.

Редактор иконок Maki может сделать это за вас, но поддерживает только квадрат или круг, не слезоточивый фон.

Makiwich - еще один вариант, но требуется некоторое кодирование, чтобы помочь генерировать эти слезиные иконки с произвольным значком и цветом.

Затем можно использовать эти генерировать значки как маркер или как значок символа .

icon-color можно использовать только с иконками SDF (см. https://docs.mapbox.com/mapbox-gl-js/api/#map # addimage , вы должны передать { sdf: true } в качестве опции для addImage, а не для значков SVG. Некоторое обсуждение о поддержке icon-color для значков на основе SVG: https://github.com/mapbox/mapbox-gl-js/issues/3605. Несколько значков как часть значок символа (так что у вас может быть фон слезы, а другой значок внутри него) обсуждается в https://github.com/mapbox/mapbox-gl-js/issues/4366.

...