Android 高德地图在一个点添加扩散的水波纹效果解决方案

场景:
需要在地图定位点添加一个向外扩散的水波纹效果。如图
在这里插入图片描述
问题:
如何实现在一个点添加一个向外扩散的动画?

实现方案:
解决思路:首先看下高德地图的demo,该demo展示了在3D地图上如何实现定位圈向外扩展的动画效果。但是无法实现图上的效果。
https://lbs.amap.com/dev/demo/location-circle#Android
我们的思路是,添加多个圆,然后间隔执行扩散动画。即可实现图上的效果。

第一步:创建一个工具类,复制以下代码到创建的工具类


 private List<Circle> circleList;//圆集合

    private ValueAnimator valueAnimator;//动画工具

    /**
     * 添加水波纹效果
     *
     * @param latLng 要展示扩散效果的点经纬度
     * AMap aMap:高德地图
     */
    public void addWaveAnimation(LatLng latLng, AMap aMap) {
        circleList = new ArrayList<>();
        int radius = 50;
        for (int i = 0; i < 4; i++) {
            radius = radius + 50 * i;
            circleList.add(CircleBuilder.addCircle(latLng, radius, aMap));
        }
        valueAnimator = AnimatorUtil.getValueAnimator(0, 50, new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                int value = (int) animation.getAnimatedValue();
                for (int i = 0; i < circleList.size(); i++) {
                    int nowradius = 50 + 50 * i;
                    Circle circle = circleList.get(i);
                    double radius1 = value + nowradius;
                    circle.setRadius(radius1);
                    int strokePercent = 200;
                    int fillPercent = 20;
                    if (value < 25) {
                        strokePercent = value * 8;
                        fillPercent = value * 20 / 50;
                    } else {
                        strokePercent = 200 - value * 4;
                        fillPercent = 20 - value * 20 / 50;
                    }
                    if (circle.getFillColor() != CircleBuilder.getStrokeColor(strokePercent)) {
                        circle.setStrokeColor(CircleBuilder.getStrokeColor(strokePercent));
                        circle.setFillColor(CircleBuilder.getFillColor(fillPercent));
                    }
                }
            }
        });
    }

    /**
     * 移除水波纹动画
     */
    public void removeCircleWave() {
        if (null != valueAnimator) {
            valueAnimator.cancel();
        }
        if (circleList != null) {
            for (Circle circle : circleList) {
                circle.remove();
            }
            circleList.clear();
        }
    }

**第二步:**创建一个画圆的工具类,复制下面的代码到自己的项目中

public class CircleBuilder {

    //180, 3, 145, 255
    //10, 0, 0, 180
    public static final int STROKE_COLOR = Color.argb(180, 3, 145, 200);
    public static final int FILL_COLOR = Color.argb(10, 0, 0, 180);

    //224,236,237
    //233,241,242


    public static Circle addCircle(LatLng latlng, double radius, AMap aMap) {
        CircleOptions options = new CircleOptions();
        options.strokeWidth(1f);
        options.fillColor(FILL_COLOR);
        options.strokeColor(STROKE_COLOR);
        options.center(latlng);
        options.radius(radius);
        return aMap.addCircle(options);
    }

    public static int getStrokeColor(int alpha) {

        return Color.argb(alpha, 3, 145, 200);

    }


    public static int getFillColor(int alpha) {

        return Color.argb(alpha, 0, 0, 180);

    }
}

第三步:
在需要添加水波纹动画的地方调用addWaveAnimation方法。添加经纬度和AMap对象。
在需要取消水波纹动画的地方调用removeCircleWave方法即可。

大功告成!

好多小伙伴留言需要动画工具类,现在添加到下面

**
 * Description:AnimatorUtil 动画工具类
 */
public class AnimatorUtil {
    private static AnimatorUtil animatorUtil;

    public static AnimatorUtil getInstance() {
        if (animatorUtil == null) {
            animatorUtil = new AnimatorUtil();
        }
        return animatorUtil;
    }

    /**
     * View缩放动画
     *
     * @param view
     * @param time
     * @param count
     */
    public void scaleViewAnimator(View view, int time, int count) {
        ScaleAnimation scaleAnimation = new ScaleAnimation(0, 1, 0, 1, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
        scaleAnimation.setDuration(time);
        scaleAnimation.setRepeatCount(count);
        scaleAnimation.setFillAfter(true);
        view.startAnimation(scaleAnimation);
    }

    public static ValueAnimator getValueAnimator(int min, int max, ValueAnimator.AnimatorUpdateListener animatorUpdateListener) {
        ValueAnimator valueAnimator = ValueAnimator.ofInt(min, max);
        valueAnimator.setDuration(3000);
        valueAnimator.setInterpolator(new LinearInterpolator());
        valueAnimator.addUpdateListener(animatorUpdateListener);
        //无限循环
        valueAnimator.setRepeatCount(ValueAnimator.INFINITE);
        //从头开始动画
        valueAnimator.setRepeatMode(ValueAnimator.RESTART);
        valueAnimator.start();
        return valueAnimator;
    }
  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
Android Studio中,我们可以使用高德地图API来根据经纬度计算面积并判断一个点是否在圈内。 首先,我们需要导入高德地图的相关库文件,并获取一个AMap对象,用来进行地图操作。 然后,我们可以使用AMap对象中的AMapUtils类中的calculateArea()方法来计算多边形的面积。这个方法接收一个List<LatLng>类型的参数,用于传入多边形的顶点经纬度坐标。返回的面积单位为平方米。 另外,要判断一个点是否在圈内,我们可以使用AMap对象中的AMapUtils类中的isPolygonContainsPoint()方法。这个方法接收一个LatLng类型的点坐标和一个List<LatLng>类型的多边形顶点坐标。返回一个布尔值,表示该点是否在多边形内部。 具体代码如下: ``` // 导入相关库文件 import com.amap.api.maps.AMap; import com.amap.api.maps.AMapUtils; import com.amap.api.maps.model.LatLng; // 获取AMap对象 AMap aMap = mapView.getMap(); // 计算多边形面积 List<LatLng> polygonPoints = new ArrayList<>(); polygonPoints.add(new LatLng(39.90923, 116.397428)); polygonPoints.add(new LatLng(39.90823, 116.397428)); polygonPoints.add(new LatLng(39.90823, 116.398428)); polygonPoints.add(new LatLng(39.90923, 116.398428)); float area = AMapUtils.calculateArea(polygonPoints); // 判断一个点是否在圈内 LatLng point = new LatLng(39.90923, 116.397428); boolean isContains = AMapUtils.isPolygonContainsPoint(point, polygonPoints); ``` 以上就是使用Android Studio中的高德地图API根据经纬度计算面积和判断一个点是否在圈内的方法。注意,要在项目中正确引入高德地图API,并在AndroidManifest.xml文件中注册相关权限和配置。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值