处理并直观呈现 Isochrones API 响应

Isochrones API 会返回符合 RFC 7946 的标准 GeoJSON 格式的几何图形。响应始终在 isochrone.geoJson（gRPC 中的 isochrone.geo_json）下包含 MultiPolygon 几何图形对象：

• 坐标顺序：每个位置都是一个 [longitude, latitude] 对，采用 WGS 84 十进制度数。
• 多个多边形 (coordinates[i])：可到达的等时线区域可能由多个不相交的多边形组成（例如，当高速桥梁或隧道连接到单独的可到达区域时，或者当跨越 ±180° 对向子午线的多边形根据 RFC 7946 §3.1.9 沿子午线分割时）。
• 外壳和内孔 (coordinates[i][j])：在每个多边形 coordinates[i] 中，第一个线性环 (coordinates[i][0]) 是逆时针缠绕的外壳，任何后续线性环 (coordinates[i][1..k]) 都表示根据 RFC 7946 §3.1.6 右手定则顺时针缠绕的内孔（例如湖泊、公园或未映射的区域）。每个线性环都是闭合的（其第一个和最后一个 [longitude, latitude] 位置相同）。

以下示例展示了一个 MultiPolygon 响应，其中包含一个带内部孔洞的主多边形和另一个不相交的多边形：

{
  "isochrone": {
    "geoJson": {
      "type": "MultiPolygon",
      "coordinates": [
        [
          [
            [-122.340000, 47.600000],
            [-122.320000, 47.600000],
            [-122.320000, 47.615000],
            [-122.340000, 47.615000],
            [-122.340000, 47.600000]
          ],
          [
            [-122.334000, 47.604000],
            [-122.334000, 47.609000],
            [-122.328000, 47.609000],
            [-122.328000, 47.604000],
            [-122.334000, 47.604000]
          ]
        ],
        [
          [
            [-122.355000, 47.602000],
            [-122.348000, 47.602000],
            [-122.348000, 47.608000],
            [-122.355000, 47.608000],
            [-122.355000, 47.602000]
          ]
        ]
      ]
    }
  }
}

在地图上直观呈现等时线

由于该 API 会返回标准 GeoJSON，因此您可以使用 Maps JavaScript API 将响应可视化。google.maps.Data 类原生支持 GeoJSON，这意味着您无需手动反转 [longitude, latitude] 坐标顺序。

以下 JavaScript 代码段演示了如何将 API 响应直接添加到地图中：

// Assume 'map' is an initialized google.maps.Map object
// and 'responseData' is the parsed JSON payload returned by the Isochrones API.

const isochroneGeoJson = responseData.isochrone.geoJson;

// Wrap the geometry in a standard GeoJSON Feature
const geoJsonFeature = {
    type: "Feature",
    geometry: isochroneGeoJson,
    properties: {}
};

// Add the GeoJSON Feature to the map's data layer
map.data.addGeoJson(geoJsonFeature);

// Optional: Apply custom styling to the isochrone polygon
map.data.setStyle({
    fillColor: '#4285F4',
    fillOpacity: 0.3,
    strokeColor: '#4285F4',
    strokeWeight: 2
});