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

Chọn nền tảng: Android iOS JavaScript

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. 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 một 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 phải 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 một tập dữ liệu lên

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

Thử nghiệm: Bạn chỉ có thể đặt tính năng này cho kiểu bản đồ sáng. Khi bạn liên kết một kiểu bản đồ sáng có bật tính năng này với một mã bản đồ, các lớp đã bật cũng có sẵn cho kiểu bản đồ tối.

Hãy làm theo 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 đến phần THÊM KIỂU BẢN ĐỒ rồi nhấp vào.
   
5. Nhấp vào(các) hộp đánh dấu cho(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 kết xuất nhiều tập dữ liệu trên 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 các 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 một FeatureStyleOptions để xác định các thuộc tính kiểu như màu sắc, độ mờ và độ dày của đường kẻ. Áp dụng các lựa chọn về kiểu đối tượng trực tiếp cho một lớp đối tượng của tập dữ liệu hoặc sử dụng các lựa 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 về kiểu một 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 đối tượ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ừ hàm kiểu đối tượng của mình, chẳng hạn như nếu bạn muốn một nhóm nhỏ các đối tượng vẫn không xuất hiện. Ví dụ này cho thấy một hàm kiểu giúp tô màu một tập hợp các điểm dựa trên 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 các kiểu trong hàm kiểu đối tượng:

1. Lấy lớp đối tượ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 lựa chọn kiểu 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;
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 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 đối tượng, chẳng hạn như nếu bạn muốn một nhóm nhỏ đối tượ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ị(các) thông tin ghi nhận quyền tác giả bắt buộc khi hiển thị các tập dữ liệu đã tải lên trên Google Maps. Văn bản ghi nhận quyền tác giả không được che khuất hoặc cản trở biểu trưng Google.

Một cách để thêm văn bản ghi nhận quyền tác giả là sử dụng các 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 đồ. Ví dụ về mã sau đây cho thấy một hàm tạo một chế độ kiểm soát 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 chế độ kiểm soát, bạn có thể thêm chế độ kiểm soát đó vào bản đồ tại thời điểm khởi tạo, như minh hoạ ở đâ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