Thêm tập dữ liệu vào bản đồ

Sản phẩm hoặc tính năng này đang ở giai đoạn Xem trước (trước giai đoạn phát hành rộng rãi). Các tính năng và sản phẩm trước giai đoạn phát hành rộng rãi có thể bị hạn chế hỗ trợ. Đồng thời, các thay đổi đối với sản phẩm và tính năng trước giai đoạn phát hành rộng rãi có thể không tương thích với các phiên bản khác trước giai đoạn phát hành rộng rãi. Các Sản phẩm trước giai đoạn phát hành rộng rãi chịu sự điều chỉnh của Điều khoản dành riêng cho dịch vụ của Nền tảng Google Maps. Để biết thêm thông tin, hãy xem nội dung mô tả về giai đoạn ra mắt.

FeatureStyleFunction là nơi bạn xác định logic để tạo kiểu có chọn lọc cho các đối tượng trong một tập dữ liệu. Phương thức này trả về FeatureStyleOptions dựa trên logic này. Nếu không bắt buộc phải có logic định kiểu, bạn có thể sử dụng FeatureStyleOptions để trực tiếp đặt các 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ã bản đồ, kiểu bản đồ và mã tập dữ liệu.

• Tạo mã bản đồ và kiểu bản đồ
• Tạo và tải tập dữ liệu lên

Liên kết mã tập dữ liệu với kiểu bản đồ

Thực hiện các bước sau để liên kết tập dữ liệu với kiểu bản đồ mà bạn đang sử dụng:

1. Trong Google Cloud Console, hãy chuyển đến trang Tập dữ liệu.
2. 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.
3. Nhấp vào thẻ Xem trước.
4. Di chuyển xuống, rồi nhấp vào THÊM KIỂU BẢN ĐỒ.
   
5. Nhấp vào(các) hộp đánh dấu tương ứng với(các) Kiểu bản đồ cần liên kết, rồi nhấp vào LƯU.

Thận trọng: Việc hiển thị nhiều tập dữ liệu trên một bản đồ có thể ảnh hưởng đến hiệu suất, tuỳ thuộc vào kích thước và số lượng tập dữ liệ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 đối tượ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 trong tập dữ liệu hoặc sử dụng các tuỳ chọn này cùng với FeatureStyleFunction.

TypeScript

const styleOptions = {
    strokeColor: 'green',
    strokeWeight: 2,
    strokeOpacity: 1,
    fillColor: 'green',
    fillOpacity: 0.3,
};
index.ts

Lưu ý: Hãy đọc hướng dẫn về cách sử dụng TypeScript và Google Maps.

JavaScript

const styleOptions = {
  strokeColor: "green",
  strokeWeight: 2,
  strokeOpacity: 1,
  fillColor: "green",
  fillOpacity: 0.3,
};
index.js

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. Áp dụng FeatureStyleOptions cho một tính năng dựa trên các giá trị thuộc tính 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 không xuất hiệ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; 
    }
}
index.ts

Lưu ý: Hãy đọc hướng dẫn về cách sử dụng TypeScript và Google Maps.

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;
  }
}
index.js

Á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 đối tượng:

1. Lấy lớp tính năng 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.
2. Áp dụng kiểu bằng cách đặt các tuỳ chọn kiểu đối tượ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;
index.ts

Lưu ý: Hãy đọc hướng dẫn về cách sử dụng TypeScript và Google Maps.

JavaScript

const datasetLayer = map.getDatasetFeatureLayer(datasetId);

datasetLayer.style = styleOptions;
index.js

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 các tính năng vẫn không xuất hiệ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 bắt buộc 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 cản trở biểu trưng của Google.

Một cách để thêm văn bản thuộc tính là sử dụng các chế độ điều khiển tuỳ chỉnh để đặt HTML tuỳ ý tại các vị trí chuẩn trên bản đồ. Ví dụ về mã sau đây cho thấy một hàm tạo ra một chế độ đ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;
}
index.ts

Lưu ý: Hãy đọc hướng dẫn về cách sử dụng TypeScript và Google Maps.

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;
}
index.js

Sau khi xác định được thành phần điều khiển, bạn có thể thêm thành phần đ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);
index.ts

Lưu ý: Hãy đọc hướng dẫn về cách sử dụng TypeScript và Google Maps.

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);
index.js