Блог

Я хотел бы добавить только один слой для текстовых символов, которые добавляются из FeatureCollection. С каждым объектом связано несколько размеров текста и стилей, которые хранятся в их свойствах. Я использую управляемые данными выражения, доступные с Mapbox, для назначения стилей.

В свойствах каждого объекта есть массив с именем ‘text_size’, который содержит интерполированный размер текста, предназначенный для извлечения с ['get', 'text_size'] помощью выражения. Ниже показан пример того, что хранится в свойстве ‘text_size’ объекта.

 text_size: [
  'interpolate',
  ['linear'],
  ['zoom'],
  18,
  0,
  20,
  8,
  22,
  20
]
 

Проблема ['get', 'text_size'] в том, что выражение, похоже, не работает для установки значения. Пример кода с использованием выражения, которое не работает, показан ниже. Ошибок не возникает, размер текста просто устанавливается на размер по умолчанию.

 this.map.addLayer({
        id: `text-dynamic-layer`,
        type: 'symbol',
        source: `dynamic-text-source`,
        layout: {
          'text-size': ['get', 'text_size'],
          'text-font': ['Open Sans Regular'],
          'text-offset': [0.85, -1.7],
          'text-anchor': 'top',
          'text-max-width': 8,
          'text-field': '{name}'
        },
        paint: <any>{
          'text-color': '#FFF',
        },
      });
 

Те же значения работают, когда массив применяется напрямую, а не извлекается с ['get', 'text_size'] помощью выражения. Ниже показан пример используемого кода, который корректно работает при добавлении слоя без выражения.

 this.map.addLayer({
        id: `text-dynamic-layer`,
        type: 'symbol',
        source: `dynamic-text-source`,
        layout: {
          'text-size': [
            'interpolate',
            ['linear'],
            ['zoom'],
            18,
            0,
            20,
            8,
            22,
            20
          ],
          'text-font': ['Open Sans Regular'],
          'text-offset': [0.85, -1.7],
          'text-anchor': 'top',
          'text-max-width': 8,
          'text-field': '{name}'
        },
        paint: <any>{
          'text-color': '#FFF',
        },
      });
 

Есть идеи, что может быть причиной этого? Заранее спасибо за любые ответы.

Вы не можете сохранить выражение для объекта и интерпретировать его таким образом. Ну, не afaik.

Если действительно важно, чтобы каждая функция могла устанавливать свой собственный размер шрифта для этих трех разных уровней масштабирования, я бы предложил сохранить их напрямую и иметь выражение типа:

"font-size": ['interpolate', ['linear'], ['zoom'], 18, ['get', 'font18'], 20, ['get', 'font20'], 22, ['get', 'font22']]