Menambahkan set data ke peta

Pilih platform: Android iOS JavaScript

FeatureStyleFunction adalah tempat Anda menentukan logika untuk menata gaya fitur dalam set data secara selektif. FeatureStyleOptions akan ditampilkan berdasarkan logika ini. Jika logika gaya visual tidak diperlukan, Anda dapat menggunakan FeatureStyleOptions untuk menetapkan gaya secara langsung. Halaman ini menguraikan cara menambahkan set data ke peta, dan menerapkan gaya visual.

Prasyarat

Sebelum melanjutkan, Anda harus memiliki ID peta dan gaya peta, serta ID set data.

• Membuat ID peta dan gaya peta
• Membuat dan mengupload set data

Mengaitkan ID set data dengan gaya peta

Lakukan langkah-langkah berikut untuk mengaitkan set data Anda dengan gaya peta yang Anda gunakan:

1. Di Konsol Google Cloud, buka halaman Datasets.
2. Klik nama set data. Halaman Dataset details akan muncul.
3. Klik tab Preview.
4. Scroll ke ADD MAP STYLE, lalu klik.
   
5. Centang kotak untuk Gaya Peta yang akan dikaitkan, lalu klik SAVE.

Perhatian: Merender beberapa set data pada peta dapat memengaruhi performa, bergantung pada ukuran dan jumlah set data.

Menggunakan aturan gaya sederhana

Cara paling sederhana untuk menata gaya fitur adalah dengan meneruskan FeatureStyleOptions untuk menentukan atribut gaya seperti warna, opasitas, dan ketebalan garis. Terapkan opsi gaya fitur secara langsung ke lapisan fitur set data, atau gunakan bersama dengan FeatureStyleFunction.

TypeScript

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

Catatan: Baca panduan cara menggunakan TypeScript dan Google Maps.

JavaScript

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

Menggunakan aturan gaya deklaratif

Gunakan FeatureStyleFunction untuk menetapkan aturan gaya secara deklaratif, dan menerapkannya di seluruh set data Anda. Terapkan FeatureStyleOptions ke fitur berdasarkan nilai atribut set data. Anda juga dapat menampilkan null dari fungsi gaya fitur, misalnya, jika Anda ingin sebagian fitur tetap tidak ditampilkan. Contoh ini menunjukkan fungsi gaya yang mewarnai kumpulan titik berdasarkan atribut data:

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

Catatan: Baca panduan cara menggunakan TypeScript dan 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

Menerapkan gaya ke lapisan fitur set data

Untuk menerapkan gaya dalam fungsi gaya fitur:

1. Dapatkan lapisan fitur set data dengan memanggil metode map.getDatasetFeatureLayer(), dan meneruskan ID set data.
2. Terapkan gaya dengan menetapkan opsi gaya fitur (misalnya, styleOptions) atau fungsi (misalnya, setStyle) di lapisan set data.

TypeScript

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

Catatan: Baca panduan cara menggunakan TypeScript dan Google Maps.

JavaScript

const datasetLayer = map.getDatasetFeatureLayer(datasetId);

datasetLayer.style = styleOptions;
index.js

Menghapus gaya visual dari lapisan

Untuk menghapus gaya visual dari lapisan, tetapkan style ke null:

featureLayer.style = null;

Anda juga dapat menampilkan null dari fungsi gaya fitur, misalnya, jika Anda ingin sebagian fitur tetap tidak ditampilkan.

Menambahkan teks atribusi

Peta Anda harus menampilkan atribusi yang diperlukan saat menampilkan set data yang diupload di Google Maps. Teks atribusi tidak boleh mengaburkan atau mengganggu logo Google.

Salah satu cara untuk menambahkan teks atribusi adalah menggunakan kontrol kustom untuk menempatkan HTML arbitrer pada posisi standar di peta. Contoh kode berikut menunjukkan fungsi yang secara terprogram membuat satu kontrol kustom tersebut:

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

Catatan: Baca panduan cara menggunakan TypeScript dan 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

Setelah kontrol ditentukan, Anda dapat menambahkannya ke peta pada waktu inisialisasi, seperti yang ditunjukkan di sini:

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

Catatan: Baca panduan cara menggunakan TypeScript dan 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