How to draw Uber polyline?

前端 未结 1 1363
没有蜡笔的小新
没有蜡笔的小新 2021-01-03 13:09

Uber app has a polyline that is curved, and even includes a shadow. The shadow may be just a black with transparent polyline connecting two points. That is easy. But the sec

相关标签:
1条回答
  • 2021-01-03 13:31

    I was able to achieve this with the following bezier curve calculation

        double cLat = ((start.latitude + end.latitude) / 2);
        double cLon = ((start.longitude + end.longitude) / 2);
    
        //add skew and arcHeight to move the midPoint
        if(Math.abs(start.longitude - end.longitude) < 0.0001){
            cLon -= 0.0195;
        } else {
            cLat += 0.0195;
        }
    
        double tDelta = 1.0/50;
        for (double t = 0;  t <= 1.0; t+=tDelta) {
            double oneMinusT = (1.0-t);
            double t2 = Math.pow(t, 2);
            double lon = oneMinusT * oneMinusT * start.longitude
                    + 2 * oneMinusT * t * cLon
                    + t2 * end.longitude;
            double lat = oneMinusT * oneMinusT * start.latitude
                    + 2 * oneMinusT * t * cLat
                    + t2 * end.latitude;
            alLatLng.add(new LatLng(lat, lon));
        }
    
        // draw polyline
        PolylineOptions line = new PolylineOptions();
        line.width(POLYGON_STROKE_WIDTH_PX);
        line.color(Color.RED);
        line.addAll(alLatLng);
        map.addPolyline(line);
    
    0 讨论(0)
提交回复
热议问题