Карта меняет цвет круга динамически при изменении значения свойства

Question

Я пытаюсь сделать слой mapbox, чтобы изменить цвет кругов, когда я изменяю значение свойства. Но цвет круга не изменился.

Я использую mapbox-gl-draw

Вот jsbin: https://jsbin.com/lojuwak/edit?html,output

Здесь стиль слоя с выражениями в кружок-цвет, чтобы изменить цвет в соответствии со значением

{
  'id': 'gl-draw-point-inactive',
  'type': 'circle',
  'filter': ['all',
    ['==', 'active', 'false'],
    ['==', '$type', 'Point'],
    ['==', 'meta', 'feature'],
    ['!=', 'mode', 'static']
  ],
  'paint': {
    'circle-radius': 12,
    'circle-blur': 0.5,      
    'circle-color': ["case",
        ['!',['has', 'isProcessed']], '#FF0000',
        '#214AED'
      ]
  }

Мои данные geojson, у которых есть свойство isProcessed, определенное как not.

Эта часть работает нормально, когда я изначально загружаю геойсон.

Проблема возникает, когда я изменяю добавление свойств выбранной функции

Я добавляю свойство isProcessed функции, выполнив:

selectedFeature = this.draw.getSelected();
selectedFeature.features[0].properties.isProcessed = true;
this.draw.add(selectedFeature);

Но цвет обновленной функции не меняется.

Какой шаг я пропустил?

Спасибо

Answer 1

Если для opts.userProperties задано значение true, свойства объекта также будут доступны для стилизации. Все пользовательские свойства имеют префикс user_, чтобы убедиться, что они не конфликтуют со свойствами Draw.

[ https://github.com/mapbox/mapbox-gl-draw/blob/master/docs/API.md#styling-draw ]

Так что вам нужно добавить user_ Префикс к свойству в стилях:

'paint': {
    'circle-radius': 12,
    'circle-blur': 0.5,      
    'circle-color': ["case",
        ['!',['has', 'user_isProcessed']], '#FF0000',
        '#214AED'
      ]
}

[ https://jsfiddle.net/c9kdf51t/ ]