您可以在mapbox上设置圆的动画吗，并且也可以有空心圆

Question

I know you can animate circles on google maps , see example

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

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

I am creating a live earthquake map www.livehazards.com. Each earthquake mag is respresent by a circle

I would just like the outline of the circle and to be able to animate it.

I have tried using circle-stroke for just the outline but it did not work

Thanks

Answer 1

To animate your circle you can simply change its paint property several times: map.setPaintProperty('yourmarker', 'circle-radius', 20)

If you only want the circle outline, set "circle-opacity":0 and "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);

});