Question

我知道你可以在谷歌地图上为圈子设置动画，参见示例

http://jsbin.com/nuwem/1/edit?html,output

 .....But can you do the same thing on Mapbox

我正在创建一个现场地震图www.livehazards.com。每个地震磁场都以圆圈表示

我想要圆圈的轮廓并能够为它制作动画。

我尝试仅使用圆形笔划但是它不起作用

由于

Answer 1

要为您的圆圈设置动画，您只需多次更改其绘制属性：map.setPaintProperty('yourmarker', 'circle-radius', 20)

如果您只想要圆圈轮廓，请设置"circle-opacity":0和"circle-stroke-width": 1。

Codepen

const map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/light-v9',
    center: [ 2.35, 48.85 ],
    zoom: 3
});

map.on('load', () => {
  let radius = 1;

  map.addLayer({
        "id": "points",
        "type": "circle",

        // Create the marker
        "source": {
            "type": "geojson",
            "data": {
                "type": "FeatureCollection",
                "features": [{
                    "type": "Feature",
                    "geometry": {
                        "type": "Point",
                        "coordinates": [ 2.35, 48.85 ]
                    }
                }]
            }
        },

        // Draw the circle
        "paint": {
          "circle-opacity": 0,
          "circle-stroke-width": 1,
          "circle-stroke-color": "#000",
          "circle-radius": radius,
          "circle-radius-transition": {
            "duration": 0
          }
        }
    });

    // Animate the circle
    setInterval(() => {
      map.setPaintProperty('points', 'circle-radius', radius);
      radius = ++radius % 30;
    }, 50);
});

Answer 2

 var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v9',
center: [ 2.35, 48.85 ],
zoom: 3

}）;

map.on('load', function() {
     let radius = 1;
   map.addSource("earthquakes", {
    type: "geojson",
    data: "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/4.5_day.geojson",
});
  map.addLayer({
    "id": "earthquake-layer",
    "type": "circle",
    "source": "earthquakes",
    "paint": {
      "circle-opacity": 0.4,
      "circle-color": "#830300",
      "circle-stroke-width": 2,
      "circle-stroke-color": "#fff",
      "circle-radius": {
            "property": "mag",
            "base": 2.5,
            "stops": [
                [{zoom: 0,  value: 2}, 1],
                [{zoom: 0,  value: 8}, 40],
                [{zoom: 11, value: 2}, 10],
                [{zoom: 11, value: 8}, 2400],
                [{zoom: 20, value: 2}, 20],
                [{zoom: 20, value: 8}, 6000]
              "circle-radius-transition": {
        "duration": 0
      }
            ]
        }
    }
});
setInterval(() => {
  map.setPaintProperty('eaarthquake-layer', 'circle-radius', radius);
  radius = ++radius % 30
}, 50);

}）;

你可以在地图框上为圆圈设置动画，并且还有空心圆

2 个答案: