如何绘制Uber多段线？ [英] How to draw Uber polyline?

问题描述

优步应用程序有一个弯曲的折线，甚至包括一个阴影。阴影可能只是一个黑色，透明折线连接两个点。这很容易。但是第二条带曲线的多段线，该如何完成？这是一个贝塞尔曲线，还是像setGeodesic（true）这样的内置函数？

我浏览了谷歌地图示例，并且看到了有关圆形多段线的部分。这可以适应创建半圈？演示代码片段。

  PolylineOptions options = new PolylineOptions（）; 
 int radius = 5; //那是什么？ 
 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（选项
 .color（color）
 .width（2））; 
  

解决方案

我可以用下面的贝塞尔曲线计算

  double cLat =（（start.latitude + end.latitude）/ 2）; 
 double cLon =（（start.longitude + end.longitude）/ 2）; 
 
 //添加skew和arcHeight以移动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））; 
} 
 
 //绘制折线
 PolylineOptions line = new PolylineOptions（）; 
 line.width（POLYGON_STROKE_WIDTH_PX）; 
 line.color（Color.RED）; 
 line.addAll（alLatLng）; 
 map.addPolyline（line）; 
  

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 second polyline with curve, how to accomplish this? Is this a Bezier curve, or a built in function like setGeodesic(true)?

I have looked through the google maps examples and I see a section about circle polylines. Can this be adapted to create semi circles? Code snippet from demo.

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

解决方案

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

这篇关于如何绘制Uber多段线？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！