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

Posted 2023-05-06

【中文标题】Mapbox gl js插入标记文本偏移间距

【英文标题】：Mapbox gl js interpolate marker text-offset pitch

【发布时间】：2021-10-22 14:27:53

【问题描述】：

如何根据音高插入标记的文本偏移量？

插值非常适合：

'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)",
          

【参考方案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