在Google Map中绘制ARC折线

时间:2017-09-25 17:51:08

标签: android google-maps google-maps-android-api-2 android-custom-view polyline

如何在Google地图中绘制圆弧折线?

我已使用this代码创建弯曲折线。

这是绘制弯曲折线的方法

private void showCurvedPolyline (LatLng p1, LatLng p2, double k) {
    //Calculate distance and heading between two points
    double d = SphericalUtil.computeDistanceBetween(p1,p2);
    double h = SphericalUtil.computeHeading(p1, p2);

    //Midpoint position
    LatLng p = SphericalUtil.computeOffset(p1, d*0.5, h);

    //Apply some mathematics to calculate position of the circle center
    double x = (1-k*k)*d*0.5/(2*k);
    double r = (1+k*k)*d*0.5/(2*k);

    LatLng c = SphericalUtil.computeOffset(p, x, h + 90.0);

    //Polyline options
    PolylineOptions options = new PolylineOptions();
    List<PatternItem> pattern = Arrays.<PatternItem>asList(new Dash(30), new Gap(20));

    //Calculate heading between circle center and two points
    double h1 = SphericalUtil.computeHeading(c, p1);
    double h2 = SphericalUtil.computeHeading(c, p2);

    //Calculate positions of points on circle border and add them to polyline options
    int numpoints = 100;
    double step = (h2 -h1) / numpoints;

    for (int i=0; i < numpoints; i++) {
        LatLng pi = SphericalUtil.computeOffset(c, r, h1 + i * step);
        options.add(pi);
    }

    //Draw polyline
    mMap.addPolyline(options.width(10).color(Color.MAGENTA).geodesic(false).pattern(pattern));
}

输出

1。如果我使用this.showCurvedPolyline(latLng1,latLng2,0.1);然后得到:

enter image description here

正如您在上图所示,我们非常接近目标,但不知道为什么它没有与另一个终点连接

2。如果我使用this.showCurvedPolyline(latLng1,latLng2,1);然后得到:

enter image description here

3。如果我使用LatLng c = SphericalUtil.computeOffset(p,x,h - 90.0);然后得到:

enter image description here

注意:我不希望这么多大圆形,真的我不想那么多 height < / em>的

以下是我想要一个ARC形状,如下图所示

enter image description here

以下是 CODE 我用来在两个geo-locatios之间添加曲线折线

private void addCurvedPolyLine() {

        LatLng latLng1 = new LatLng(40.7128, 74.0059); // New York
        LatLng latLng2 = new LatLng(51.5074, 0.1278); // London

        Marker marker1 = mMap.addMarker(new MarkerOptions().position(latLng1).title("Start"));
        Marker marker2 = mMap.addMarker(new MarkerOptions().position(latLng2).title("End"));

        LatLngBounds.Builder builder = new LatLngBounds.Builder();

        builder.include(marker1.getPosition());
        builder.include(marker2.getPosition());

        LatLngBounds bounds = builder.build();
        int padding = 0; // offset from edges of the map in pixels
        CameraUpdate cu = CameraUpdateFactory.newLatLngBounds(bounds, padding);
        mMap.moveCamera(cu);
        mMap.animateCamera(cu);

        this.showCurvedPolyline(latLng1, latLng2, 0.1);

    }

4 个答案:

答案 0 :(得分:5)

我在another question中提出的解决方案主要针对非常小距离的弯曲折线。例如,当您有一个Directions API路线,其中起点和终点被捕捉到道路,但原始请求中的真实起点和终点是建筑物的位置,因此您可以使用此弯曲的虚线折线连接道路和建筑物

如果您的示例中距离较远,我相信您可以使用API​​中提供的测地线。您可以将折线选项的测地线属性设置为true。

public void onMapReady(GoogleMap googleMap) {
    mMap = googleMap;

    mMap.getUiSettings().setZoomControlsEnabled(true);

    LatLng latLng1 = new LatLng(40.7128, 74.0059); // New York
    LatLng latLng2 = new LatLng(51.5074, 0.1278); // London

    Marker marker1 = mMap.addMarker(new MarkerOptions().position(latLng1).title("Start"));
    Marker marker2 = mMap.addMarker(new MarkerOptions().position(latLng2).title("End"));

    List<PatternItem> pattern = Arrays.<PatternItem>asList(new Dash(30), new Gap(20));
    PolylineOptions popt = new PolylineOptions().add(latLng1).add(latLng2)
       .width(10).color(Color.MAGENTA).pattern(pattern)
       .geodesic(true);
    mMap.addPolyline(popt);

    LatLngBounds.Builder builder = new LatLngBounds.Builder();

    builder.include(marker1.getPosition());
    builder.include(marker2.getPosition());

    LatLngBounds bounds = builder.build();
    int padding = 150; // offset from edges of the map in pixels
    CameraUpdate cu = CameraUpdateFactory.newLatLngBounds(bounds, padding);
    mMap.moveCamera(cu);
    mMap.animateCamera(cu);
}  

