Isochrones API 응답 처리 및 시각화

Isochrones API는 RFC 7946을 준수하는 표준 GeoJSON 형식으로 도형을 반환합니다. 응답에는 항상 isochrone.geoJson (gRPC의 isochrone.geo_json) 아래에 MultiPolygon 도형 객체가 포함됩니다.

• 좌표 순서: 모든 위치는 WGS 84 십진법 각도의 [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] 위치가 동일함).

다음 예는 내부 구멍이 있는 기본 다각형과 두 번째 분리된 다각형이 포함된 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
});