Isochrones API レスポンスを処理して可視化する

Isochrones API は、RFC 7946 に準拠した標準の GeoJSON 形式でジオメトリを返します。レスポンスには、常に isochrone.geoJson（gRPC では isochrone.geo_json）の下に MultiPolygon ジオメトリ オブジェクトが含まれます。

• 座標の順序: すべての位置は、WGS 84 の 10 進法による [longitude, latitude] ペアです。
• 複数のポリゴン（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] の位置が同じである）。

次の例は、内側に穴があるメインのポリゴンと、2 つ目の分離されたポリゴンを含む 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
});