如何绘制优步折线？答案

【问题标题】：How to draw Uber polyline?如何绘制优步折线？
【发布时间】：2017-09-25 11:43:27
【问题描述】：

Uber 应用有一条弯曲的折线，甚至包括阴影。阴影可能只是黑色，透明折线连接两点。这很容易。但是第二条带曲线的折线，如何实现呢？这是贝塞尔曲线，还是像 setGeodesic(true) 这样的内置函数？

我浏览了谷歌地图示例，并看到了有关圆形折线的部分。这可以适应创建半圆吗？来自演示的代码 sn-p。

PolylineOptions options = new PolylineOptions();
int radius = 5; //What is that?
int numPoints = 100;
double phase = 2 * Math.PI / numPoints;
for (int i = 0; i <= numPoints; i++) {
    options.add(new LatLng(SYDNEY.latitude + radius * Math.sin(i * phase),
            SYDNEY.longitude + radius * Math.cos(i * phase)));
}
int color = Color.RED;
mMap.addPolyline(options
        .color(color)
        .width(2));

【问题讨论】：

类似问题stackoverflow.com/questions/43305664/…。你可以在那里找到答案。
该算法中的曲线不是那么平滑。我创建了一个更流畅的更新版本。
@portfoliobuilder 你能提供解决方案吗？
iOS 解决方案链接：stackoverflow.com/a/53569754/6593774
你可以看到我的回答here，可能对你有帮助。

标签： android google-maps polyline

【解决方案1】：

我能够通过以下贝塞尔曲线计算来实现这一点

    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);

【讨论】：

如何在单曲线线上提供从深到浅的颜色？
@AshimKansal 这是可能的。但是您应该在 SO 上提出问题。如果我看到它，我会给你一个答案。我也想出了一个。虽然非常复杂。作为警告，请小心提问。如您所见，人们无缘无故地投票给我。让你不想再问任何问题了。
alLatLng 变量的类型是什么
@UsmanJdn ArrayList of Google LatLng 对象

【解决方案2】：

 private fun plotPolyline(
    startLat: Double?,
    startLon: Double?,
    markerLat: Double?,
    markerLon: Double?
) {
    if (startLat == null || startLon == null || markerLat == null || markerLon == null) {
        return
    }
    var startPoint = LatLng(startLat, startLon)
    var endPoint = LatLng(markerLat, markerLon)
    val distance = SphericalUtil.computeDistanceBetween(startPoint, endPoint)
    val midPoint = SphericalUtil.interpolate(startPoint, endPoint, 0.5)
    val midToStartLocHeading = SphericalUtil.computeHeading(midPoint, startPoint)
    val controlPointAngle = 360.0 - (90.0 - midToStartLocHeading)
    val controlPoint = SphericalUtil.computeOffset(midPoint, distance / 2.0, controlPointAngle)
    var t = 0.0
    val polylineOptions = PolylineOptions()

    while (t <= 1.00) {
        val oneMinusT = 1.0 - t
        val lon: Double =
            oneMinusT * oneMinusT * startLon + 2 * oneMinusT * t * controlPoint.longitude + t * t * markerLon
        val lat: Double =
            oneMinusT * oneMinusT * startLat + 2 * oneMinusT * t * controlPoint.latitude + t * t * markerLat
        polylineOptions.add(LatLng(lat, lon))
        t += 0.05
    }

    polylineOptions.add(endPoint)

    // Draw polyline
    polyline?.remove()
    var pattern = listOf<PatternItem>(Gap(10.0f), Dash(10.0f))
    polyline = googleMap?.addPolyline(
        polylineOptions.width(10f).pattern(pattern)
            .geodesic(false)
    )
}

【讨论】：