mapbox-gl js 对 "text-offset" 使用步进斜坡

Question

我在 layout-block 字段 text-offset.

的 mapbox gl 层中使用

layout: { // Working
  'text-field': '{point_count_abbreviated}',
  'text-size': ['step', ['get', 'point_count'], 18, 10, 14, 100, 12],
  'text-offset': [-0.84, 0.23],
}

这按预期工作，但现在我想根据属性更改偏移量。这对于 'text-size' 非常有效，但对于文本偏移我找不到正确的语法。我尝试了以下方法：

layout: { // NOT working
  'text-field': '{point_count_abbreviated}',
  'text-size': ['step', ['get', 'point_count'], 18, 10, 14, 100, 12],
  'text-offset': [
    // [-0.84, 0.23],
    ['step', ['get', 'point_count'], -0.84, 10, -0.94, 100, -0.99],
    ['step', ['get', 'point_count'], 0.23, 10, 0.25, 100, 0.28],
  ],
},

也许 mapbox-gl 目前不支持文本偏移处的步进斜坡？

错误信息：

Error: layers.cluster-offline.layout.text-offset[0]: number expected, array found

layout: { // NOT working
  'text-field': '{point_count_abbreviated}',
  'text-size': ['step', ['get', 'point_count'], 18, 10, 14, 100, 12],
  'text-offset': [
    // [-0.84, 0.23],
    ['literal', 
       ['step', ['get', 'point_count'], -0.84, 10, -0.94, 100, -0.99], 
       ['step', ['get', 'point_count'], 0.23, 10, 0.25, 100, 0.28]
    ],
  ],
},

错误信息：

Error: layers.cluster-offline.layout.text-offset: array length 2 expected, length 1 found

layout: { // NOT working
  'text-field': '{point_count_abbreviated}',
  'text-size': ['step', ['get', 'point_count'], 18, 10, 14, 100, 12],
  'text-offset': [
    ['literal', ['step', ['get', 'point_count'], -0.84, 10, -0.94, 100, -0.99]], 
    ['literal', ['step', ['get', 'point_count'], 0.23, 10, 0.25, 100, 0.28]],
  ],
},

错误信息：

Error: layers.cluster-offline.layout.text-offset[0]: number expected, array found

Answer 1

您需要用文字类型转换器包装您的文本偏移值：

'text-offset': [
  'step',                         // Expression type (discrete matching)
  ['get', 'point_count'],         // Variable to compare to
  ['literal', [-0.84, 0.23]],     // Default value (if none of the following match)
  10, ['literal', [-0.94, 0.25]], // if point_count === 10: [-0.94, 0.25]
  100, ['literal', [-0.99, 0.28]] // if point_count === 100: [-0.94, 0.28]
]

Stop output values must be literal values (i.e. not functions or expressions)

source

此处，[-0.84, 0.23] 子表达式对于 Mapbox 可能有歧义，因此您需要明确告知它们的类型。

Answer 2

在版本1.6.1中，我没有测试过其他版本。

只需要在properties,

中设置一个数组

比如"offsetdate": [-1,0],

然后使用"text-offset": ['get', 'offsetdate']获取数据。

mapbox-gl js 对 "text-offset" 使用步进斜坡

mapbox-gl js use step ramp for "text-offset"

javascript

mapbox

mapbox-gl

mapbox-gl-js

mapbox-marker