为 Mapbox 集群中的点添加不透明度

Question

为了改善深色地图上 Mapbox 集群的用户体验，有没有办法为点添加不同的不透明度？

map.addLayer({
  id: 'clusters',
  type: 'circle',
  source: 'counties',
  filter: ['has', 'point_count'],
  paint: {
    'circle-color': [
      'step',
      ['get', 'point_count'],
      '#0000FF',  # Less transparency
      10,
      '#0000FF',  # Little transparency
      50,
      '#0000FF'   # No transparency
    ],
    'circle-radius': [
      'step',
      ['get', 'point_count'],
      10,
      100,
      50,
      1000,
      100
    ]
  }
});

Answer 1

您可以使用 circle-opacity:

'circle-color': '#0000FF',
'circle-opacity': [
    'step',
    ['get', 'point_count'],
    0.25,
    10,
    0.5,
    50,
    0.75
],

或 rgba

'circle-color': [
    'step',
    ['get', 'point_count'],
    'rgba(0, 0, 255, 0.25)',
    10,
    'rgba(0, 0, 255, 0.5)',
    50,
    'rgba(0, 0, 255, 0.75)',
],

为 Mapbox 集群中的点添加不透明度

Adding opacity to the dots in a Mapbox cluster

mapbox

mapbox-gl-js