FeatureStyleFunction
là nơi bạn xác định logic để tạo kiểu cho các tính năng trong một tập dữ liệu. Hàm này trả về FeatureStyleOptions
dựa trên logic này. Nếu không cần logic tạo kiểu, bạn có thể sử dụng FeatureStyleOptions
để đặt kiểu trực tiếp. Trang này hướng dẫn bạn cách thêm tập dữ liệu vào bản đồ và áp dụng kiểu.
Điều kiện tiên quyết
Trước khi tiếp tục, bạn cần có một mã bản đồ và kiểu bản đồ, cũng như một mã tập dữ liệu.
Liên kết mã tập dữ liệu với kiểu bản đồ
Hãy làm theo các bước sau để liên kết tập dữ liệu của bạn với kiểu bản đồ mà bạn đang sử dụng:
- Trong Google Cloud Console, hãy chuyển đến trang Tập dữ liệu.
- Nhấp vào tên của tập dữ liệu. Trang Thông tin chi tiết về tập dữ liệu sẽ xuất hiện.
- Nhấp vào thẻ Xem trước.
- Di chuyển đến mục THÊM KIỂU BẢN ĐỒ rồi nhấp vào mục đó.
- Nhấp vào(các) hộp đánh dấu tương ứng với(các) Kiểu bản đồ bạn muốn liên kết, sau đó nhấp vào LƯU.
Sử dụng quy tắc kiểu đơn giản
Cách đơn giản nhất để tạo kiểu cho các tính năng là truyền FeatureStyleOptions
để xác định các thuộc tính kiểu như màu sắc, độ mờ và độ đậm của đường kẻ. Áp dụng trực tiếp các tuỳ chọn kiểu đối tượng cho lớp đối tượng tập dữ liệu hoặc sử dụng các tuỳ chọn đó cùng với FeatureStyleFunction
.
TypeScript
const styleOptions = { strokeColor: 'green', strokeWeight: 2, strokeOpacity: 1, fillColor: 'green', fillOpacity: 0.3, };
JavaScript
const styleOptions = { strokeColor: "green", strokeWeight: 2, strokeOpacity: 1, fillColor: "green", fillOpacity: 0.3, };
Sử dụng quy tắc kiểu khai báo
Sử dụng FeatureStyleFunction
để thiết lập các quy tắc kiểu theo cách khai báo và áp dụng các quy tắc đó trên toàn bộ tập dữ liệu. Áp dụng FeatureStyleOptions
cho một đặc điểm dựa trên giá trị thuộc tính của tập dữ liệu. Bạn cũng có thể trả về null
từ hàm kiểu tính năng, ví dụ: nếu bạn muốn một tập hợp con các tính năng vẫn ẩn. Ví dụ này cho thấy một hàm định kiểu tô màu một tập hợp các điểm dựa trên các thuộc tính dữ liệu:
TypeScript
function setStyle(/* FeatureStyleFunctionOptions */ params) { // Get the dataset feature, so we can work with all of its attributes. const datasetFeature = params.feature; // Get all of the needed dataset attributes. const furColors = datasetFeature.datasetAttributes['CombinationofPrimaryandHighlightColor']; // Apply styles. Fill is primary fur color, stroke is secondary fur color. switch (furColors) { case 'Black+': return /* FeatureStyleOptions */ { fillColor: 'black', pointRadius: 8 }; break; case 'Cinnamon+': return /* FeatureStyleOptions */ { fillColor: '#8b0000', pointRadius: 8 }; break; case 'Cinnamon+Gray': return /* FeatureStyleOptions */ { fillColor: '#8b0000', strokeColor: 'gray', pointRadius: 6 }; break; case 'Cinnamon+White': return /* FeatureStyleOptions */ { fillColor: '#8b0000', strokeColor: 'white', pointRadius: 6 }; break; case 'Gray+': return /* FeatureStyleOptions */ { fillColor: 'gray', pointRadius: 8 }; break; case 'Gray+Cinnamon': return /* FeatureStyleOptions */ { fillColor: 'gray', strokeColor: '#8b0000', pointRadius: 6 }; break; case 'Gray+Cinnamon, White': return /* FeatureStyleOptions */ { fillColor: 'silver', strokeColor: '#8b0000', pointRadius: 6 }; break; case 'Gray+White': return /* FeatureStyleOptions */ { fillColor: 'gray', strokeColor: 'white', pointRadius: 6 }; break; default: // Color not defined. return /* FeatureStyleOptions */ { fillColor: 'yellow', pointRadius: 8 }; break; } }
JavaScript
function setStyle(/* FeatureStyleFunctionOptions */ params) { // Get the dataset feature, so we can work with all of its attributes. const datasetFeature = params.feature; // Get all of the needed dataset attributes. const furColors = datasetFeature.datasetAttributes["CombinationofPrimaryandHighlightColor"]; // Apply styles. Fill is primary fur color, stroke is secondary fur color. switch (furColors) { case "Black+": return /* FeatureStyleOptions */ { fillColor: "black", pointRadius: 8 }; break; case "Cinnamon+": return /* FeatureStyleOptions */ { fillColor: "#8b0000", pointRadius: 8 }; break; case "Cinnamon+Gray": return /* FeatureStyleOptions */ { fillColor: "#8b0000", strokeColor: "gray", pointRadius: 6, }; break; case "Cinnamon+White": return /* FeatureStyleOptions */ { fillColor: "#8b0000", strokeColor: "white", pointRadius: 6, }; break; case "Gray+": return /* FeatureStyleOptions */ { fillColor: "gray", pointRadius: 8 }; break; case "Gray+Cinnamon": return /* FeatureStyleOptions */ { fillColor: "gray", strokeColor: "#8b0000", pointRadius: 6, }; break; case "Gray+Cinnamon, White": return /* FeatureStyleOptions */ { fillColor: "silver", strokeColor: "#8b0000", pointRadius: 6, }; break; case "Gray+White": return /* FeatureStyleOptions */ { fillColor: "gray", strokeColor: "white", pointRadius: 6, }; break; default: // Color not defined. return /* FeatureStyleOptions */ { fillColor: "yellow", pointRadius: 8 }; break; } }
Áp dụng kiểu cho lớp đối tượng tập dữ liệu
Cách áp dụng kiểu trong hàm kiểu tính năng:
- Lấy lớp tính năng của tập dữ liệu bằng cách gọi
map.getDatasetFeatureLayer()
, truyền mã nhận dạng tập dữ liệu. - Áp dụng kiểu bằng cách đặt tuỳ chọn kiểu của tính năng (ví dụ:
styleOptions
) hoặc hàm (ví dụ:setStyle
) trên lớp tập dữ liệu.
TypeScript
const datasetLayer = map.getDatasetFeatureLayer(datasetId); datasetLayer.style = styleOptions;
JavaScript
const datasetLayer = map.getDatasetFeatureLayer(datasetId); datasetLayer.style = styleOptions;
Xoá kiểu khỏi một lớp
Để xoá kiểu khỏi một lớp, hãy đặt style
thành null
:
featureLayer.style = null;
Bạn cũng có thể trả về null
từ hàm kiểu tính năng, chẳng hạn như nếu bạn muốn duy trì trạng thái ẩn của một tập hợp con các tính năng.
Thêm văn bản ghi công
Bản đồ của bạn phải hiển thị mọi thuộc tính được yêu cầu khi hiển thị tập dữ liệu được tải lên trên Google Maps. Văn bản thuộc tính không được che khuất hoặc can thiệp vào biểu trưng Google.
Một cách để thêm văn bản thuộc tính là sử dụng chế độ điều khiển tuỳ chỉnh để đặt HTML tuỳ ý tại các vị trí tiêu chuẩn trên bản đồ. Ví dụ về mã sau đây cho thấy một hàm tạo một thành phần điều khiển tuỳ chỉnh như vậy theo phương thức lập trình:
TypeScript
function createAttribution(map) { const attributionLabel = document.createElement('div'); // Define CSS styles. attributionLabel.style.backgroundColor = '#fff'; attributionLabel.style.opacity = '0.7'; attributionLabel.style.fontFamily = 'Roboto,Arial,sans-serif'; attributionLabel.style.fontSize = '10px'; attributionLabel.style.padding = '2px'; attributionLabel.style.margin = '2px'; attributionLabel.textContent = 'Data source: NYC Open Data'; return attributionLabel; }
JavaScript
function createAttribution(map) { const attributionLabel = document.createElement("div"); // Define CSS styles. attributionLabel.style.backgroundColor = "#fff"; attributionLabel.style.opacity = "0.7"; attributionLabel.style.fontFamily = "Roboto,Arial,sans-serif"; attributionLabel.style.fontSize = "10px"; attributionLabel.style.padding = "2px"; attributionLabel.style.margin = "2px"; attributionLabel.textContent = "Data source: NYC Open Data"; return attributionLabel; }
Sau khi xác định thành phần điều khiển, bạn có thể thêm thành phần đó vào bản đồ tại thời điểm khởi chạy, như minh hoạ dưới đây:
TypeScript
// Create an attribution DIV and add the attribution to the map. const attributionDiv = document.createElement('div'); const attributionControl = createAttribution(map); attributionDiv.appendChild(attributionControl); map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(attributionDiv);
JavaScript
// Create an attribution DIV and add the attribution to the map. const attributionDiv = document.createElement("div"); const attributionControl = createAttribution(map); attributionDiv.appendChild(attributionControl); map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(attributionDiv);