如何为Mapbox圆形图层添加“淡入”过渡效果。

Question

如何为Mapbox圆形图层添加“淡入”过渡效果。

10

我正在分批次从Geojson中加载点，并希望在这些点首次出现在Mapbox时添加“淡入”效果或动画。

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，但貌似没有起到作用。

- zocoi

3个回答

3

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>

- Aravind

1

不幸的是，属性过渡在某些情况下无法正常工作，例如当您想要在悬停时切换图层时。

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

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
            }
        },
    });

- Alin Andrei

我这里也有同样的问题 :/ - Cristiano Dalbem

我记不得我是怎么解决的，但如果你发一个帖子，我可以看一下。 - Alin Andrei

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Joel Stüdle · Accepted Answer

你在涂料属性方面走在了正确的路上。我想你需要的是circle-opacity-transition。

按照以下步骤进行：

Add the points with 'circle-opacity': 0 as default opacity value
Set the 'circle-opacity-transition' as you wish

After the map is loaded change the layers 'circle-opacity' to 1 and your layer will be faded in.

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。