使用GroundOverlay实现脉冲动画

Question

我需要通过脉冲动画展示A点和B点的位置。我可以使用下面的代码实现。但是我遇到的问题是随着缩放级别的变化，地面叠加层的大小也会改变。如果A点和B点离得很近（即地图缩放级别很高），则脉冲的半径太大。当我缩小时它就变得太小了。

如何在地图的缩放级别不同的情况下保持覆盖层的大小一致？

下面的代码是从这里引用的：Animated Transparent Circle on Google Maps v2 is NOT animating correctly

private void showRipples(LatLng latLng, int color) {
    GradientDrawable d = new GradientDrawable();
    d.setShape(GradientDrawable.OVAL);
    d.setSize(500, 500);
    d.setColor(ContextCompat.getColor(Activity.this, color));
    d.setStroke(0, Color.TRANSPARENT);

    final Bitmap bitmap = Bitmap.createBitmap(d.getIntrinsicWidth()
            , d.getIntrinsicHeight()
            , Bitmap.Config.ARGB_8888);

    // Convert the drawable to bitmap
    final Canvas canvas = new Canvas(bitmap);
    d.setBounds(0, 0, canvas.getWidth(), canvas.getHeight());
    d.draw(canvas);

    // Radius of the circle
    final int radius = getResources().getDimensionPixelSize(R.dimen.ripple_radius);

    // Add the circle to the map
    final GroundOverlay circle = googleMap.addGroundOverlay(new GroundOverlayOptions()
            .position(latLng, 2 * radius).image(BitmapDescriptorFactory.fromBitmap(bitmap)));

    // Prep the animator
    PropertyValuesHolder radiusHolder = PropertyValuesHolder.ofFloat("radius", 1, radius);
    PropertyValuesHolder transparencyHolder = PropertyValuesHolder.ofFloat("transparency", 0, 1);

    ValueAnimator valueAnimator = new ValueAnimator();
    valueAnimator.setRepeatCount(ValueAnimator.INFINITE);
    valueAnimator.setRepeatMode(ValueAnimator.RESTART);
    valueAnimator.setValues(radiusHolder, transparencyHolder);
    valueAnimator.setDuration(DURATION);
    valueAnimator.setEvaluator(new FloatEvaluator());
    valueAnimator.setInterpolator(new AccelerateDecelerateInterpolator());
    valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator valueAnimator) {
            float animatedRadius = (float) valueAnimator.getAnimatedValue("radius");
            float animatedAlpha = (float) valueAnimator.getAnimatedValue("transparency");
            circle.setDimensions(animatedRadius * 2);
            circle.setTransparency(animatedAlpha);

        }
    });

    // start the animation
    valueAnimator.start();

}

[当两个位置相距较远时，我看到的效果是这样的][]1

当两个位置靠近时，我看到的效果如下

对于第一张图片，如果我放大，就会看到脉冲动画。

是否有一种方法可以保持脉冲半径不变，而与缩放级别无关？

- user2234

---

根据屏幕投影大小计算半径（参见 map.getProjection()）。 - user2711811

Answer 1

这是因为GroundOverlay与谷歌地图一起缩放。为了避免这种情况，您应该针对每个缩放级别重新创建覆盖层，并针对该缩放级别和纬度（meters_to_pixels在示例源代码中）更正半径。为了避免重复创建GroundOverlay，您应该存储已创建的GroundOverlay对象，并在创建新对象之前将其删除。为此，您需要对showRipples()方法进行一些更改-它应返回创建的覆盖层。以下是一个带有一个标记的完整示例源代码：

public class MainActivity extends AppCompatActivity implements OnMapReadyCallback {

    private static final String TAG = MainActivity.class.getSimpleName();

    private final LatLng RED_MARKER = new LatLng(-37.884312, 145.000623);

    private GoogleMap mGoogleMap;
    private MapFragment mMapFragment;