生成的折线显示在我的屏幕截图中

enter image description here

我希望这有帮助!

答案 1 :(得分:1)

这是我在使用@xomena

进行一些改进后使用的Route对象

Route.java

我的更改:

  • 使用heading - 90.0代替heading + 90.0
  • 重命名变量,制作常量(仍在弄清楚代码的某些部分正在做什么......)
  • 用我的新逻辑重写

基本上,如果原点和dest之间的距离小于1000km,我只画一条曲线路线。对于更长的距离,正如我在here中提到的,我发现循环中的部分h1 + i * step由于每个迭代器中的double calculation error而产生一个小错误,并使最终路径未正确放置

我的安全选择是绘制一条乌鸦飞行路线,但我的建议是不要使用k = 1,这不是性能效率。我写了另一种方法,只是将原点和目标点添加到路径,跳过所有其他复杂的计算。

我将来会尝试回到这个长曲线路径问题,现在,这个解决方案仍然适合我的问题。

编辑:

到目前为止,这是我对第二个问题的解决方案:

  • 更改heading + 90heading - 90无法解决问题,因此请不要
  • 相反,请更改step变量计算,如下所示:

    double step = Math.toDegrees(Math.atan(distance / 2 / midPerpendicularLength))* 2 / DEFAULT_CURVE_POINTS;

答案 2 :(得分:1)

Hy,您需要使用此方法更改showCurvePolyline方法。

    private void showCurvedPolyline (LatLng p1, LatLng p2, double k) {
    //Calculate distance and heading between two points
    double d = 0;


if (d == 0)
        d= SphericalUtil.computeDistanceBetween(origin, dest);



double h = SphericalUtil.computeHeading(p1, p2);

    // Calculate midpoint position
    LatLng midPoint = SphericalUtil.computeOffset(p1, d / 2, h);




    //Apply some mathematics to calculate position of the circle center
    double x = (1-k*k)*d*0.5/(2*k);
    double r = (1+k*k)*d*0.5/(2*k);

    LatLng c = SphericalUtil.computeOffset(p, x, h + 90.0);

    //Polyline options
    PolylineOptions options = new PolylineOptions();
    List<PatternItem> pattern = Arrays.<PatternItem>asList(new Dash(30), new Gap(20));

    //Calculate heading between circle center and two points
    double h1 = SphericalUtil.computeHeading(c, p1);
    double h2 = SphericalUtil.computeHeading(c, p2);

// Calculate position of the curve center point
    double sqrCurvature = DEFAULT_CURVE_ROUTE_CURVATURE * DEFAULT_CURVE_ROUTE_CURVATURE;
    double extraParam = distance / (4 * DEFAULT_CURVE_ROUTE_CURVATURE);
    double midPerpendicularLength = (1 - sqrCurvature) * extraParam;
    double r = (1 + sqrCurvature) * extraParam;

    LatLng midCurvePoint = SphericalUtil.computeOffset(midPoint, midPerpendicularLength, heading - 90.0);

    // Calculate heading between circle center and two points
    double headingToOrigin = SphericalUtil.computeHeading(midCurvePoint, origin);
    double headingToDest = SphericalUtil.computeHeading(midCurvePoint, dest);
    // Calculate positions of points on the curve
    double step = (headingToDest - headingToOrigin) / DEFAULT_CURVE_POINTS;

    List<LatLng> points = new ArrayList<>();
    for (int i = 0; i < DEFAULT_CURVE_POINTS; ++i) {
        points.add(SphericalUtil.computeOffset(midCurvePoint, r, headingToOrigin + i * step));
    }


    for (int i=0; i <points; i++) {
        LatLng pi = SphericalUtil.computeOffset(c, r, h1 + i * step);
        options.add(pi);
    }

    //Draw polyline
    mMap.addPolyline(options.width(10).color(Color.MAGENTA).geodesic(false).pattern(pattern));
}

然后你可以绘制arcPolyLine。它是由上一个答案提供的文件中提供的。

答案 3 :(得分:1)

还有另一种绘制圆弧的方法。使用Google Maps Projection API在叠加视图上绘制折线可以使我们做很多事情。选中具有示例的repo

enter image description here