Google Maps Static API Polyline 點數過多導致無法顯示的原因與解決方法

問題

最近使用 C# 透過Google Map Routes API 的 Compute Routes 來規劃起、迄的路徑，取得polyline(整體路線的折線)，再利用Google Maps Static API來產生含有起、迄路徑的圖。
但是如果起、迄路徑中的折線太多，例如使用開車的方式，從上海到深圳，它的折線就有8 千多個，這就會導致使用Google Maps Static API它的URL長度會爆長而導致發生以下的錯誤，

Your client has issued a malformed or illegal request. That’s all we know.

解決方法

Maps Static API 網址長度上限為 16384 個字元，所以我們要做的就是要減少折線的數量。

安裝 Nuget 套件

NetTopologySuite:減少 經緯度的點數
Polyliner.Net:Encode 經緯度 成 polyline, 將 polyline Decode 成 經緯度

處理步驟 及 程式碼

1.將polyline Decode 取得經緯度

2.利用線段簡化演算法，減少 經緯度 的數量(要減少到多少，可以自定一個SimplifyToTargetPoints Method 來處理它)

3.重新將經緯度 Encode 成 polyline

程式碼如下，

using NetTopologySuite.Geometries;
using PolylinerNet;
using NetTopologySuite.Simplify;

var encodedPoyline = "Compute Routes 取回的 encodedPolyline";
var polyliner = new Polyliner();
// 1.將 polyline Decode 取得經緯度
List<PolylinePoint> polylinePointList = polyliner.Decode(encodedPoyline);
var coordinates = polylinePointList
    .Select(p => new Coordinate(p.Longitude, p.Latitude))
    .ToArray();
// 2.利用線段簡化演算法，減少 經緯度 的數量
var geometryFactory = new GeometryFactory();
var line = geometryFactory.CreateLineString(coordinates);
// 減少 經緯度 的數量到 300 以內，請依需求進行調整
var simplifiedLine = SimplifyToTargetPoints(line, 300);
var simplifiedPoints = simplifiedLine.Coordinates
    .Select(c => new PolylinePoint(c.Y, c.X))
    .ToList();
// 3.新將經緯度 Encode 成 polyline
var encodedSimplifiedPolyline = polyliner.Encode(simplifiedPoints);

// 減少 經緯度 的數量到 targetPoints 以內
public static LineString SimplifyToTargetPoints(LineString line, int targetPoints, double minTolerance = 1e-6, double maxTolerance = 1.0, int maxIterations = 20)
{
    if (line.NumPoints <= targetPoints)
        return line; // 原本就很少

    double low = minTolerance;
    double high = maxTolerance;
    LineString result = line;

    for (int i = 0; i < maxIterations; i++)
    {
        double mid = (low + high) / 2;
        var simplified = DouglasPeuckerSimplifier.Simplify(line, mid) as LineString;

        if (simplified.NumPoints > targetPoints)
        {
            low = mid; // 容忍度不夠大，點太多，繼續增加
        }
        else
        {
            result = simplified; // 有達到條件，記下這個結果
            high = mid;          // 嘗試更小的 tolerance
        }

        if (Math.Abs(high - low) < 1e-8)
            break;
    }
    return result;
}

最後再將 encodedSimplifiedPolyline 組成 Google Maps Static API 的 URL，即可正常產生地圖。如下圖:

• 註: 以 800 x 600 的圖，使用 300 以內的圖來看是還 OK, 大家也可以試看看其他的數量，例如 100, 200 …，在 Polyline decoder utility試看看效果

路徑簡化原理說明

通常使用 Ramer–Douglas–Peucker algorithm，如 wikipedia 圖所示:

參考資源

Google Map Routes API 的 Compute Routes
Google Maps Static API
Maps Static API 網址長度上限為 16384 個字元
Ramer–Douglas–Peucker algorithm
Polyline decoder utility