Mapbox gl js插值标记文本-偏移间距

Question

如何根据间距插入标记的文本偏移量？

插值法非常适用于：

'text-size': ['interpolate', ['linear'], ['zoom'], 10, 10, 18, 20],

但对于文本偏移，它不起作用。

'text-offset': ['interpolate', ['linear'], ['pitch'], 10, [0.2, 0], 18, [2, 0]],

我做错了什么？

'layout': {
          'text-field': ['get', 'name'],
          'text-font': [
                        'Open Sans Semibold',
                        'Arial Unicode MS Bold'
                       ],
          'text-size': ['interpolate', ['linear'], ['zoom'], 10, 10, 18, 20],
          'text-rotate': -90,
        //'text-offset': [2, 0],
          'text-offset': ['interpolate', ['linear'], ['pitch'], 10, [0.2, 0], 18, [2, 0]],
          'text-anchor': 'left',
          'text-allow-overlap': true
          },
   paint: {
          "text-color": "rgba(0, 100, 50, 0.9)",
          }

Answer 1

唯一允许的camera expression is zoom，因此您需要在每次移动后设置此text-offset值，如下所示：

const map = new mapboxgl.Map({});

map.on('pitch', () => {

  console.log('A pitch event occurred.');

  map.setLayoutProperty(layerId, 'text-offset', newValue)

  // More about setLayoutProperty https://docs.mapbox.com/mapbox-gl-js/api/map/#map#setlayoutproperty
});

如果您看到性能问题，则可能需要将map.on('pitch')更改为map.on('moveend')，并将map.getPitch()与以前的俯仰值进行比较，以评估是否应更改text-offset值。下面是每个API的更多信息：

Map.getPitch

Map.event:moveend

Map.event:pitch