Анимированная иконка Mapbox с фиксированным радиусом при разных уровнях масштабирования - PullRequest
Новая
       8

Анимированная иконка Mapbox с фиксированным радиусом при разных уровнях масштабирования

1 голос
/ 03 октября 2019

Я могу создавать анимированные пульсирующие круги и создавать круги определенного размера, привязанные к радиусу карты независимо от уровня масштабирования.

То, с чем я действительно борюсь, это комбинирование 2. Здесьэто то, что у меня есть для анимации и для создания границ круга. Работает без ошибок, но круги меняют размер при масштабировании ... 

	var framesPerSecond = 15;
	var initialOpacity = 1
	var opacity = initialOpacity;
	var initialRadius = 0;
	var radius = initialRadius;
	var maxRadius = 100;

	map.on('load', function(){

map.addLayer ({
			id: 'area',
			type: 'circle',
			source:{
				type: 'geojson',
				data: {
				type: 'FeatureCollection', features: pointData
			}
		},
		"paint": {
			'circle-opacity': initialOpacity,
			"circle-pitch-alignment": 'map',
			"circle-radius": {
			            stops: [
			              [0, radius],
			              [20, radius]
			            ],
			            base: 2
			          },
			"circle-radius-transition": {duration: 0}
					 }
	})

	function animateMarker(timestamp) {
        setTimeout(function(){
            requestAnimationFrame(animateMarker);

            radius += (maxRadius - radius) / framesPerSecond;
            opacity -= ( .9 / framesPerSecond );

            map.setPaintProperty('area', 'circle-radius', radius);
            map.setPaintProperty('area', 'circle-opacity', opacity);

            if (opacity <= 0) {
                radius = initialRadius;
                opacity = initialOpacity;
            }

        }, 1000 / framesPerSecond);

    }

    // Start the animation.
    animateMarker(0);

Есть идеи? Спасибо

...