將資料集新增至地圖

FeatureStyleFunction 可用來定義邏輯，以在資料集中選擇性地設定地圖項目的樣式，再根據這個邏輯傳回 FeatureStyleOptions。如果不需要樣式邏輯，您可以使用 FeatureStyleOptions 直接設定樣式。本頁說明如何將在地圖中新增資料集，以及如何套用樣式。

必備條件

請先備妥地圖 ID、地圖樣式和資料集 ID，才能繼續操作。

將資料集 ID 與地圖樣式建立關聯

請按照下列步驟操作，將資料集與您目前使用的地圖樣式建立關聯：

  1. 在 Google Cloud 控制台中，前往「Datasets」(資料集) 頁面。
  2. 按一下資料集名稱。「Dataset details」(資料集詳細資料) 頁面隨即顯示。
  3. 按一下「預覽」分頁標籤。
  4. 向下捲動，然後按一下「ADD MAP STYLE」(新增地圖樣式)。
    「ADD MAP STYLE」(新增地圖樣式) 按鈕的螢幕截圖。
  5. 找出要建立關聯的地圖樣式，勾選對應的核取方塊，然後按一下「SAVE」(儲存)。

使用簡易樣式規則

要設定地圖項目樣式，最簡單的方法就是傳遞 FeatureStyleOptions 來定義樣式屬性，例如顏色、不透明度和線條寬度。您可以直接將地圖項目樣式選項套用至資料集地圖項目圖層，也可以搭配 FeatureStyleFunction 使用。

TypeScript

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

JavaScript

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

index.js

使用宣告式樣式規則

使用 FeatureStyleFunction 即可透過宣告方式設定樣式規則，並套用至整個資料集。您可以根據資料集屬性值，將 FeatureStyleOptions 套用至地圖項目。此外，也可以從地圖項目樣式函式傳回 null (例如，希望部分地圖項目保持隱藏時)。下例中的樣式函式會根據資料屬性設定一組點的顏色：

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

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

將樣式套用至資料集地圖項目圖層

在地圖項目樣式函式中套用樣式的方法如下：

  1. 呼叫 map.getDatasetFeatureLayer() 並傳遞資料集 ID，取得資料集地圖項目圖層。
  2. 在資料集圖層設定地圖項目樣式選項 (例如 styleOptions) 或函式 (例如 setStyle)，以套用樣式。

TypeScript

const datasetLayer = map.getDatasetFeatureLayer(datasetId);
datasetLayer.style = styleOptions;
index.ts

JavaScript

const datasetLayer = map.getDatasetFeatureLayer(datasetId);

datasetLayer.style = styleOptions;

index.js

移除圖層中的樣式

如要移除圖層中的樣式，請將 style 設為 null：

featureLayer.style = null;

此外，也可以從地圖項目樣式函式傳回 null (例如，希望部分地圖項目保持隱藏時)。

新增作者資訊文字

在 Google 地圖上顯示上傳的資料集時，地圖必須顯示所有必要的作者資訊。作者資訊文字不得遮蓋或干擾 Google 標誌。

如要新增作者資訊文字，其中一種方法就是使用自訂控制項，將任意 HTML 程式碼加到地圖上的標準位置。下列程式碼範例中的函式會透過程式輔助的方式建立這類自訂控制項：

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

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

定義控制項後，您就可以在初始化時將控制項加進地圖，如下所示：

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

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