Q：如何为Mapbox圆形图层添加"fade in"过渡效果

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.

按照以下步骤操作：

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

加载地图后，将图层 'circle-opacity' 更改为 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

Answer 2

Joel 的回答很完美，但是超时必须放在地图加载函数中，否则如果地图加载时间更长，圆图层将不会加载

检查下面的代码片段

mapboxgl.accessToken = 'pk.eyJ1Ijoiam9lbHN0dWVkbGUiLCJhIjoiY2ltbmI1OWNpMDAxNnV1bWFtMnpqYWJndyJ9.uDWVjgzU7EVS63OuVWSRuQ';
var map = new mapboxgl.Map({
  container: 'map', // container id
  style: 'mapbox://styles/mapbox/streets-v9', //stylesheet location
  center: [7.445683, 46.945966], // starting position
  zoom: 9 // starting zoom
});

// the data we'll add as 'points'
var data = {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "properties": {
      "timestamp": "0",
      "location-name": "Bern"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [7.445683, 46.945966]
    }
  }]
}

// so if the map loads do the following
map.on('load', function() {

  // add the data source with the information for the point
  map.addSource('point', {
    "type": "geojson",
    "data": data
  });


  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: 1500
      },
      "circle-color": 'red'
    }
  });
  //Timeout shoud be within the map load function
  setTimeout(function() {
    map.setPaintProperty('point', 'circle-opacity', 1);
  }, 1);
});

<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8' />
  <title></title>
  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.36.0/mapbox-gl.js'></script>
  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.36.0/mapbox-gl.css' rel='stylesheet' />
  <style>
    body {
      margin: 0;
      padding: 0;
    }
    
    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }
  </style>
</head>

<body>

  <div id='map'></div>

</body>

</html>

Answer 3

不幸的是，属性-transition 在某些情况下不起作用，例如，当您想要在悬停时切换图层时。

至少，在我的情况下它不起作用。这是我的代码，元素像什么都没有一样弹出。

map.addLayer({
        'id': 'places-details',
        'type': 'symbol',
        'source': 'places',
        'layout': {
            'icon-image': '{icon}',
            'text-field': '{data}',
            'icon-size': .8,
            'text-anchor': 'center',
        },
        'paint': {
            'text-color': '#ffffff',
            'icon-opacity': [
                'case',
                ['boolean', ['feature-state', 'hover'], false],
                1, 0
            ],
            'text-opacity': [
                'case',
                ['boolean', ['feature-state', 'hover'], false],
                1, 0
            ],
            "text-opacity-transition": {
              "duration": 3000,
              "delay": 0
            },
            "icon-opacity-transition": {
              "duration": 300,
              "delay": 0
            }
        },
    });

Q：如何为Mapbox圆形图层添加"fade in"过渡效果

Q: how to add "fade in" transition effect for Mapbox circle layer

mapbox

mapbox-gl

mapbox-gl-js