平滑移动

功能场景

出行、运动健康类app中动态展示小车、用户的轨迹变化。

Android

iOS

//mapopen-website-wiki.bj.bcebos.com/demos/AndroidVideos/Android平滑移动.mp4

扫码体验

使用产品

Android地图SDK

下载源码

核心接口

类

接口

描述

points(List<LatLng> points)

设置Polyline坐标点列表

width(int width)

设置Polyline宽度

PolylineOptions

customTexture(BitmapDescriptor customTexture)

设置自定义纹理

dottedLineType(PolylineDottedLineType polylineDottedLineType)

设置Polyline的虚线类型

BaiduMap

addOverlay(OverlayOptions options)

向地图添加一个overlay

flat(boolean flat)

设置 marker设置是否平贴地图

anchor(float anchorX, float anchorY)

设置 marker 覆盖物的锚点比例，默认（0.5f, 1.0f）水平居中，垂直下对齐

MarkerOptions

icon(BitmapDescriptor icon)

设置Marker图标

position(LatLng position)

设置 marker 覆盖物的位置坐标

rotate(float rotate)

设置 marker 覆盖物旋转角度，逆时针

Marker

setPosition(LatLng position)

设置Marker位置坐标

BitmapDescriptorFactory

fromResource(int resourceId)

根据资源Id创建不适配设备像素密度的bitmap描述信息

核心代码

1.绘制轨迹

JAVA

private void drawPolyLine() {
    List list = Arrays.asList(latlngs);
    List<LatLng> polylines = new ArrayList<>();
    polylines.addAll(list);
    polylines.add(latlngs[0]);
    // 绘制纹理PolyLine
    PolylineOptions polylineOptions =
            new PolylineOptions().points(polylines).width(25).customTexture(mGreenTexture)
                    .dottedLine(true);
    mPolyline = (Polyline) mBaiduMap.addOverlay(polylineOptions);

    // 添加小车marker
    OverlayOptions markerOptions = new MarkerOptions()
            .flat(true)
            .anchor(0.5f, 0.5f)
            .icon(mBitmapCar).
                    position(polylines.get(0))
            .rotate((float) getAngle(0));
    mMoveMarker = (Marker) mBaiduMap.addOverlay(markerOptions);

}
                     
                

复制

深色

复制成功

2.移动小车

JAVA

/**
* 循环进行移动逻辑
*/
public void moveLooper() {
    new Thread() {
        public void run() {
            while (true) {
                for (int i = 0; i < latlngs.length - 1; i++) {
                    final LatLng startPoint = latlngs[i];
                    final LatLng endPoint = latlngs[i + 1];
                    mMoveMarker.setPosition(startPoint);
                    mHandler.post(new Runnable() {
                        @Override
                        public void run() {
                            // refresh marker's rotate
                            if (mMapView == null) {
                                return;
                            }
                            mMoveMarker.setRotate((float) getAngle(startPoint, endPoint));
                        }
                    });
                    double slope = getSlope(startPoint, endPoint);
                    // 是不是正向的标示
                    boolean isYReverse = (startPoint.latitude > endPoint.latitude);
                    boolean isXReverse = (startPoint.longitude > endPoint.longitude);
                    double intercept = getInterception(slope, startPoint);
                    double xMoveDistance =
                            isXReverse? getXMoveDistance(slope): -1 * getXMoveDistance(slope);
                    double yMoveDistance =
                            isYReverse? getYMoveDistance(slope): -1 * getYMoveDistance(slope);

                    for (double j = startPoint.latitude, k = startPoint.longitude;
                           !((j > endPoint.latitude)
                                    ^ isYReverse)
                                &&!((k > endPoint.longitude)
                                                ^ isXReverse); ) {
                        LatLng latLng = null;

                        if (slope == Double.MAX_VALUE) {
                            latLng = new LatLng(j, k);
                            j = j - yMoveDistance;
                        } else if (slope == 0.0) {
                            latLng = new LatLng(j, k - xMoveDistance);
                            k = k - xMoveDistance;
                        } else {
                            latLng = new LatLng(j, (j - intercept) / slope);
                            j = j - yMoveDistance;
                        }

                        final LatLng finalLatLng = latLng;
                        if (finalLatLng.latitude == 0 && finalLatLng.longitude == 0) {
                            continue;
                        }
                        mHandler.post(new Runnable() {
                            @Override
                            public void run() {
                                if (mMapView == null) {
                                    return;
                                }
                                mMoveMarker.setPosition(finalLatLng);
                                // 设置 Marker 覆盖物的位置坐标,并同步更新与Marker关联的InfoWindow的位置坐标.
                                mMoveMarker.setPositionWithInfoWindow(finalLatLng);
                            }
                        });
                        try {
                            Thread.sleep(TIME_INTERVAL);
                        } catch (InterruptedException e) {
                            e.printStackTrace();
                        }
                    }
                }
            }
        }

    }.start();
}
               
                

