FeatureStyleFunction
,
là nơi bạn xác định logic để chọn lọc các đối tượng trong một tập dữ liệu. Nó
trả về FeatureStyleOptions
dựa trên logic này. Nếu không cần logic định kiểu, bạn có thể sử dụng FeatureStyleOptions
để trực tiếp đặt kiểu. Trang này cho bạn biết 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 đồ bạn đang sử dụng:
- Trong Google Cloud Console, hãy truy cập vào 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.
- Nhấp vào(các) hộp kiểm cho(các) Kiểu bản đồ cần liên kết và 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 kiểu đối tượng
trực tiếp vào lớp đối tượng của tập dữ liệu hoặc sử dụng chúng cùng với một lớp đối tượng
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
để đặt 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 của bạn. Áp dụng FeatureStyleOptions
cho một tính năng dựa trên
các giá trị thuộc tính của tập dữ liệu. Bạn cũng có thể trả về null
từ kiểu tính năng
hàm, ví dụ: nếu bạn muốn một tập hợp con các tính năng tiếp tục ẩn. Chiến dịch này
ví dụ cho thấy một hàm kiểu tô màu một tập hợp các điểm dựa trên dữ liệu
thuộc tính:
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:
- Tải lớp đối tượ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 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, ví dụ nếu bạn
muốn một tập hợp con tính năng tiếp tục ẩn.
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ị đượ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 ảnh hưởng đến Biểu trưng của Google.
Một cách để thêm văn bản ghi nhận tác giả là sử dụng chế độ kiểm soát tuỳ chỉnh để đặt HTML tuỳ ý tại các vị trí tiêu chuẩn trên bản đồ. Mã sau đây ví dụ cho thấy một hàm có lập trình để tạo một thành phần điều khiển tuỳ chỉnh như vậy:
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 điều khiển, bạn có thể thêm điều khiể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);