Question

我正在批量加载Geojson的积分，并希望添加＆＃34; fadeIn＆＃34;当点首次出现在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，但似乎没有帮助。

Answer 1

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

请按照以下步骤操作：

使用＆＃39;圆圈不透明度＆＃39;：0添加点作为默认不透明度值
设置＆＃39;圈 - 不透明度 - 过渡＆＃39;如你所愿

加载地图后，更改图层的圆圈不透明度＆＃39;到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

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

至少，就我而言，它不起作用。这是我的代码，元素突然弹出来。

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

问：如何添加＆＃34;淡入＆＃34; Mapbox圆形图层的过渡效果

3 个答案: