Menata gaya poligon batas

Ringkasan

Anda dapat menata gaya isi dan goresan untuk poligon batas dengan menetapkan properti style pada lapisan fitur ke google.maps.FeatureStyleFunction, yang dapat Anda gunakan untuk menentukan atribut gaya untuk warna, opasitas, dan ketebalan garis.

Untuk menata gaya poligon, tetapkan properti style ke google.maps.FeatureStyleFunction. Fungsi gaya adalah ketika Anda menentukan logika untuk menata gaya setiap poligon di lapisan fitur. Jika featureLayer.style ditetapkan, fungsi gaya dijalankan pada setiap fitur di lapisan fitur yang terpengaruh. Fungsi ini diterapkan saat Anda menetapkan properti gaya. Untuk memperbaruinya, Anda harus menetapkan properti gaya lagi.

Fungsi gaya harus selalu menampilkan hasil yang konsisten saat diterapkan pada fitur. Misalnya, jika Anda ingin mewarnai sekumpulan fitur secara acak, bagian acak tersebut tidak boleh terjadi di fungsi gaya fitur karena akan menyebabkan hasil yang tidak diinginkan.

Karena fungsi ini berjalan di setiap fitur dalam lapisan, pengoptimalan harus dilakukan. Agar tidak memengaruhi waktu rendering:

  • Aktifkan hanya lapisan yang Anda perlukan.
  • Tetapkan style ke null saat lapisan tidak lagi digunakan.

Untuk menata gaya poligon di lapisan fitur lokalitas, lakukan langkah-langkah berikut:

  1. Jika Anda belum melakukannya, ikuti langkah-langkah di bagian Memulai untuk membuat gaya peta dan ID peta baru. Pastikan untuk mengaktifkan lapisan fitur Lokalitas.

  2. Dapatkan referensi ke lapisan fitur lokalitas saat peta melakukan inisialisasi.

    featureLayer = map.getFeatureLayer("LOCALITY");

  3. Buat definisi gaya dari jenis google.maps.FeatureStyleFunction.

  4. Tetapkan properti style di lapisan fitur ke FeatureStyleFunction. Contoh berikut menunjukkan cara penentuan fungsi untuk menerapkan gaya hanya ke google.maps.Feature dengan ID tempat yang cocok:

    TypeScript

    // Define a style with purple fill and border.
//@ts-ignore
const featureStyleOptions: google.maps.FeatureStyleOptions = {
  strokeColor: '#810FCB',
  strokeOpacity: 1.0,
  strokeWeight: 3.0,
  fillColor: '#810FCB',
  fillOpacity: 0.5
};

// Apply the style to a single boundary.
//@ts-ignore
featureLayer.style = (options: { feature: { placeId: string; }; }) => {
  if (options.feature.placeId == 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') { // Hana, HI
    return featureStyleOptions;
  }
};
    index.ts

    JavaScript

    // Define a style with purple fill and border.
//@ts-ignore
const featureStyleOptions = {
  strokeColor: "#810FCB",
  strokeOpacity: 1.0,
  strokeWeight: 3.0,
  fillColor: "#810FCB",
  fillOpacity: 0.5,
};

// Apply the style to a single boundary.
//@ts-ignore
featureLayer.style = (options) => {
  if (options.feature.placeId == "ChIJ0zQtYiWsVHkRk8lRoB1RNPo") {
    // Hana, HI
    return featureStyleOptions;
  }
};
    index.js

Jika ID tempat yang ditentukan tidak ditemukan, atau tidak cocok dengan jenis fitur yang dipilih, gaya tidak akan diterapkan. Misalnya, jika Anda mencoba menetapkan gaya di lapisan POSTAL_CODE yang cocok dengan ID tempat untuk "New York City", maka gaya tidak akan diterapkan.

Menghapus gaya visual dari lapisan

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

featureLayer.style = null;

Mencari ID tempat untuk menarget fitur

Untuk mendapatkan data wilayah:

Gunakan Region Coverage Viewer untuk melihat Batas Google yang tersedia untuk semua wilayah yang didukung.

Cakupan bervariasi menurut wilayah. Lihat cakupan batas Google untuk mengetahui detailnya.

Nama geografis tersedia dari banyak sumber, seperti USGS Board on Geographic Names, dan US Gazetteer Files.

Kode contoh lengkap

TypeScript

let map: google.maps.Map;
//@ts-ignore
let featureLayer;

function initMap() {
  map = new google.maps.Map(document.getElementById('map') as HTMLElement, {
    center: { lat: 20.773, lng: -156.01 }, // Hana, HI
    zoom: 12,
    // In the cloud console, configure this Map ID with a style that enables the
    // "Locality" feature layer.
    mapId: 'a3efe1c035bad51b', // <YOUR_MAP_ID_HERE>,
  });

  //@ts-ignore
  featureLayer = map.getFeatureLayer('LOCALITY');

  // Define a style with purple fill and border.
  //@ts-ignore
  const featureStyleOptions: google.maps.FeatureStyleOptions = {
    strokeColor: '#810FCB',
    strokeOpacity: 1.0,
    strokeWeight: 3.0,
    fillColor: '#810FCB',
    fillOpacity: 0.5
  };

  // Apply the style to a single boundary.
  //@ts-ignore
  featureLayer.style = (options: { feature: { placeId: string; }; }) => {
    if (options.feature.placeId == 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') { // Hana, HI
      return featureStyleOptions;
    }
  };

}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript

let map;
//@ts-ignore
let featureLayer;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 20.773, lng: -156.01 },
    zoom: 12,
    // In the cloud console, configure this Map ID with a style that enables the
    // "Locality" feature layer.
    mapId: "a3efe1c035bad51b", // <YOUR_MAP_ID_HERE>,
  });
  //@ts-ignore
  featureLayer = map.getFeatureLayer("LOCALITY");

  // Define a style with purple fill and border.
  //@ts-ignore
  const featureStyleOptions = {
    strokeColor: "#810FCB",
    strokeOpacity: 1.0,
    strokeWeight: 3.0,
    fillColor: "#810FCB",
    fillOpacity: 0.5,
  };

  // Apply the style to a single boundary.
  //@ts-ignore
  featureLayer.style = (options) => {
    if (options.feature.placeId == "ChIJ0zQtYiWsVHkRk8lRoB1RNPo") {
      // Hana, HI
      return featureStyleOptions;
    }
  };
}

window.initMap = initMap;
index.js

CSS

/*
 * Always set the map height explicitly to define the size of the div element
 * that contains the map.
 */
#map {
  height: 100%;
}

/*
 * Optional: Makes the sample page fill the window.
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

style.css

HTML

<html>
  <head>
    <title>Boundaries Simple</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>

    <!--
      The `defer` attribute causes the callback to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises.
      See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=beta"
      defer
    ></script>
  </body>
</html>
index.html

Mencoba Contoh