【问题标题】:Mapbox Get Expression with Interpolated Text SizesMapbox 使用插值文本大小获取表达式
【发布时间】:2020-12-16 18:18:12
【问题描述】:

我只想为从 FeatureCollection 添加的文本符号添加一个图层。有多种文本大小和样式与每个功能相关联,保存在它们的属性中。我一直在使用 Mapbox 提供的数据驱动表达式来分配样式。

在每个功能的属性中都有一个名为“text_size”的数组,其中包含一个插值文本大小,旨在通过['get', 'text_size'] 表达式检索。下面显示了特征的“text_size”属性中包含的内容的示例。

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

问题是['get', 'text_size'] 表达式似乎无法设置值。使用 not working 表达式的示例代码如下所示。没有抛出任何错误,文本大小只是设置为默认大小。

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',
        },
      });

任何想法可能导致这种情况?提前感谢您的任何回复。

【问题讨论】:

    标签: angular mapbox geojson mapbox-gl-js data-driven


    【解决方案1】:

    您不能将表达式存储在要素上并以这种方式对其进行解释。好吧,不是afaik。

    如果每个功能都可以为这三个不同的缩放级别设置自己的字体大小真的很重要,我建议直接存储它们并使用如下表达式:

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

    【讨论】:

    • 谢谢,我确实想知道这是否真的可行。感谢您提供可能的解决方案,但不幸的是,由于每个功能也使用了不同的缩放级别,我想我只需要创建多个图层。
    猜你喜欢
    • 1970-01-01
    • 2012-06-12
    • 1970-01-01
    • 2021-01-06
    • 2020-12-12
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多