    private GroundOverlay mRedPoint = null;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mMapFragment = (MapFragment) getFragmentManager()
                .findFragmentById(R.id.map_fragment);
        mMapFragment.getMapAsync(this);
    }

    @Override
    public void onMapReady(GoogleMap googleMap) {
        mGoogleMap = googleMap;

        mGoogleMap.setOnCameraIdleListener(new GoogleMap.OnCameraIdleListener() {
            @Override
            public void onCameraIdle() {
                // if overlay already exists - remove it
                if (mRedPoint != null) {
                    mRedPoint.remove();
                }
                mRedPoint = showRipples(RED_MARKER, Color.RED);
            }
        });
        mGoogleMap.animateCamera(CameraUpdateFactory.newLatLngZoom(RED_MARKER, 16));
    }

    private GroundOverlay showRipples(LatLng latLng, int color) {
        GradientDrawable d = new GradientDrawable();
        d.setShape(GradientDrawable.OVAL);
        d.setSize(500, 500);
        d.setColor(color);
        d.setStroke(0, Color.TRANSPARENT);

        final Bitmap bitmap = Bitmap.createBitmap(d.getIntrinsicWidth()
                , d.getIntrinsicHeight()
                , Bitmap.Config.ARGB_8888);

        // Convert the drawable to bitmap
        final Canvas canvas = new Canvas(bitmap);
        d.setBounds(0, 0, canvas.getWidth(), canvas.getHeight());
        d.draw(canvas);

        // Radius of the circle for current zoom level and latitude (because Earth is sphere at first approach)
        double meters_to_pixels = (Math.cos(mGoogleMap.getCameraPosition().target.latitude * Math.PI /180) * 2 * Math.PI * 6378137) / (256 * Math.pow(2, mGoogleMap.getCameraPosition().zoom));
        final int radius = (int)(meters_to_pixels * getResources().getDimensionPixelSize(R.dimen.ripple_radius));

        // Add the circle to the map
        final GroundOverlay circle = mGoogleMap.addGroundOverlay(new GroundOverlayOptions()
                .position(latLng, 2 * radius).image(BitmapDescriptorFactory.fromBitmap(bitmap)));

        // Prep the animator
        PropertyValuesHolder radiusHolder = PropertyValuesHolder.ofFloat("radius", 1, radius);
        PropertyValuesHolder transparencyHolder = PropertyValuesHolder.ofFloat("transparency", 0, 1);

        ValueAnimator valueAnimator = new ValueAnimator();
        valueAnimator.setRepeatCount(ValueAnimator.INFINITE);
        valueAnimator.setRepeatMode(ValueAnimator.RESTART);
        valueAnimator.setValues(radiusHolder, transparencyHolder);
        valueAnimator.setDuration(1000);
        valueAnimator.setEvaluator(new FloatEvaluator());
        valueAnimator.setInterpolator(new AccelerateDecelerateInterpolator());
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                float animatedRadius = (float) valueAnimator.getAnimatedValue("radius");
                float animatedAlpha = (float) valueAnimator.getAnimatedValue("transparency");
                circle.setDimensions(animatedRadius * 2);
                circle.setTransparency(animatedAlpha);

            }
        });

        // start the animation
        valueAnimator.start();

        return circle;
    }

}

- Andrii Omelchenko

Answer 2

假设您想要覆盖圆的半径是固定尺寸（相对于屏幕像素），例如当前缩放比例下屏幕宽度的1/10。

  // compute width of visible region

  // get lat-lng of left and right points
  LatLng left = googleMap.getProjection().getVisibleRegion().farLeft;
  LatLng right = googleMap.getProjection().getVisibleRegion().farRight;


  // compute distance between points
  float[] results = new float[1];
  Location.distanceBetween(left.latitude, left.longitude,right.latitude,right.longitude, results);

  // scale to desired relative radius size
  float scaledRadius = results[0] * 0.10F;

  // and use that for radius - taken from OP code and use 'scaledRadius'
  final GroundOverlay circle = googleMap.addGroundOverlay(new GroundOverlayOptions()
              .position(latLng, scaledRadius).image(BitmapDescriptorFactory.fromBitmap(bitmap)));

这个例子使用宽度作为缩放轴，但你也可以使用高度或对角线（通过使用投影的不同点）。

使用'far'可以替换为'near' - 它用于考虑倾斜，所以你需要进行实验。

现在，你的资源值是一个缩放因子而不是绝对半径值 - 所以对于这个例子，你将把资源值设置为0.10F，并在上面硬编码的地方使用它。

如果你希望在缩放后/期间脉冲（和叠加）仍然起作用，则需要使用'onCameraIdle'事件更新叠加圆的宽度（circle.setWidth(scaledRadius))，使用与上述计算相同的方法来计算scaledRadius，例如：

public void onCameraIdle() {
    if (circle != null) {
       // compute scaled radius as in above code...

       // The 1-argument version is specifically width
       circle.setDimensions(scaledRadius);
    }
}

- user2711811