问:如何为Mapbox圆圈层添加"淡入"过渡效果

Question

我正在批量加载Geojson中的积分,并希望在积分首次出现在Mapbox中时添加"fadeIn"效果或动画.

this.map.addLayer({
  id: 'points',
  type: 'circle',
  paint: {
    'circle-radius-transition': {duration: 300},
    'circle-color': '#F98200',
    'circle-stroke-color': '#D23B00',
    'circle-stroke-opacity': 0.5,
  },
  source: 'points',
})

我试过circle-radius-transition但它似乎没有帮助.

Answer 1

你在油漆属性的正确轨道上.我想你需要的是circle-opacity-transition.

跟着这些步骤:

1. 使用'circle-opacity'添加点:0作为默认不透明度值
2. 根据需要设置'circle-opacity-transition'

3. 加载地图后,将图层的"圆形不透明度"更改为1,您的图层将逐渐淡入.

   map.addLayer({
     "id": "point",
     "source": "point",
     "type": "circle",
     "paint": {
       "circle-radius": 20,
         // here we define defaut opacity is zero
         "circle-opacity": 0,
         "circle-opacity-transition": {duration: 2000},
         "circle-color": 'red'
         }
   });
   

你可以在这里查看这个解决方案:codepen