复制

深色

复制成功

//mapopen-website-wiki.bj.bcebos.com/demos/iosVideos/iOS平滑移动.mov

扫码体验

使用产品

iOS地图SDK

下载源码

核心接口

类

接口

描述

- (instancetype)init

创建点标记实例

BMKPointAnnotation

CLLocationCoordinate2D coordinate;

设置点标记经纬度坐标

NSString *title;

设置显示的标题

BMKPinAnnotationView

- (id)initWithAnnotation:(id <BMKAnnotation>)annotation reuseIdentifier:(NSString *)reuseIdentifier;

初始化并返回一个BMKPinAnnotationView实例

BMKPolygon

+ (BMKPolygon *)polygonWithCoordinates:(CLLocationCoordinate2D *)coords count:(NSUInteger)count;

根据多个点生成多边形

BMKPolygonView

- (id)initWithOverlay:(id <BMKOverlay>)overlay;

初始化并返回一个BMKPolygonView实例，模拟运动轨迹

BMKMapView

- (void)addAnnotation:(id <BMKAnnotation>)annotation;

向地图窗口添加点标记

UIView

+ (void)animateWithDuration:(NSTimeInterval)durationdelay:(NSTimeInterval)delay options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^ __nullable)(BOOLfinished))completion API_AVAILABLE(ios(4.0));

基于UIView动画完成连续平滑移动

核心代码

1.动画相关属性设置

Objective-C

#pragma mark - 动画相关
- (void)startAnimation {
    double speed = 80.0 / 3.6;
    BMKSportNode *node = (BMKSportNode *)self.sportNodes[self.currentIndex];
    self.imageView.transform = CGAffineTransformMakeRotation(node.direction);
    [UIView animateWithDuration:node.distance / speed
    delay:0.0 options:UIViewAnimationOptionCurveLinear | UIViewAnimationOptionAllowUserInteraction animations:^(void) {
        [self.annotation setCoordinate:((BMKSportNode *)self.sportNodes[(self.currentIndex + 1)% self.sportNodeNum]).coordinate];
    } completion:^(BOOL finished) {
        if (!self.stopAnimation) {
            self.currentIndex ++;
            self.currentIndex%= self.sportNodes.count;
            __weak id weakSelf = self;
            [[NSOperationQueue mainQueue] addOperationWithBlock:^{
                [weakSelf startAnimation];
            }];
        }
    }];
}
                

复制

深色

复制成功

2.小车运动轨迹点方向、距离的计算

Objective-C

#pragma mark - SportPath
- (void)fetchSportNodes {
    self.sumDistance = 0;
    _sportNodes = [NSMutableArray array];
    NSData *jsonData = [NSData dataWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"sport_path" ofType:@"json"]];
    NSError *error;
    NSArray *array = [NSJSONSerialization JSONObjectWithData:jsonData options:NSJSONReadingMutableContainers error:&error];
    for (int i = 0; i < array.count; i ++) {
        NSDictionary *current = array[i];
        CLLocationCoordinate2D startCoor = CLLocationCoordinate2DMake([current[@"lat"] doubleValue], [current[@"lon"] doubleValue]);
        NSDictionary *next = array[(i + 1)% array.count];
        CLLocationCoordinate2D endCoor = CLLocationCoordinate2DMake([next[@"lat"] doubleValue], [next[@"lon"] doubleValue]);
        CLLocation *begin = [[CLLocation alloc] initWithLatitude:startCoor.latitude longitude:startCoor.longitude];
        CLLocation *end = [[CLLocation alloc] initWithLatitude:endCoor.latitude longitude:endCoor.longitude];
        CLLocationDistance distance = [end distanceFromLocation:begin];
        CLLocationDirection direction = BMKGetDirectionFromCoords(begin.coordinate, end.coordinate);
        self.sumDistance += distance;
        
        BMKSportNode *sportNode = [[BMKSportNode alloc] init];
        sportNode.coordinate  = startCoor;
        sportNode.distance = distance;
        sportNode.direction = direction / 180 * M_PI;
        [_sportNodes addObject:sportNode];
    }
    _sportNodeNum = _sportNodes.count;
}
                    
                

复制

深色

复制成功