Một điểm cần lưu ý là việc thay đổi vị trí các đối tượng điều khiển này có thể trùng vị trí của các đối tượng giao diện người dùng của Google mà người dùng không thể thay đổi như thông tin hiển thị bản quyền của Google, trong trường hợp này đối tượng điều khiển sẽ được chú thích hiển thị và chỉ hiển thị rõ khi người dùng cần đến (sử dụng các sự kiện tác động vào bản đồ).
2.2.4.7. Tự tạo các đối tượng điều khiển
Bên cạnh việc chỉnh sửa thông số, thay đổi vị trí của các đối tượng điều khiển đã có sẵn, lập trình viên có thể tự tạo ra các đối tượng điều khiển để đưa vào ứng dụng bản đồ của mình. Đối tượng điều khiển được tạo ra sẽ đứng độc lập phía trên của vùng hiển thị bản đồ. Trong một số trường hợp, các đối tượng tự tạo chỉ đơn giản sử dụng thẻ <div> để tạo ra khu vực giao diện độc lập tương tác với người dùng, hiển thị một số giao diện người dùng và tương tác thông qua các sự kiện tạo ra bởi người dùng. Các nguyên tắc cơ bản để tạo ra một đối tượng điều khiển bao gồm:
+ Định nghĩa CSS để đối tượng điều khiển hiển thị.
+ Định nghĩa đối tượng điều khiển gắn với người dùng hoặc bản đồ thông qua việc thay đổi thuộc tính bản đồ hoặc tương tác với các sự kiện tạo ra bởi người dùng.
+ Tạo thẻ <div> để đặt đối tượng điều khiển và gắn đối tượng này với thuộc tính điều khiển của bản đồ.
- Xây dựng giao diện cho đối tượng điều khiển: Để xây dựng giao diện cho đối tượng điều khiển, trước tiên chúng ta cần đưa các đối tượng điều khiển tự tạo vào thẻ <div>, điều này đảm bảo việc đưa đối tượng điều khiển vào một khu vực độc lập, tiện cho việc xây dựng giao diện và gán các thuộc tính sử dụng. Để xây dựng được giao diện tốt cho các đối tượng điều khiển, lập trình viên phải có kiến thức về CSS và mô hình kiến trúc DOM.
- Gắn đối tượng điều khiển với các sự kiện: Bất cứ một đối tượng điều khiển nào cũng cần thực thi một nhiệm vụ nhất định theo mục đích của người lập trình. Thông thường việc gắn nhiệm vụ cho đối tượng điều khiển tự tạo được thực hiện qua hình thức tương tác với các sự kiện tạo ra bởi người dùng hoặc tương tác làm thay đổi trạng thái của bản đồ. Để tương tác với các sự kiện tạo ra bởi người dùng, Google cung cấp các API tương tác với trình duyệt bằng phương thức addDomListener() để bắt hầu hết các sự kiện tại các trình duyệt hỗ trợ mô hình DOM, đây thường là các sự kiện cơ bản của mô hình DOM nhưng thông qua phương thức addDomListener() để chuyển dữ liệu xử lý tới bản đồ.
- Định vị đối tượng điều khiển: Những đối tượng điều khiển tự tạo thường định vị trên bản đồ thông qua các khu vực đã được định nghĩa để đặt nó (thông qua thẻ <div>), gắn đối tường vào bản đồ bằng việc sử dụng phương thức
bỏ, API sẽ cập nhật hiện trạng các đối tượng điều khiển của ứng dụng. API định vị các vị trí của các đối tượng điều khiển thông qua mục lục thuộc tính, đối tượng có số thứ tự nhỏ trong mục lục sẽ hiển thị trước, ví dụ có 2 đối tượng điều khiển được đặt tại khu vực BOTTOM_RIGHT thì đối tượng có thứ tự nhỏ trong mục lục sẽ hiển thị phía trên đối tượng có thứ tự lớn (đứng sau). Mặc định, các đối tượng điều khiển được tạo bởi lập trình viên sẽ hiển thị sau các đối tượng mặc định, tuy vậy Google vẫn cung cấp các tùy chọn cho phép thay đổi thứ tự này thông qua việc khai báo thay đổi thứ tự trong mục lục điều khiển.
2.2.4.8. Thêm thông số trạng thái cho đối tượng điều khiển
Một số đối tượng điều khiển tác động lên trạng thái của bản đồ, các đối tượng điều khiển này được gắn với mã chương trình tương ứng với các sự kiện xảy ra khi thay đổi trạng thái của bản đồ, để thực hiện việc này, lập trình viên phải định hình trước được yêu cầu và xây dựng mã phù hợp.
2.2.5. Các tầng bổ sung cho bản đồ
2.2.5.1. Tổng quan
Nhóm các API cho phép bổ sung các tầng cho bản đồ (chồng lặp bản đồ) là nhóm chức năng quan trọng và có tầm ảnh hưởng lớn đối với lập trình viên trong việc cá nhân hóa bản đồ để xây dựng các ứng dụng WebGIS. Thực chất đây là các đối tượng cho phép bổ sung dữ liệu vào bản đồ tại những tọa độ cụ thể để nó hiển thị khi chạy ứng dụng WebGIS và cung cấp bổ sung thông tin cho bản đồ, điển hình là các điểm được đánh dấu, các đường được bổ sung, các vùng được khoanh, … Có một số dạng bổ sung tầng cho bản đồ gồm:
- Đánh dấu một điểm cụ thể trên bản đồ bằng phương thức đánh dấu điểm có tọa độ cụ thể. Thông thường các điểm đánh dấu này được hiển thị và nhấn mạnh cho người dùng bằng các hình ảnh biểu tượng khác biệt giúp người dùng dễ nhận dạng.
- Bổ sung các đường trên bản đồ thông qua đối tượng cho phép vẽ các đường thẳng nối hai điểm có tọa độ cố định trên bản đồ. Dựa vào đối tượng này, người phát triển ứng dụng có thể bổ sung thêm một đoạn đường cho bản đồ thông qua việc gọi đối tượng xây dựng các đường nối nhiều điểm lại với nhau.
- Chúng ta có thể đánh dấu một khu vực địa lý đặc biệt thông qua việc sử dụng các đối tượng khoanh vùng khu vực trên bản đồ, việc khoanh vùng thực hiện bằng cách nối nhiều điểm có tọa độ xác định thành một vòng tuần hoàn khép kín.
- Google cung cấp các tùy chọn cho phép tạo ra phương thức hiển thị bản đồ mới của người dùng, theo đó người dùng có thể tạo ra cách hiển thị bản đồ bao gồm việc bổ sung hoặc cắt bỏ một số tầng so với bản đồ gốc.
- Cửa sổ thông tin là một đối tượng hữu ích để bổ sung thông tin cho một điểm đã được đánh dấu, một khu vực đã được chọn hay một đối tượng cụ thể đã được chọn. Cửa sổ thông tin phát huy hiệu quả rất lớn cho việc phát triển các ứng dụng WebGIS của lâp trình viên. Tại cửa sổ thông tin, chúng ta có thể xây dựng cơ sở dữ liệu quan trọng phục vụ người dùng như hiển thị thông tin địa điểm, ảnh minh họa, các liên kết đến các vấn đề liên quan tới địa điểm, …
- Ngoài một số đối tượng điển hình sử dụng để bổ sung các tầng cho bản đồ, lập trình viên có thể bổ sung các đối tượng tự tạo khác phù hợp với chuẩn của Google.
2.2.5.2. Thêm đối tượng chồng lặp bản đồ
Các đối tượng bổ sung tầng cho bản đồ (chồng lặp bản đồ) thường được thêm theo một cấu trúc đã định sẵn. Các đối tượng này có thể được định nghĩa và hiển thị trên bản đồ thông qua việc khai thông số tùy chọn cho các đối tượng khác liên quan khi xây dựng bản đồ. Cách thứ hai để thêm đối tượng bổ sung tầng cho bản đồ là sử dụng trực tiếp phương thức overlay's setMap(), bỏ qua các tùy chọn để thêm đối tượng bổ sung tầng vào bản đồ.
2.2.5.3. Gỡ bỏ đối tượng chồng lặp bản đồ
Để ẩn một đối tượng bổ sung tầng cho bản đồ, chỉ cần gọi phương thức
overlay's setMap() với tham số trống, phương thức này không xóa đối tượng mà chỉ làm cho nó không hiển thị trên bản đồ. Nếu muốn xóa bỏ đối tượng thì cần gỡ bỏ đoạn mã tạo đối tượng ra khỏi ứng dụng. Với việc phát triển các ứng dụng động, các thông số liên quan tới các đối tượng này thường được lưu trữ trong cơ sở dữ liệu và quản lý mã bằng ngôn ngữ lập trình phía máy chủ để giúp người quản trị chủ động thay đổi khi cần [4]. Khi viết mã quản lý các đối tượng bổ sung cho tầng bản đồ, các đối tượng này thường được lưu và cung cấp cho Google API dưới dạng mảng với các thông số hiển thị kèm theo để tiện cho việc quản lý và hiển thị trên bản đồ.
2.2.5.4. Đối tượng đánh dấu điểm
Đối tượng đánh dấu cho phép đánh dấu một địa điểm trên bản đồ để người sử dụng dễ dàng nhận ra điểm cần tìm. Khi hiển thị trên bản đồ điểm đánh dấu được nhấn mạnh cho người dùng nhận ra khi nó được hiển thị bằng một
biểu tượng mặc định của Google. Đối với mỗi đối tượng đánh dấu được tạo, có các thông số cơ bản kèm theo và một số lựa chọn hiển thị và bổ sung thông tin:
- Position: Tọa độ cụ thể của điểm cần đánh dấu, đây là tham số bắt buộc.
- Map: Đây là lựa chọn thêm, chỉ định bản đồ mà đối tượng đánh dấu sẽ hiển thị.
Với các tùy chọn nói trên, chúng ta có thể tạo ra hàng loạt đối tượng đánh dấu và quản lý chúng, chỉ cho chúng hiển thị trên một bản đồ cụ thể khi cần bằng các gọi phương thức marker's setMap(). Điều này đặc biệt thuận tiện khi xây dựng các ứng dụng bản đồ có sử dụng cơ sở dữ liệu để lưu trữ các đối tượng đánh dấu, người lập trình viên sẽ viết mã thực thi trên máy chủ để quản lý việc thêm, bớt và hiển thị điểm đánh dấu giúp cho quản trị mạng dễ dàng quản lý ứng dụng [9].
Đối tượng đánh dấu được thiết kế để tương tác với người sử dụng, mặc định nó sẽ phản ứng với sự kiện nhấn chuột của người dùng. Một ví dụ điển hình là khi người dùng nhấn chuột và một điểm đánh dấu, cửa sổ thông tin sẽ hiện ra.
- Đối tượng dạng hoạt hình: Một tùy chọn làm tăng sự chú ý của người dùng đối với điểm được đánh dấu là các biểu tượng hiển thị điểm đánh dấu có thể chuyển động dạng hoạt hình. Cách để các biểu tượng hiển thị đối tượng đánh dấu chuyển động là thông qua thuộc tính google.maps.Animation của đối tượng, có một số dạng hoạt hình được hỗ trợ gồm:
+ DROP: Biểu tượng sẽ rơi từ phía trên xuống điểm được đánh dấu khi người dùng nhấn chuột vào biểu tượng và sẽ tiếp tục chuyển động lặp lại cho đến khi xảy ra sự kiện tiếp theo.
+ BOUNCE: Biểu tượng sẽ bật lên từ vị trí được đánh dấu và lặp lại cho tới khi có sự kiện khác xảy ra.
Một chú ý là nếu có nhiều điểm đánh dấu hiển thị trong bản đồ và chúng ta không muốn tất cả biểu tượng đánh dấu đều chuyển động, lập trình viên có thể sử dụng phương thức setTimeout() để thay đổi thời gian chuyển động của các biểu tượng.
2.2.5.5. Biểu tượng
Thay vì biểu tượng mặc định, đối tượng đánh dấu có thể được hiển thị bằng một biểu tượng khác, có một số dạng biểu tựng như sau:
- Biểu tượng đơn giản: Thông thường, biểu tượng đơn giản được sử dụng là một ảnh được gắn vào đối tượng đánh dấu thông qua việc khai báo trong
thuộc tính của đối tượng đánh dấu đường dẫn tới ảnh đó, Google sẽ tự động điều chỉnh kích thước ảnh cho phù hợp với khung hiển thị bản đồ. Như vậy người dùng có thể sử dụng các phần mềm đồ họa để tạo ra các biểu tượng ảnh có ý nghĩa liên quan tới các đối tượng đánh dấu, đưa lên máy chủ lưu trữ trên Internet và khai báo sử dụng khi tạo đối tượng đánh dấu, từ đó nó sẽ được hiển thị phù hợp trên bản đồ.
- Nhóm biểu tượng: Nếu có một nhóm đối tượng có thuộc tính cơ bản giống nhau cần đánh dấu, chúng ta sẽ không mất thời gian gán biểu tượng cho từng địa điểm mà dùng phương pháp gán biểu tượng theo nhóm nhưng vẫn đảm bảo tương tác với người dùng là độc lập với từng địa điểm được đánh dấu, vấn đề chính ở đây là tiết kiệm thời gian khai báo kê khai chi tiết từng điểm đánh dấu. Khi duyệt trên bản đồ, các biểu tượng trong nhóm sẽ hiển thị đồng loạt, gống nhau, tuy vậy tương tác với người dùng một cách độc lập.
2.2.5.6. Đối tượng đường chồng lặp
Đường chồng lặp (bổ sung) được hỗ trợ để chúng ta có thể tạo ra tầng bổ sung cho bản đồ giúp chỉ rõ một đoạn đường cần nhấn mạnh trong định hướng hoặc cung cấp thông tin hoặc bổ sung các đoạn đường chi tiết chưa được cập nhật trong bản đồ nền của Google. Việc tạo ra các con đường hoặc các đoạn đánh dấu thực hiện qua việc khai báo liên tiếp nhiều đối tượng đường nối các điểm liền kề.
- Các tham số xây dựng đường chồng lặp: Kiến trúc của đối tượng đường bổ sung cho tầng bản đồ có các thông số tọa độ xây dựng đường và các thông số liên quan tới cách hiển thị đường. Các đường này được vẽ trên tầng bổ sung cho bản đồ dưới dạng các đoạn thẳng nối với nhau liên tiếp, trong đó có các tùy chọn khai báo về màu sắc, kích thước đường và độ đậm nhạt thông qua đối tượng
Polyline options, có một số định dạng đường để chúng ta lựa chọn, cụ thể:
+ Định dạng về màu sắc: Sử dụng mã màu sắc theo ngôn ngữ HTML dạng chữ số hệ hexa "#FFFFFF", Google không hỗ trợ màu sắc theo tên (xanh, đỏ, tím, vàng, …)
+ Định dạng về độ đậm nhạt của đường: Độ đậm nhạt của đường được khai báo dạng số thập phân từ 0,0-1,0, trong đó mặc định là 1,0.
+ Định dạng về độ rộng của đường: Độ rộng của đường được định dạng theo kích thước điểm theo đơn vị điểm ảnh.
cho tầng bổ sung của bản đồ. Gọi đối tượng Polyline's getPath() để nhận kết quả trả về dạng mảng MVCArray, cụ thể các khai báo:
+ getAt() trả về kết quả tọa độ điểm đầu của mảng tọa độ.
+ insertAt() thêm tọa độ điểm tiếp theo vào mảng, không bao gồm điểm đã tồn tại, sau khi thêm điểm tiếp theo sẽ được đẩy lên phía trên.
+ removeAt(): Bỏ bớt một tọa độ trong mảng.
Khi cần gọi một tọa độ đã được lưu trong mảng mvcArray thì không thể dùng cú pháp mvcArray[i] mà phải dùng cú pháp mvcArray.getAt(i).
2.2.5.7. Đối tượng khoanh vùng chồng lặp bản đồ
Đối tượng khoanh vùng bản đồ giống như đối tượng đường, điểm khác biệt quan trọng tạo ra đối tượng khoanh vùng bằng cách nối các điểm liên tiếp thành một vùng khép kín tuần hoàn. Giống như đối tượng đường, đối tượng khoanh vùng cho phép định nghĩa tọa độ các điểm để tạo đường tuần hoàn, ngoài ra chúng ta có thể định nghĩa tọa độ các điểm nằm trong khu vực được khoanh vùng.
- Các thuộc tính khoanh vùng: Giống như đối tượng đường, chúng ta có thể định nghĩa độ đậm nhạt, màu sắc đường bao và màu của khu vực được khoanh vùng. Màu sắc được định nghĩa dạng ký tự hexa như trong ngôn ngữ HTML, không hỗ trợ màu theo tên. Vì đối tượng khoanh vùng chứa nhiều đối tượng đường, do vậy nó được lưu trữ dưới dạng mảng trong mảng dạng MVCArray.
- Định nghĩa một đối tượng khoanh vùng: Nếu định nghĩa theo kiểu đường, một đối tượng khoanh vùng gồm N đường sẽ phải định nghĩa N+1 điểm, khi đó tọa độ điểm đầu và điểm cuối N+1 trùng nhau, Google hỗ trợ tự động nối điểm cuối và điểm đầu của khu vực khoanh vùng mà không cần định nghĩa thêm điểm N+1.
- Mảng dùng để khoanh vùng: Khi khoanh vùng, các tọa độ được lưu trữ dưới dạng mảng trong mảng MVCArray. Mỗi đối tượng trong mảng chứa mảng con gồm một đường (một đường sẽ có mảng chứa các tọa độ tạo nên đường đó). Để nhận tọa độ tại một vị trí trong khu vực đã được khoanh vùng ta gọi phương thức Polygon's getPaths, khi mảng MVCArray đã hoàn thành, chúng ta sử dụng một số hàm để thao tác, cụ thể: getAt() trả về tọa độ điểm đầu của đường bao vùng; insertAt() thêm tọa độ điểm tiếp theo của đường bao vùng, đặt sau những điểm đã được thêm vào trước đó, không trùng lặp với các điểm đã thêm vào