Xử lý và trực quan hoá phản hồi của Isochrones API

API Isochrones trả về hình học ở định dạng GeoJSON tiêu chuẩn tuân thủ RFC 7946. Phản hồi luôn chứa một đối tượng hình học MultiPolygon trong isochrone.geoJson (isochrone.geo_json trong gRPC):

• Thứ tự toạ độ: Mỗi vị trí là một cặp [longitude, latitude] theo độ thập phân WGS 84.
• Nhiều đa giác (coordinates[i]): Các khu vực đẳng thời có thể tiếp cận có thể bao gồm nhiều đa giác rời rạc (ví dụ: khi một cây cầu hoặc đường hầm cao tốc kết nối với một khu vực riêng biệt có thể tiếp cận, hoặc khi một đa giác vượt qua ±180° kinh tuyến đối diện bị chia dọc theo kinh tuyến theo RFC 7946 §3.1.9).
• Vỏ ngoài và lỗ bên trong (coordinates[i][j]): Trong mỗi đa giác coordinates[i], vòng tuyến tính đầu tiên (coordinates[i][0]) là vỏ ngoài được quấn ngược chiều kim đồng hồ và mọi vòng tuyến tính tiếp theo (coordinates[i][1..k]) đại diện cho các lỗ bên trong (chẳng hạn như hồ, công viên hoặc các túi chưa được ánh xạ) được quấn theo chiều kim đồng hồ theo quy tắc bàn tay phải RFC 7946 §3.1.6. Mỗi vòng tròn tuyến tính đều khép kín (vị trí [longitude, latitude] đầu tiên và cuối cùng giống hệt nhau).

Ví dụ sau đây cho thấy phản hồi MultiPolygon chứa một đa giác chính có lỗ bên trong và một đa giác rời rạc thứ hai:

{
  "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]
          ]
        ]
      ]
    }
  }
}

Trực quan hoá đường đẳng thời trên bản đồ

Vì API này trả về GeoJSON chuẩn, nên bạn có thể trực quan hoá phản hồi bằng Maps JavaScript API. Lớp google.maps.Data hỗ trợ GeoJSON theo cách gốc, tức là bạn không cần phải đảo ngược thứ tự toạ độ [longitude, latitude] theo cách thủ công.

Đoạn mã JavaScript sau đây minh hoạ cách thêm phản hồi của API trực tiếp vào bản đồ:

// 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
});