Thêm bản đồ 3D vào ứng dụng

Trang này trình bày một ví dụ về cách thêm bản đồ 3D cơ bản vào ứng dụng iOS bằng SDK Maps 3D dành cho iOS. Hướng dẫn trên trang này giả định rằng bạn đã hoàn tất các bước trong trang Thiết lập và có những điều sau:

• Một dự án trên Google Cloud đã bật SDK Maps 3D dành cho iOS
• Khoá API cho SDK Maps 3D dành cho iOS
• Xcode phiên bản 16.0 trở lên đã thêm gói SDK Maps 3D dành cho iOS đã thêm.

Để biết thêm thông tin về các điều kiện tiên quyết này, hãy xem phần Thiết lập.

Làm theo một lớp học lập trình nâng cao hơn.

Xem thêm mã mẫu trên GitHub.

Phần 1: Tạo ứng dụng SwiftUI cơ bản

1. Tạo ứng dụng mới trong Xcode.
2. Đặt Tên sản phẩm thành Hello3DWorld, với mã nhận dạng tổ chức được đặt thành com.example. Tên gói phải là com.example.Hello3DWorld.
3. Chọn giao diện SwiftUI.
4. Thêm thư viện Maps 3D vào ứng dụng. Xem hướng dẫn trong phần thiết lập section.

Phần 2: Thêm bản đồ

1. Mở tệp có tên là ContentView.swift. Đây là điểm truy cập và trình điều hướng chính cho ứng dụng của bạn.

2. Nhập SwiftUI và gói GoogleMaps3D.

3. Thay thế toàn bộ mã bên trong phần khai báo nội dung bằng Map(mode: .hybrid).

   Cấu hình ban đầu tối thiểu mà bạn cần cung cấp để khởi động Map là MapMode:

   • .hybrid,
   • .roadmap, hoặc
   • .satellite

   Tệp ContentView.swift của bạn sẽ có dạng như sau:

   import SwiftUI
   import GoogleMaps3D
   
   struct ContentView: View {
     var body: some View {
       Map(mode: .hybrid)
     }
   }
   
   #Preview {
     ContentView()
   }
   

Phần 3: Đặt khoá API.

1. Bạn phải đặt khoá API trước khi Bản đồ khởi động. Để thực hiện việc này, hãy đặt Map.apiKey trong trình xử lý sự kiện init() của View chứa Bản đồ.

   import SwiftUI
   import GoogleMaps3D
   
   struct ContentView: View {
     init () {
       Map.apiKey = "YOUR_API_KEY"
     }
   
     var body: some View {
       Map(mode: .hybrid)
     }
   }
   

Phần 4: Sử dụng camera để kiểm soát chế độ xem bản đồ

Chế độ xem Bản đồ 3D được kiểm soát bởi lớp Camera. Trong bước này, bạn sẽ tìm hiểu cách chỉ định vị trí, độ cao, hướng, độ nghiêng, độ xoay và phạm vi để tuỳ chỉnh chế độ xem bản đồ.

1. Thay đổi lệnh gọi hàm Map() để đưa vào thuộc tính initialCamera. Khởi động initialCamera để hiển thị chế độ xem trung tâm thành phố Manhattan.

   import SwiftUI
   import GoogleMaps3D
   
   struct ContentView: View {
     init () {
       Map.apiKey = "YOUR_API_KEY"
     }
     var body: some View {
       Map(initialCamera: .init(
         center: .init(latitude: 40.748339, longitude: -73.985912, altitude: 211.1),
         heading: 52,
         tilt: 68,
         roll: 0.0,
         range: 1039,
         fieldOfView: .degrees(50),
         altitudeMode: .relativeToGround
       ), mode: .hybrid)
     }
   }
   

Mã ở trên đặt giá trị cho các tham số sau:

• center: LatLngAltitude đại diện cho vị trí camera
• heading: Hướng tính bằng độ từ hướng bắc để hướng camera về phía đó.
• tilt: Góc nghiêng tính bằng độ, trong đó 0 là góc nhìn thẳng từ trên cao và 90 là góc nhìn theo chiều ngang.
• roll: Góc xoay quanh mặt phẳng dọc của camera, tính bằng độ.
• range: Khoảng cách tính bằng mét của camera từ vị trí vĩ độ, kinh độ
• fieldOfView: Góc đại diện cho trường nhìn của camera
• altitudeMode: Cách tính chiều cao của camera.

Nếu bạn không cung cấp bất kỳ tham số bổ sung nào trong số này, thì hệ thống sẽ sử dụng giá trị mặc định.

Để chế độ xem camera hiển thị thêm dữ liệu 3D, hãy đặt các tham số ban đầu để hiển thị chế độ xem nghiêng, gần hơn.

Phần 6: Xem trước và chạy ứng dụng

1. Thêm bản xem trước Xcode

   Bản xem trước là một tính năng mạnh mẽ của XCode cho phép bạn xem và tương tác với Ứng dụng mà không cần phải sử dụng Trình mô phỏng hoặc thiết bị bên ngoài.

   Để thêm bản xem trước, hãy thêm khối mã #Preview {} bên ngoài cấu trúc của bạn.

   #Preview {
     CameraDemo()
   }
   

2. Chạy ứng dụng

Tạo bản dựng và chạy ứng dụng

Xin chúc mừng!

Bạn đã thêm thành công bản đồ 3D vào ứng dụng!

Tiếp theo, bạn có thể khám phá thêm các tính năng nâng cao của SDK Maps 3D dành cho iOS, chẳng hạn như ảnh động đường dẫn camera, điểm đánh dấu 3D, hoặc đa giác.